Aug 25, 2015, 3:20 PM
[CLOSED] Extjs How to Create dynamic group columns ?
Example
mycode
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,
columns: [{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
}, {
text: 'Stock Price',
columns: [{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
}, {
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
}, {
text : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
}]
}, {
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
height: 350,
width: 600,
title: 'Grouped Header Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
mycode
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
Ext.onReady(function() {
var store = App.Store1;
store.add({ id: 1, relation: 0, dataCod: 'col1', dataText: 'COL1' });
store.add({ id: 2, relation: 0, dataCod: 'col2', dataText: 'COL2' });
store.add({ id: 3, relation: 2, dataCod: 'col3', dataText: 'COL3' });
store.add({ id: 4, relation: 2, dataCod: 'col4', dataText: 'COL4' });
});
function fncNewColumn(record) {
return Ext.create('Ext.grid.column.Column', { dataIndex: record.get('dataCod'), text: record.get('dataText'), flex: 1, editor: { xtype: 'textfield', allowBlank: false } } );
}
function fncAddAndCheckChildColumn(column, store, sourceRecord) {
var dwFilter = store.query('relation', sourceRecord.get('id'));
Ext.each(dwFilter.items, function (donRecord) {
var newColumn = column.add(fncNewColumn(donRecord));
//add and check child columns
fncAddAndCheckChildColumn(newColumn, store, donRecord);
console.log(sourceRecord.get('id'), sourceRecord.get('relation'), sourceRecord.get('dataCod'), sourceRecord.get('dataText'), donRecord.get('id'), donRecord.get('relation'), donRecord.get('dataCod'), donRecord.get('dataText'));
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<ext:Store runat="server" ID="Store1" AutoLoad="false">
<Model>
<ext:Model runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id" Type="Int" />
<ext:ModelField Name="relation" Type="Int" />
<ext:ModelField Name="dataCod" Type="String" />
<ext:ModelField Name="dataText" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel runat="server" ID="GridPanel1" />
<ext:Button runat="server" Text="Create">
<Listeners>
<Click Handler="
var com = App.GridPanel1;
var store = App.Store1;
Ext.each(com.headerCt.getGridColumns(), function (donCol) {
com.headerCt.remove(donCol);
});
//add root columns
var dwFilterRoot = store.query('relation', 0);
Ext.each(dwFilterRoot.items, function (donRecord) {
var newColumn = com.headerCt.insert(com.columns.length-1, fncNewColumn(donRecord));
//add and check child columns
fncAddAndCheckChildColumn(newColumn, store, donRecord);
console.log('root Columns', donRecord.get('id'), donRecord.get('relation'), donRecord.get('dataCod'), donRecord.get('dataText'));
});
com.getView().refresh();
com.reconfigure();
" />
</Listeners>
</ext:Button>
</form>
</body>
</html>
Last edited by Daniil; Aug 31, 2015 at 7:11 AM.
Reason: [CLOSED]