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....

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
Post a Comment