PDA

View Full Version : How to add Ext.grid.CheckColumn to Ext.grid.EditorGridPanel dynamically?



Ex_Soft
26 Apr 2010, 1:30 AM
Ext.onReady(function() {
Ext.QuickTips.init();

var
store = new Ext.data.JsonStore({
url: "DataSource.aspx",
root: "rows",
idProperty: "Id",
successProperty: "success",
totalProperty: "count",
fields: [
{ name: "Id", type: "int" },
"Name",
{ name: "Salary", type: "float" },
{ name: "BirthDate", type: "date", dateFormat: "c" },
{ name: "Checked", type: "boolean" }
],
writer: new Ext.data.JsonWriter(),
autoSave: false,
batch: true,
listeners: {
load: function(s, r, o) { OnLoad(grid, checkColumn, store, cm) }
}
}),
combo = new Ext.form.ComboBox({
id: "perpage",
name: 'perpage',
width: 40,
store: new Ext.data.ArrayStore({
fields: ['id'],
data: [
['2'],
['4'],
['6']
]
}),
mode: 'local',
value: '2',
listWidth: 40,
triggerAction: 'all',
displayField: 'id',
valueField: 'id',
editable: false,
forceSelection: true
}),
bbar = new Ext.PagingToolbar({
pageSize: 2,
store: store,
displayInfo: true,
items: [
"-",
"Per page: ",
combo
],
displayMsg: 'Displaying items {0} - {1} of {2}',
emptyMsg: "No items found"
}),
NameEdit = new Ext.form.TextField(),
SalaryEdit = new Ext.form.NumberField(),
BirthDateEdit = new Ext.form.DateField({
format: "d/m/Y"
}),
checkColumn = new Ext.grid.CheckColumn({
header: "Checked",
dataIndex: "Checked",
width: 50
}),
cm = new Ext.grid.ColumnModel({
columns: [
{ dataIndex: "Id", header: "ID", width: 30, sortable: true, hidden: true },
{ id: "ColName", dataIndex: "Name", header: "Name", editor: NameEdit, width: 180, sortable: true },
{ dataIndex: "Salary", header: "Salary", editor: SalaryEdit, width: 75, sortable: true, align: "center" },
{ dataIndex: "BirthDate", header: "BirthDate", renderer: Ext.util.Format.dateRenderer("d/m/Y"), editor: BirthDateEdit, width: 100, sortable: true, align: "center" },
checkColumn
//{ dataIndex: "Checked", header: "Checked", xtype: "booleancolumn", width: 50, sortable: true, align: "center" }
]
}),
grid = new Ext.grid.EditorGridPanel({
id: "TestGrid",
title: "TestGrid",
plugins: [],
//plugins: checkColumn,
clickstoEdit: 1,
store: store,
//cm: cm,
//autoExpandColumn: "ColName",
columns: [],
width: 600,
height: 200,
tbar: {
items: [
{ text: 'Save Changes',
handler: function() {
store.save();
}
}
]
},
bbar: bbar
}),
viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
xtype: 'panel'
}, {
region: 'center',
xtype: 'panel',
items: grid
}]
});

combo.on('select', function(combo, record) {
bbar.pageSize = parseInt(record.get('id'), 10);
bbar.doLoad(bbar.cursor);
}, this);

store.load({ params: { start: 0, limit: parseInt(Ext.getCmp("perpage").getValue(), 10) } });
});

function OnLoad(grid, checkColumn, store, cm) {
//grid.plugins = checkColumn;
grid.plugins.push(checkColumn);
checkColumn.init(grid);
grid.reconfigure(store, cm);
}
CheckColumn is added, but it isn't editable.

Ex_Soft
26 Apr 2010, 10:15 AM
Is this impossible?

Keylan
26 Apr 2010, 11:37 AM
Im confused. I dont see "Ext.grid.CheckColumn" anywhere in the docs.

Ex_Soft
26 Apr 2010, 10:10 PM
I dont see "Ext.grid.CheckColumn" anywhere in the docs
This is plugin (Editor Grid Example) (http://www.extjs.com/deploy/dev/examples/grid/edit-grid.html)

Ex_Soft
27 Apr 2010, 10:42 PM
Was that never required for anybody?

KillroyWasHere
5 May 2010, 4:19 AM
/*in the column model of the store*/
columns: [
this.xGridSelectionColumn = new Ext.grid.CheckColumn({
dataIndex: 'yourboolfield',
header: 'Whatever',
width: 40,
editable: true
}),
actions
]
/*in the gridpanel items add it to the plugins*/
plugins: [actions,this.xGridSelectionColumn ]
hope this helps, cheers

yumusakg
18 May 2010, 3:31 AM
/*in the column model of the store*/
columns: [
this.xGridSelectionColumn = new Ext.grid.CheckColumn({
dataIndex: 'yourboolfield',
header: 'Whatever',
width: 40,
editable: true
}),
actions
]
/*in the gridpanel items add it to the plugins*/
plugins: [actions,this.xGridSelectionColumn ]
hope this helps, cheers

that was what i was looking for. i wanna add a small point.. you have to define column model above the plugin definition.

Ex_Soft
31 May 2010, 12:22 AM
I want to add Ext.grid.CheckColumn to Ext.grid.EditorGridPanel dynamically. I don't know column's type, name etc. I receive metadata, fill column model and reconfigure grid:


Ext.onReady(function() {
Ext.QuickTips.init();

var
store = new Ext.data.JsonStore({
url: "DataSource.aspx",
root: "metadata",
totalProperty: "count",
successProperty: "success",
baseParams: { first: true },
writer: new Ext.data.JsonWriter(),
autoSave: false,
batch: true,
listeners: {
metachange: function(store, meta) { OnMetachange(store, meta, EditorGridPanelColumnModel) }
}
}),
grid = new Ext.grid.EditorGridPanel({
id: "TestGrid",
title: "TestGrid",
clickstoEdit: 1,
store: store,
columns: [],
width: 600,
height: 500,
tbar: {
items: [
{ text: 'Save Changes', handler: function() { store.save(); } }
]
}
}),
viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
xtype: 'panel'
}, {
region: 'center',
xtype: 'panel',
items: grid
}]
}),
EditorGridPanelColumnModel = new Ext.util.MixedCollection();

store.load();
});

function OnMetachange(store, meta, cmd) {
delete store.baseParams.first;

Ext.Ajax.request({
url: "GridColumnModelHandler.aspx",
success: function(response, opts){
var
grid;

if(grid=Ext.getCmp("TestGrid"))
{
var
cmA=Ext.decode(response.responseText),
autoExpandColumn=null,
cm,
plugins=[];

for(var i=cmA.length-1; i>=0; --i)
{
if (cmA[i].id && cmA[i].id.indexOf("AutoExpand") != -1)
autoExpandColumn = cmA[i].id;

switch (cmA[i].type)
{
case "date" :
{
cmA[i].renderer = Ext.util.Format.dateRenderer("d/m/Y");
CheckEdit(cmA[i], new Ext.form.DateField({ format: "d/m/Y" }));
break;
}
case "float" :
{
CheckEdit(cmA[i], new Ext.form.NumberField());
break;
}
case "string" :
{
CheckEdit(cmA[i], new Ext.form.TextField());
break;
}
case "boolean":
{
cmA[i]=new Ext.grid.CheckColumn({
header: cmA[i].header,
dataIndex: cmA[i].dataIndex,
width: cmA[i].width
});
plugins.push(cmA[i]);
break;
}
}
};

cm=new Ext.grid.ColumnModel(cmA);
if(autoExpandColumn)
grid.autoExpandColumn = autoExpandColumn;
if (plugins.length > 0)
{
grid.plugins = plugins;

for (var i = plugins.length - 1; i >= 0; --i)
plugins[i].init(grid);
}
else if(grid.plugins)
delete grid.plugins;
grid.reconfigure(store,cm);
}
},
failure: function(response, opts){
alert("error!!!");
}
});
}

function CheckEdit(item, editor)
{
if(item.id && item.id.indexOf("Edit")!=-1)
item.editor=editor;
}

Ex_Soft
18 Jun 2010, 6:19 AM
Is there any acceptable solution of this problem?

Ex_Soft
14 Sep 2010, 11:11 AM
grid.plugins=grid.initPlugin(checkColumn); // CheckColumn.init() is called.
CheckColumn.js (http://dev.sencha.com/deploy/dev/examples/ux/CheckColumn.js):


init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
}

But after that onMouseDown isn't called. Why?

Ex_Soft
15 Sep 2010, 12:10 AM
onMouseDown isn't called. Why?
Render isn't called because grid has been rendered. It should be:


...
grid.plugins=grid.initPlugin(checkColumn);
grid.getView().mainBody.on('mousedown', checkColumn.onMouseDown, checkColumn);
...