Frage zur Drag- and Drop-Funktionalität von extJS

pkm

Aufsteiger

Join Date: 09.10.2017
Posts: 57

Frage zur Drag- and Drop-Funktionalität von extJS

04.11.2017, 18:08

Ich habe begonnen, mich in sencha extJS einzuarbeiten.

Mein Ziel ist es, zum Spaß eine Applikation zu schrieben, die Name, Alter und Id fiktiver Personen in ein Grid setzt, wobei ich dann die Bilder der Personen in eine Komponente platzieren will. Hier der html-Code, ich erkläre durch die Kommentare, was ich da genau vorhabe:

Code:

<html>
		 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        
         <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
         <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
		 <script type = "text/javascript"
		 src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all-debug.js"></script>
        
        <title id='title'>Tutorial</title>
        
    <style> 
     #mainRoom { 
            float:right;
            width:400;
            height:400;
            border:1px solid Black;
            background-color:rgba(222, 222, 222, 1.0);
            <!--background-color:transparent;-->
         }
     
              
      #images {
          float:left;
          width:400;
          height:400;
          border:1px solid Black;
          background-color:rgba(222, 222, 222, 1.0);
         }
         
          
     .image {   
           
            border:1px solid Black;
            display: inline-block;
         }         
         
     </style>    
    </head>
    <body>

 
       <script type="text/javascript" src="extStart2.js"></script>
    
    
    
     	<div id = "images"></div> 
           
      	<div id = "mainRoom"></div>
      	

    <div id="myDiv"></div>
        
    </body>
</html>

Nun zum Skript: Alles nimmt dort seinen Anfang mit Ext.onReady(function(), ich werde anhand der Kommentare einmal erklaeren, was ich da genau vorhabe:

Code:

//Das ist das Datenmodell, es modelliert User mit den entsprechenden Feldern. Siehe //aber erst Ext.onReady(function(), !!

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'age', 'id']
});


function createDD(ids){
	
	var ht=""; 
	
	
//Bislang habe ich das nur mit einem Bild einer Person gemacht.

	Ext.each(ids, function(index) {

		ht+="<img src="+ids+".jpg class=\"image\" />\n";
		
	}); 
	
//Die <img>s kommen in der html-Datei nach <images>...	
          Ext.create('Ext.Panel', {
             renderTo: 'images',
             height: 400,
             width: 400,
             title: 'Pictures',
             html: ht
          });

//Hier will ich alles, was unter images in der html Datei ist, Drag- und Droppable //machen.
          var images = Ext.get('images').select('img');
          Ext.each(images.elements, function(el) {
             var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
                isTarget: false
             });
          });

//Dahin sollen sie nun gezogen werden koennen.
          var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
              ignoreSelf: false
           });
}






Ext.onReady(function() { 

//Das ist mein Store mit dem Model (siehe ganz oben) und einem built-in AJAX-Proxy.
var store = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'data.php',
        reader: 'json'
    }
});

var pro = new Ext.data.proxy.Ajax({
    url: 'data.php',
    reader: 'json'
});

store.setProxy(pro);


//Beim laden des Stores habe ich eine Callbackfunktion.

store.load({
    callback: function() {

    	var persons = new Array();
    	
    	var i=0;  	
    	while(i < store.getCount()){
    	var firstRecord = store.getAt(i);
    	persons.push(firstRecord.get('id').toString());
    	i++;
    	}
    	    	
    	
    	createDD(persons);//In den Array „persons“ kommen die ids der User.
      //Entscheidend für meine Frage ist das, was in createDD passiert.
    }
});


//Die Daten der User werden in einen Gridpanel gesetzt, der dann an das div myDiv geht.

Ext.create('Ext.grid.Panel', {
    id                : 'gridId',
    store             : store,
    stripeRows        : true,
    title             : 'Users Grid',   
    renderTo          :'myDiv',       
    width             : 800,
    collapsible       : true,         
    enableColumnMove  :true,          
    enableColumnResize:true,          
    
    columns           :
    [{ 
       header: "Student Name",
       dataIndex: 'name',	
       id : 'name',    
       flex:  1,         
       sortable: true,   
       hideable: true    
    },{
       header: "Age", 
       dataIndex: 'age',
       flex: .5, 
       sortable: true,
       hideable: false   
    },{
       header: "ID",
       dataIndex: 'id',
       flex: .5, 
       sortable: true
    }]
 }); 


});

Nun zum Problem: Die Tabelle wird geladen, das Bild auch, das Bild dann auch hin- und hergezogen werden. Was mich wundert ist aber folgendes - immer, wenn ich das Bild in den rechten Bereich, d. h. ins Target, "droppen" will, verschwindet das Bild einfach hinter dem <div> anstatt auf diesem zu landen. Zumal ich alles eigentlich so ziemlich nahe an einer Anleitung orientiert gemacht habe, wundert mich, woran das liegen könnte. Darum meine Frage:

Woran könnte das verschwinden des Bildes liegen?

Naja, ich habe hier auch noch die PHP-Datei, aus der die Daten gelesen werden:

Code:

<?php 
    
 

 $array = array(
    "name" => "Elke",
	"age"  => 20,
	"id" => 12312
    );
	
$myJSON = json_encode($array);
		
echo $myJSON;
	 
    ?>

Tags: None

Announcement

Frage zur Drag- and Drop-Funktionalität von extJS

Frage zur Drag- and Drop-Funktionalität von extJS