PDA

View Full Version : RowExpander on ReconfigureGrid dont work



betasux
25 Mar 2014, 9:53 AM
How i get the RowExpander Plugin work properly on reconfiguregrid.

my Autogrid Code:

Ext.define('Ext.mo.autogrid3', { extend: 'Ext.grid.Panel'


,requires: [
'Ext.selection.*'
,'Ext.grid.*'
,'Ext.data.*'
,'Ext.util.*'
]
,xtype: 'autogrid'


,title: 'Edit Plants'
,frame: true


,initComponent: function() {


var me = this;


this.rowExpander = new Ext.grid.plugin.RowExpander({
ptype: 'rowexpander'
,expandOnDblClick: false
,rowBodyTpl : new Ext.XTemplate('<p>abc</p> ')
});




Ext.define('meModel', {
extend: 'Ext.data.Model'
,fields: []
});


Ext.apply(this, {
width: 680
,height: 350
,simpleSelect: false
,needsRowHeightSync: true
,plugins: [
this.rowExpander
]
,columns: []
,store: new Ext.data.Store({
autoDestroy: true
,model: 'meModel'
,proxy: {
type: 'ajax'
,url: 'autogrid3.json'
,reader: {
type: 'json'
,root: 'rows'
,successProperty: 'success'
,messageProperty: 'msg'
,totalProperty: 'totalCount'
}
}
,listeners: {
'metachange': function(store, meta) {
Ext.suspendLayouts();
me.reconfigure(store, meta.fields);
Ext.resumeLayouts();
}
}
})
,selModel: {
selType: 'rowmodel' // cellmodel
}
});


this.callParent();


}
});

code in html:


Ext.onReady(function() { var ag = new Ext.mo.autogrid3({
id:'artgrid'
,title: 'Autogrid'
,className: 'artikel'
,pageEntries: 25
,renderTo: 'autogrid-layer'
,paging: true
});
ag.store.load({ params: { meta: true, start: 0, limit: ag.pageEntries } });
});

Result:
48450

Live Preview: http://betasux.de/extjs4/autogrid3.html

Gary Schlosberg
27 Mar 2014, 11:02 AM
I checked out your example but couldn't discern exactly what the desired behavior would be. Can you offer more details about what you are trying to achieve?

betasux
27 Mar 2014, 12:44 PM
Hi Gary, if i override the getHeaderConfig() function from Plugin then looks good.

example: http://betasux.de/extjs4/autogrid4.html

But how i can get this behavior withot override?

in this example get i Error: Uncaught TypeError: Cannot call method 'removeCls' of null
(nextBd = row.down(me.rowBodyTrSelector, true) is null because rowBodyTrSelector isnt present :( )


Ext.override(Ext.grid.plugin.RowExpander, {
getHeaderConfig: function() {
var me = this;


return {
width: 24,
lockable: false,
someable: false,
resizable: false,
draggable: false,
hideable: false,
menuDisabled: true,
tdCls: Ext.baseCSSPrefix + 'grid-cell-special',
innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-row-expander',


renderer: function(value, metadata) {
// Only has to span 2 rows if it is not in a lockable grid.
if (!me.grid.ownerLockable) {
metadata.tdAttr += ' rowspan="1"';
}
return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander"></div>';
},
processEvent: function(type, view, cell, rowIndex, cellIndex, e, record) {
if (type == "mousedown" && e.getTarget('.x-grid-row-expander')) {
me.toggleRow(rowIndex, record);
return me.selectRowOnExpand;
}
}
};
}
});


Ext.onReady(function() {
var ag = new Ext.mo.autogrid3({
id:'artgrid'
,title: 'Autogrid'
,className: 'artikel'
,pageEntries: 25
,renderTo: 'autogrid-layer'
,paging: true
});
ag.store.load({ params: { meta: true, start: 0, limit: ag.pageEntries } });
});

betasux
27 Mar 2014, 1:47 PM
Ok, i figured out that my example the expander tr missing.


<tr class="x-grid-rowbody-tr x-grid-row-body-hidden">...</tr>

But i dont know why :(

betasux
28 Mar 2014, 6:29 AM
I can reproduce the behavior with the Basic Meta Configuration (http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/data/meta-config-basic.html)

My Code in meta-config-basic.html


Ext.define('Ext.ag', {
extend: 'Ext.grid.Panel'
,requires: [
'Ext.grid.*'
,'Ext.data.*'
,'Ext.util.*'
,'Ext.form.field.*'
]
,initComponent: function() {
var me = this;


Ext.define('MetaModel', {
extend: 'Ext.data.Model'
});


var metaStore = Ext.create('Ext.data.Store', {
model: 'MetaModel'
,autoLoad: true
,proxy: {
type: 'ajax'
,url: 'meta-config-basic.php'
,reader: {
type: 'json'
,root: 'data'
}
}
,listeners: {
'metachange': function(store, meta) {
me.reconfigure(store, meta.columns);
}
}
});


this.rowExpander = new Ext.grid.plugin.RowExpander({
expandOnDblClick: false
,rowBodyTpl : '<p>abc</p> '
});


Ext.apply(this, {
width: 680
,height: 350
,store: metaStore
,columns: []
,plugins: [this.rowExpander]
});


this.callParent();
}
});


Ext.Loader.setConfig({enabled: true});


Ext.onReady(function(){
var grid = Ext.create('Ext.ag', {
width: 800,
height: 300,
title: 'Meta Grid',
renderTo: 'grid-ct',
tbar: [{
text: 'Reload Metadata',
handler: function() {
grid.store.load();
}
}]
});
});