PDA

View Full Version : field turns non editable after using Ext.Toolbar in Ext.grid.EditorGridPanel



Margusja
5 Aug 2009, 4:11 AM
Hello.

I have EditorGridPanel and in itToolbar type splitbutton.

---

listGrid = new Ext.grid.EditorGridPanel({
id: 'listGrid',
store: listStore,
colModel: hostsColumnModel,
viewConfig: {
forceFit: true,
getRowClass : row_config
},
tbar: new Ext.Toolbar({
xtype: 'splitbutton',
items: [
{text: 'Vaade', xtype: 'splitbutton',
menu: [
{text: 'Grupeeritud vaade', handler: switch_to_grouped_view}
]}
]
}),
renderTo: 'list',
width: 1000,
height: 500,
frame: true,
clicksToEdit: '1'
});
listGrid.on('afteredit', saveHost);
---
Here is my listStore:
---

listStore = new Ext.data.GroupingStore({
id: 'profileStore',
proxy: new Ext.data.HttpProxy({
url: 'http://example.com/panel/public/index/gethosts',
method: 'POST'
}),
autoLoad: true,
reader: new Ext.data.JsonReader({
root: 'results'
},[
{name: 'id', type: 'int', mapping: 'id'},
{name: 'host', type: 'string', mapping: 'host'},
{name: 'profile', type: 'int', mapping: 'profile'},
{name: 'active', type: 'bool', mapping: 'active'},
{name: 'messages', type: 'bool', mapping: 'messages'},
{name: 'ping', type: 'bool', mapping: 'ping'},
{name: 'load', type: 'string', mapping: 'load'},
{name: 'proc', type: 'string', mapping: 'proc'},
{name: 'disk', type: 'string', mapping: 'disk'}
]),
groupOnSort: true,
remoteGroup: true,
groupField: 'profile',
sortInfo: {field: 'host', direction: 'ASC'}
});
---

I can edit edit i.e active field. But after I use splitbutton and switch to the EditorGridPanel with grouped mode using function:

---

var switch_to_grouped_view = function () {
Ext.get("list").update('<script type="text/javascript" src="http://example.com/zone/grouping_list.js"></script>', true);
}
---

Now I can't edit active field. I can edit fields that I haven't touch in Ext.grid.EditorGridPanel view.
If I edit some field in EditorGridPanel (grouping mode) view and switch back to the non grouping mode then I can't edit thous fields that I edited in previous grid.
If I click to the field field doesn't turn editable.

Any hints?

Condor
5 Aug 2009, 4:16 AM
That is NOT the way to replace a component with a different one!

You are creating a huge memory leak because you don't destroy() the current grid before loading a new one.

Margusja
5 Aug 2009, 4:19 AM
Good hing. I try to integrate destroy() into somewhere in my code.

Margusja
5 Aug 2009, 4:59 AM
Added listGrid.destroy(); before I make groupGrid.
But I have still this non editable fields problem. Any hint how to debug it?

Margusja
5 Aug 2009, 5:06 AM
A little debug info.

activeField = new Ext.form.Checkbox({
id: 'activeField',
fieldLabel: 'Aktiivne'
});

hostsColumnModel = new Ext.grid.ColumnModel(
{header: 'Aktiivne', dataIndex: 'active', width: 50, editor: activeField, sortable: true}... - I can't edit field in gridPanel

hostsColumnModel = new Ext.grid.ColumnModel(
{header: 'Aktiivne', dataIndex: 'active', width: 50, editor: new Ext.form.Checkbox({}), sortable: true}... I can edit!

Condor
5 Aug 2009, 5:50 AM
A Checkbox editor doesn't work very well. Use the CheckColumn extension instead (in examples/ux).

Margusja
5 Aug 2009, 5:59 AM
Ok, this helps a little. But still can't edit fields after changin grid via splitputton :(

Margusja
5 Aug 2009, 10:19 PM
Did some research and now I have some questions.
My goal is to switch due split button to show EditorGridPanel once listed and then grouped. I use code:

var switch_to_grouped_view = function () {
grouping = true;
console.log(grouping);
Ext.get("list").update('<script type="text/javascript" src="http://ftp.margusja.pri.ee/zone/list.js"></script>', true);
}
var switch_to_list_view = function () {
grouping = false;
Ext.get("list").update('<script type="text/javascript" src="http://ftp.margusja.pri.ee/zone/list.js"></script>', true);
}

listGrid = new Ext.grid.EditorGridPanel({
id: 'listGrid',
store: listStore,
colModel: hostsColumnModel,
view: grouping? grouping_view : false,
viewConfig: {
forceFit: true,
getRowClass : row_config
},
tbar: new Ext.Toolbar({
xtype: 'splitbutton',
items: [
{text: 'Vaade', xtype: 'splitbutton',
menu: [
{text: 'List', handler: switch_to_list_view},
{text: 'Grupeeritud vaade', handler: switch_to_grouped_view}
]}
]
}),
renderTo: 'list',
width: 1000,
height: 500,
frame: true,
clicksToEdit: '1'
});
listGrid.on('afteredit', saveHost);

It works. Ok I should destroy old grid before creating a new one but I I use listGrid.destroy(); I'll lost listStore and I can't create a new grid. Any hints? Do I need somehow destroy only grid? And how to tell - "don't destroy store?"

But I still have this problem If I edit in example in list view active field and turn to grouped view then I can't edit active field any more. I can edit fields that I haven't edited in previous view. Somehow edited field locked.
I tried to use different ColumnModels then I could change my fields but only once. My columnModel is:

hostsColumnModel = new Ext.grid.ColumnModel(
[{header: '#',readOnly: true, dataIndex: 'id',width: 50,hidden: true},
{header: 'Host', dataIndex: 'host', width: 150, sortable: true},
{header: 'Profiil', dataIndex: 'profile', width: 150, sortable: true, editor: profile_combo, renderer: Ext.util.Format.comboRenderer(profile_combo)},
{header: 'Aktiivne', dataIndex: 'active', width: 50, editor: activeField, sortable: true, renderer: formatBoolean},
{header: 'Teated', dataIndex: 'messages', width: 50, editor: messagesField, sortable: true, renderer : formatBoolean},
{header: 'Ping', dataIndex: 'ping', width: 50, editor: pingField, sortable: true, renderer : formatBoolean},
{header: "Load", dataIndex: 'load', width: 150, sortable: true, editor: load_combo},
{header: 'Proc', dataIndex: 'proc', width: 150, sortable: true, editor: proc_combo},
{header: 'Disk', dataIndex: 'disk',width: 150, sortable: true, editor: disk_combo}
]
);

is it ok? Or should I change something?

Condor
5 Aug 2009, 10:48 PM
The store won't be destroyed when you destroy the grid (unless you set it to autoDestroy:true).

The column model however will be destroyed, so you have to create it before you recreate the grid.

Margusja
5 Aug 2009, 11:07 PM
Tnx. Now I can destroy my grid.

moved columnModel into list.js:

hostsColumnModel = new Ext.grid.ColumnModel(
[{header: '#',readOnly: true, dataIndex: 'id',width: 50,hidden: true},
{header: 'Host', dataIndex: 'host', width: 150, sortable: true},
{header: 'Profiil', dataIndex: 'profile', width: 150, sortable: true, editor: profile_combo, renderer: Ext.util.Format.comboRenderer(profile_combo)},
{header: 'Aktiivne', dataIndex: 'active', width: 50, editor: activeField, sortable: true, renderer: formatBoolean},
{header: 'Teated', dataIndex: 'messages', width: 50, editor: messagesField, sortable: true, renderer : formatBoolean},
{header: 'Ping', dataIndex: 'ping', width: 50, editor: pingField, sortable: true, renderer : formatBoolean},
{header: "Load", dataIndex: 'load', width: 150, sortable: true, editor: load_combo},
{header: 'Proc', dataIndex: 'proc', width: 150, sortable: true, editor: proc_combo},
{header: 'Disk', dataIndex: 'disk',width: 150, sortable: true, editor: disk_combo}
]
);

listGrid = new Ext.grid.EditorGridPanel({
id: 'listGrid',
store: listStore,
colModel: hostsColumnModel,
view: grouping? grouping_view : false,
viewConfig: {
forceFit: true,
getRowClass : row_config
},
tbar: new Ext.Toolbar({
xtype: 'splitbutton',
items: [
{text: 'Vaade', xtype: 'splitbutton',
menu: [
{text: 'List', handler: switch_to_list_view},
{text: 'Grupeeritud vaade', handler: switch_to_grouped_view}
]}
]
}),
renderTo: 'list',
width: 1000,
height: 500,
frame: true,
clicksToEdit: '1'
});
listGrid.on('afteredit', saveHost);

Nice.

But how to debug my second problem - field is locked. If I change field named "active" and switch to grouped grid I can't edit "active" field. Or any fields that I edited in previous grid.

Condor
5 Aug 2009, 11:33 PM
Editors are also destroyed when the destroy column model is destroyed.

Also move the creation of the editors inside list.js.

Margusja
5 Aug 2009, 11:42 PM
It works! great thanks!