PDA

View Full Version : EditorGridPanel can only be edited for first time.



yuanqixun
17 Sep 2009, 1:11 AM
Environment:
1. Ext3.0
2. Use tabpanel for the content panel.

Step:
1. In one tab, show a window (not a frame) and it has a editorgridpanle, it is editable for the first time.
2. before close the window, I had destroyed the grid (call grid.destroy());
3. reopen the window, I will not edit the column that edited for first time and other columns also work.
Any way, the editorgrid's column can only be edited one time.
Any one meet the problem? Please give help, thanks.

Best regards,
Yuan

17 Sep 2009, 3:08 AM
Yuan, sounds like you have somehing wrong. how about posting your code so we can help?

yuanqixun
17 Sep 2009, 7:01 AM
Yuan, sounds like you have somehing wrong. how about posting your code so we can help?

Thanks for your reply. My code is very large, so I can't paste the all code here.
my code just as bellow:
1. The wrap window's panel is as bellow :


LoanApplyForm = Ext.extend(Ext.Panel, {
...
initComponent : function() {
// dynamic load detail grid
$JIT.get(
{async : false},
Env.ctx + '/psm/loan/LoanApplyDetailList.js');
// instance the grid panel
this.detailGrid = new LoanApplyDetailList({....});
this.items = [{...},this.detailGrid,{...}];
},
....
});


2. the LoanApplyDetail is as bellow:


LoanApplyDetailList = Ext.extend(Ext.EditorGridPanel, {
store: new Ext.data.JsonStore(){.....},
cm : new Ext.grid.ColumnModel([{
id:'title',
dataIndex:'title',
editor : new Ext.form.TextField({allowBlank : false,readOnly : false})
},{....}])
initComponent:function(){....}
});


Just like this, I use the LoanApplyForm in a window and use a button to show the window.
the sequence is :
1. For the first time, it ok, work normally.
2. open the window again(no refresh), the content can load, but the just edited's editor can't open(can't edit it), but the other field(not click in the previous time) can edit, but the third time they also can't edit like case 2.

Don't you meet the problem?
And does my description clearly? If not , I will attach a full problem demo for it tomorrow.

Hope you can help me ,thanks.
Best regards,
Yuan

carol.ext
17 Sep 2009, 7:49 AM
We had similar issues with 2.x where we did not recreate the column model each time the grid was created. Are you extending just to configure?

yuanqixun
17 Sep 2009, 4:46 PM
We had similar issues with 2.x where we did not recreate the column model each time the grid was created. Are you extending just to configure?

Do you resolve this issues? What's mean "extending just to configure".
I just design a reusable editorgridpanle's subclass, so I can use it just as java class
1. new subclass
2. use it

Is it right?

yuanqixun
17 Sep 2009, 6:04 PM
To review the problem, we can modify the official examples:edit-grid.js


/*
* ! Ext JS Library 3.0.0 Copyright(c) 2006-2009 Ext JS, LLC [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function() {
Ext.QuickTips.init();
// shorthand alias
var fm = Ext.form;
function formatDate(value) {
return value ? value.dateFormat('M d, Y') : '';
}

// custom column plugin example
var checkColumn = new Ext.grid.CheckColumn({
header : 'Indoor?',
dataIndex : 'indoor',
width : 55
});

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
id : 'common',
header : 'Common Name',
dataIndex : 'common',
width : 220,
// use shorthand alias defined above
editor : new fm.TextField({
allowBlank : false
})
}, {
header : 'Light',
dataIndex : 'light',
width : 130,
editor : new fm.ComboBox({
typeAhead : true,
triggerAction : 'all',
transform : 'light',
lazyRender : true,
listClass : 'x-combo-list-small'
})
}, {
header : 'Price',
dataIndex : 'price',
width : 70,
align : 'right',
renderer : 'usMoney',
editor : new fm.NumberField({
allowBlank : false,
allowNegative : false,
maxValue : 100000
})
}, {
header : 'Available',
dataIndex : 'availDate',
width : 95,
renderer : formatDate,
editor : new fm.DateField({
format : 'm/d/y',
minValue : '01/01/06',
disabledDays : [0, 6],
disabledDaysText : 'Plants are not available on the weekends'
})
}, checkColumn]);

// by default columns are sortable
cm.defaultSortable = true;

// create the Data Store
var store = new Ext.data.Store({
// load remote data using HTTP
url : 'plants.xml',

// specify a XmlReader (coincides with the XML format of the
// returned data)
reader : new Ext.data.XmlReader({
// records will have a 'plant' tag
record : 'plant'
},
// use an Array of field definition objects to
// implicitly create a Record constructor
[
// the 'name' below matches the tag name to
// read, except 'availDate'
// which is mapped to the tag 'availability'
{
name : 'common',
type : 'string'
}, {
name : 'botanical',
type : 'string'
}, {
name : 'light'
}, {
name : 'price',
type : 'float'
},
// dates can be automatically converted by
// specifying dateFormat
{
name : 'availDate',
mapping : 'availability',
type : 'date',
dateFormat : 'm/d/Y'
}, {
name : 'indoor',
type : 'bool'
}]),

sortInfo : {
field : 'common',
direction : 'ASC'
}
});


function getGrid() {

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store : store,
cm : cm,
// renderTo: 'editor-grid',
width : 600,
height : 300,
autoExpandColumn : 'common',
title : 'Edit Plants?',
frame : true,
plugins : checkColumn,
clicksToEdit : 1,
tbar : [{
text : 'Add Plant',
handler : function() {
// access the Record constructor through the
// grid's store
var Plant = grid.getStore().recordType;
var p = new Plant({
common : 'New Plant 1',
light : 'Mostly Shade',
price : 0,
availDate : (new Date())
.clearTime(),
indoor : false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});
// trigger the data store load
store.reload();
return grid;
}

var panel = new Ext.Panel({
renderTo : 'editor-grid',
buttons : [{
text : 'open',
handler : function() {
var window = new Ext.Window({
title : 'grid',
// closeAction : 'hide',
items : [getGrid()]
});

window.show();
}
}]
});
});


now, you can see the problem, is it the cm's reason?
hope anyone can help me, thanks.

carol.ext
18 Sep 2009, 6:26 AM
Do you resolve this issues?

We resolved issue by not reusing the column model when a grid is created. I'm no extend expert, but it looks like your extended grid class instantiates one column model that all instances use.


LoanApplyDetailList = Ext.extend(Ext.EditorGridPanel, {
store: new Ext.data.JsonStore(){.....},
cm : new Ext.grid.ColumnModel([{
...



What's mean "extending just to configure".


"Extend to configure" means creating a subclass/extending just to add in the configuration. Here are a couple of helpful articles on application design that discuss extending vs other designs:

Read whole thing but especially take a look at the "Factory or Extend?" section:
http://www.extjs.com/forum/showthread.php?p=259901#post259901

Again, read entire thing, but for your specific question read the when a subclass is not needed section (http://www.extjs.com/learn/Tutorial:Creating_new_UI_controls#When_a_subclass_is_not_needed):

http://www.extjs.com/learn/Tutorial:Creating_new_UI_controls



I just design a reusable editorgridpanle's subclass, so I can use it just as java class
1. new subclass
2. use it

Is it right?

If you were extending a java servlet or an applet class you would need to take care to do it in a way that worked with the lifecycle of the class. The same is true here and so I point you to the articles referenced above.

yuanqixun
18 Sep 2009, 6:57 AM
We resolved issue by not reusing the column model when a grid is created. I'm no extend expert, but it looks like your extended grid class instantiates one column model that all instances use.


LoanApplyDetailList = Ext.extend(Ext.EditorGridPanel, {
store: new Ext.data.JsonStore(){.....},
cm : new Ext.grid.ColumnModel([{
...


"Extend to configure" means creating a subclass/extending just to add in the configuration. Here are a couple of helpful articles on application design that discuss extending vs other designs:

Read whole thing but especially take a look at the "Factory or Extend?" section:
http://www.extjs.com/forum/showthread.php?p=259901#post259901

Again, read entire thing, but for your specific question read the when a subclass is not needed section (http://www.extjs.com/learn/Tutorial:Creating_new_UI_controls#When_a_subclass_is_not_needed):

http://www.extjs.com/learn/Tutorial:Creating_new_UI_controls



If you were extending a java servlet or an applet class you would need to take care to do it in a way that worked with the lifecycle of the class. The same is true here and so I point you to the articles referenced above.

carol,
sure, you are right, I'm wrong for the class field's lifecycle. today, I let the columnmode to the initComponet method and it work ok.
And I will read you article carefully, is it a static field if I statement the cm field as public field.
I'm wrong before today.
any way, thanks for you help