javascript - ExtJS EditorGridPanel display Error -
i have problem ext.grid.editorgridpanel, using extjs 2.3.0, can't changed. :-(
following problem:
i created window consist of 2 formpanel , between them editorgridpanel. viewconfig of grid, there "forcefit=true" set , no style or view options set columnmodel. each column align option set "center". columnmodel consits of 13 columns, more or less text only. open website working on browser , open window test gui. when try switch between cells in single row entire data row moves left, first cells no more shown. after adding new row grid (via add button) view resets , cells each column displayed correctly again. column headers , tbar fixed , correctly rendered.
the problem occurs iexplorer 8.0x, older firefox version (2.0x), grid works fine firefox 3.6x , safari 5.0x. if had similar problem , got fixed or idea may causes problem, feel free answer. ;-) many in advance!
[edit] thx comment, here modifyed source complete source:
gettypeselectiongrid: function() { this.gridrecord: ext.data.record.create([ {name:'id', type:'int'}, {name:'start', type:'string'}, {name:'end', type:'string'}, {name:'mo', type:'boolean'}, {name:'tu', type:'boolean'}, {name:'we', type:'boolean'}, {name:'th', type:'boolean'}, {name:'fr', type:'boolean'}, {name:'sa', type:'boolean'}, {name:'su', type:'boolean'}, {name:'type', type:'string'} ]); this.gridstore = new ext.data.store({ baseparams: { }, sortinfo: {field: 'id', direction: 'asc'}, proxy: new ext.data.httpproxy({ url: '', method: 'post' }), reader: new ext.data.jsonreader({ root: 'data', totalproperty: 'totalcount', id: 'id' }, this.gridrecord) }); var sm = new ext.grid.rowselectionmodel({ singleselect: true }); var columnconfig = []; //auto incremented id column columnconfig.push({ header: 'id', dataindex: 'id', width: 50, editor: new ext.form.textfield({ anchor: '100%', allowblank: false, disabled: true }) }); //start value time range, values '00:00' '24:00' steps second, here shorted 2 options columnconfig.push({ header: 'start', dataindex: 'start', width: 70, align: 'center', editor: new ext.form.combobox({ store: new ext.data.simplestore({ fields: ['val', 'txt'], data : [['00:00', '00:00'],['24:00', '24:00']] }), displayfield: 'txt', valuefield: 'val', typeahead: true, mode: 'local', triggeraction: 'all', selectonfocus: true, saverouting: true, forceselection: true, anchor: '100%', allowblank: false }) }); //same above end of time range, dataindex 'end' //now 7 checkbox columns foreach weekday columnconfig.push({ xtype: 'checkcolumn', header: 'mo', dataindex: 'mo', align: 'center', width: 30 })); //same above dataindex 'tu', 'we', 'th', 'fr', 'sa' , 'su' //here simplified simplestore, remote store gets data //by httpproxy columnconfig.push({ header: 'type', dataindex: 'type', editor: new ext.form.combobox({ store: new ext.data.simplestore({ fields: ['val', 'txt'], data : [[1, 'type 1'],[2, 'type 2']] }), displayfield: 'txt', valuefield: 'txt', typeahead: true, mode: 'local', triggeraction: 'all', selectonfocus: true, saverouting: true, forceselection: true, anchor: '100%', allowblank: false }) }); //then 2 plugins have functionality selected row //grid tested , without both plugins, not cause var cm = new ext.grid.columnmodel(columnconfig); cm.defaultsortable = false; //now grid this.typeselectiongrid = new ext.grid.editorgridpanel({ store: this.gridstore, clickstoedit: 1, autoheight: true, cm: cm, sm: sm, viewconfig: { forcefit: true }, tbar: [{ text: 'add new row', cls: 'x-btn-text', scope: this, handler: function(){ //adds row incremented id } }], listeners: { scope: this, show: function() { sm.selectfirstrow.defer(1000, selectionmodel); } } }); return this.typeselectiongrid; }, //the grid inserted between panels window component //looks render: function() { var layoutfn = function(pnl) { pnl.ownerct.ownerct.dolayout.defer(ext.isie ? 300 : 0, pnl.ownerct.ownerct); pnl.dolayout.defer(ext.isie ? 500 : 200, pnl); }; this.cardlayout.add({ layout: 'border', border: false, bodystyle: 'background-color: #fff', items: [ { region: 'center', border: false, layout: 'column', autoscroll: true, defaults: { columnwidth: 1, bodystyle: 'padding: 5px;', border: false, autoheight: true, layout: 'column', defaults: { columnwidth: 1 } }, items: [ //first ext.form.formpanel textfields { items: { listeners: { expand: layoutfn, collapse: layoutfn }, frame: true, title: 'panel grid', collapsible: true, titlecollapse: true, layout: 'fit', autoheight: true, items: this.gettypeselectiongrid() } } //second ext.form.formpanel textfields ] } ] }); }
first of all, looks have javascript syntax errors. know posted snippet of code, try running whole thing through js lint.
for starters:
this.gridrecord: ext.data.record.create([ {name:'id', type:'int'}, {name:'start', type:'string'}, {name:'end', type:'string'}, {name:'mo', type:'boolean'}, {name:'tu', type:'boolean'}, {name:'we', type:'boolean'}, {name:'th', type:'boolean'}, {name:'fr', type:'boolean'}, {name:'sa', type:'boolean'}, {name:'su', type:'boolean'}, {name:'type', type:'string'} ]); should be:
this.gridrecord = ext.data.record.create([ while i'm not entirely sure cause problem, see column configs have widths assigned them. though setting viewconfig property "forcefit: true", suspect editor may attempt use widths have set each column.
see if clears anything.
Comments
Post a Comment