html - cant display ItemSelector in ExtJS 4.2 -
here test code in extjs in 4.2. type of code works in 4.0.2. plz find mistake. in firebug im not getting error isform object not being instantiated. have tried many alternatives changing height , giving anchor it. in chrome , ff nothing being displayed in ie8 above part getting displayed.
<head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>multiselect & itemselector</title> <!-- extjs --> <script type="text/javascript" src="../../examples/shared/include-ext.js"></script> <script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script> <script type="text/javascript" src="../../examples/ux/form/itemselector.js"></script> <script type="text/javascript" src="../../examples/ux/form/multiselect.js"></script> <!-- shared --> <link rel="stylesheet" type="text/css" href="../shared/example.css" /> <!-- example --> <script type="text/javascript"> ext.loader.setconfig({ enabled: true }); ext.loader.setconfig({enabled: true}); ext.loader.setpath('ext.ux', 'extjsnew/examples/ux'); ext.require([ 'ext.form.panel', 'ext.ux.form.multiselect', 'ext.ux.form.itemselector' ]); ext.onready(function(){ ext.define('idvalpair', { extend: 'ext.data.model', fields: [ { name: 'id'}, { name: 'value'} ] }); var ds = ext.create('ext.data.store', { model: 'idvalpair', autodestroy: true, data: [{'id':'1','value':'one'}, {'id':'2','value':'two'}, {'id':'3','value':'three'}, {'id':'4','value':'four'}, {'id':'5','value':'five'}, {'id':'6','value':'six'}], proxy: { type: 'memory' }, sorters: [{ property: 'value', direction: 'asc' }] }); var isform = ext.widget('form', { title: '<center>roles</center>', width: '500', bodypadding: 5, align:'center', id:'isfrom', renderto: 'itemselector', items:[{ xtype: 'displayfield', name: 'displayfield1', id:'empdetails', value: '', fieldlabel:'<b>employee name</b>' }, { xtype: 'itemselector', name: 'itemselector', id:'itemselector', buttons:['add','remove'], flex: 1, //anchor: '100%', //imagepath: 'extjsnew/ux/images/', store: ds, displayfield: 'value', valuefield: 'id', //allowblank: false, // minselections: 2, // maxselections: 3, msgtarget: 'side', fromtitle: 'available', totitle: 'selected' }] }); isform.show(); }); </script> <link rel="stylesheet" type="text/css" href="../ux/css/itemselector.css" /> <!-- gc --> </head> <body> <h1>itemselector</h1> <div id="itemselector" class="demo-ct"></div> </body> </html>
Comments
Post a Comment