drag and drop - EXtjs Component doesn't show in proper layout? -


here simple extjs code example of drag , drop

ext.require([     'ext.grid.*',     'ext.data.*',     'ext.dd.*' ]);  ext.define('dataobject', {     extend: 'ext.data.model',     fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'] });  ext.onready(function() {      var mydata = [         { name: "metric one", data1: "4", data2: "12", data3: "14", data4: "8", data5: "13"},         { name: "metric 2 ", data1: "7", data2: "8", data3: "16", data4: "10", data5: "3" },         { name: "metric three", data1: "5", data2: "2", data3: "14", data4: "12", data5: "7 " },         { name: "metric four", data1: "2", data2: "14", data3: "6", data4: "1", data5: "4 " },         { name: "metric five", data1: "7", data2: " 4", data3: "4", data4: "13", data5: "4" }     ];          var mydata2 = [         { name: "metric one", data1: "4", data2: "12", data3: "14", data4: "8" },         { name: "metric 2 ", data1: "7", data2: "8", data3: "16", data4: "10"  },         { name: "metric three", data1: "5", data2: "2", data3: "14", data4: "12"  },         { name: "metric four", data1: "2", data2: "14", data3: "6", data4: "1"  },         { name: "metric five", data1: "7", data2: " 4", data3: "4", data4: "13" }     ];      var firstgridstore = ext.create('ext.data.store', {         model: 'dataobject',         data: mydata     });       var columns = [         { text: "", width: 80, sortable: true, dataindex: 'name' },         { text: "", width: 50, sortable: true, dataindex: 'data1' },         { text: "", width: 50, sortable: true, dataindex: 'data2' },         { text: "", width: 50, sortable: true, dataindex: 'data3' },         { text: "", width: 50, sortable: true, dataindex: 'data4' },         { text: "", width: 50, sortable: true, dataindex: 'data5' }     ];      var firstgrid = ext.create('ext.grid.panel', {         multiselect: true,         viewconfig: {             plugins: {                 ptype: 'gridviewdragdrop',                 draggroup: 'firstgridddgroup',                 dropgroup: 'secondgridddgroup'             }         },         store: firstgridstore,         columns: columns,         striperows: true     });      var secondgridstore = ext.create('ext.data.store', {         model: 'dataobject',         data:mydata2     });      var secondgrid = ext.create('ext.grid.panel', {         viewconfig: {             plugins: {                 ptype: 'gridviewdragdrop',                 draggroup: 'secondgridddgroup',                 dropgroup: 'firstgridddgroup'             }          },         store: secondgridstore,         columns: columns,         striperows: true     });      var displaypanel = ext.create('ext.panel', {         width: 750,         height: 400,         layout: {             type: 'hbox',             align: 'stretch',             padding: 1         },         renderto: 'panel',         defaults: { flex: 1 },          items: [             firstgrid,             secondgrid         ]      }); }); 

and added required file to aspx page

  <script type ="text/javascript" src ="ext-all-debug.js" defer="defer" ></script> <script type="text/javascript" src="temp.js" defer ="defer" ></script> 

but it's give result without design....

enter image description here

why happening? missed in import or write?please remove problem...

i guess forgot import extjs css file in aspx page.

<link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css"> <script type="text/javascript" src="ext-4/ext-debug.js"></script> <script type="text/javascript" src="temp.js"></script> 

try , let me know.

thanks


Comments

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

Automatically create pages in phpfox -

c# - Farseer ContactListener is not working -