PDA

View Full Version : RowExpander and dynamic store - how?



Denin2004
9 Mar 2012, 2:15 PM
Hello!!
I try create dynamically configurable grid.
when i call "this.reconfigure(store,this.columns)" - column of "RowExpand" - disappears...
This is my code:

Ext.define('UsersApp.lib.myGrid' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
title : 'All Users',
objectName: '',
dataSet: '',
columns: [],
configLoaded: false,
loadConfig: loadConfig,
getConfig: getConfig,
initComponent: initMyGrid
});

function initMyGrid()
{
this.plugins = [{
ptype: 'rowexpander',
rowBodyTpl : [
'<p><b>Company:</b>sadf</p><br>',
'<p><b>Summary:</b>fdg</p>'
]
}];
this.callParent();
}

function loadConfig()
{
Ext.Ajax.request({url : urlSite+urlPHP+'getContentPage.php?siteState='+this.objectName+'-Config'+this.dataSet+'&json=1',
callback:this.getConfig,
scope:this});
}

function getConfig(options, success, response)
{
if(success)
{
/* set config grid... model... columns... store...*/
store.on('load',function(){this.reconfigure(store,this.columns);}, this);
store.autoLoad = true;
store.load();
this.configLoaded = true;
}
else alert('Error!!!');
}

mitchellsimoens
9 Mar 2012, 2:19 PM
What Ext JS 4 version?

Denin2004
9 Mar 2012, 2:26 PM
Sorry... I don't know... :) I think - last version (I work with this framework 3 weeks)...
How I can look my version?

Denin2004
9 Mar 2012, 3:25 PM
OK.

Ext version tested:

Ext 4.0.7


Browser versions tested against:

Forefox 10.2 (Windows)


Description:

Ext.grid.Panel - RowExpander - column disappears after reconfigure store.


Ext.define('UsersApp.lib.myGrid' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
title : 'All Users',
objectName: '',
dataSet: '',
columns: [],
configLoaded: false,
loadConfig: loadConfig,
getConfig: getConfig,
initComponent: initMyGrid
});

function initMyGrid()
{
// this.plugins = [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 2})];
this.plugins = [{
ptype: 'rowexpander',
rowBodyTpl : [
'<p><b>Company:</b>sadf</p><br>',
'<p><b>Summary:</b>fdg</p>'
]
}];
this.callParent();
}

function loadConfig()
{
Ext.Ajax.request({url : urlSite+urlPHP+'getContentPage.php?siteState='+this.objectName+'-Config'+this.dataSet+'&json=1',
callback:this.getConfig,
scope:this});
}

function getConfig(options, success, response)
{
if(success)
{
var res = Ext.JSON.decode(response.responseText);
if(typeof(extJSObjects[res.dataSet]) == 'undefined')
{
Ext.define(res.dataSet,res.model);
extJSObjects[res.dataSet] = true;
}
this.columns = res.grid.columns;
res.store.proxy.api = {};
var toolbar = {xtype: 'toolbar',items:[]};
res.store.proxy.api.read = urlSite+urlPHP+
'getContentPage.php?siteState='+this.objectName+'-Read'+this.dataSet+'&json=1';
if(res.editFlags.update)
{
res.store.proxy.api.update = urlSite+urlPHP+
'getContentPage.php?siteState='+this.objectName+'-Update'+this.dataSet+'&json=1';
}
if(res.editFlags.insert)
{
res.store.proxy.api.create = urlSite+urlPHP+
'getContentPage.php?siteState='+this.objectName+'-Insert'+this.dataSet+'&json=1';
toolbar.items[0] ={text: 'Create',iconCls: 'icon-add',handler :insertData,scope:this};
}
if(res.editFlags.del)
{
res.store.proxy.api.destroy = urlSite+urlPHP+
'getContentPage.php?siteState='+this.objectName+'-Delete'+this.dataSet+'&json=1';
toolbar.items[toolbar.items.length] ={text: 'Delete',iconCls: 'icon-add',handler:confirmDeleteRecord,scope:this};
}
if(toolbar.items.length != 0) this.addDocked(toolbar);
var store = Ext.create('Ext.data.Store',res.store);
store.on('load',function(){this.reconfigure(store,this.columns);}, this);
store.autoLoad = true;
store.load();
this.configLoaded = true;
}
else alert('Error!!!');
}

function confirmDeleteRecord(grid)
{
this.selection = this.getView().getSelectionModel().getSelection()[0];
if(this.selection)
Ext.MessageBox.confirm('Confirm', 'Delete record?',deleteRecord,this)
else
Ext.MessageBox.alert('Status', 'No selected!!!');
}

function deleteRecord()
{
this.getStore().remove(this.selection);
}

function insertData()
{
this.getStore().insert(0,new Ext.create(this.dataSet));
this.plugins[0].startEditByPosition({row: 0, column: 1})
}

JSON received by ajax request:

{
"dataSet": "Params",
"editFlags":{"update":true,"del":true,"insert":true},
"model":{
"extend": "Ext.data.Model",
"idProperty": "fld6",
"fields": [{"name":"fld6","key":"cd6"},{"name":"fld7"}]},
"store":{"model":"Params",
"autoLoad": false,
"autoDestroy": true,
"autoSync": true,
"proxy":{"type":"ajax",
"reader":{"type":"json",
"root":"rows",
"idProperty": "fld6"},
"writer":{"type":"json",
"root":"rows",
"writeAllFields": false}}},
"grid":{"columns":[{"header":"id",
"dataIndex":"fld6"},
{"header":"????????????",
"dataIndex":"fld7",
"width":300,
"editor": {
"xtype": "textfield",
"allowBlank": false}}]}
}