New approach to a tree-grid component

[teqneers]

Glad you made it work...

But by the way: nothing requires you to have the JSON data format you described above. It all depends on the reader extracting the data from the JSON response. Your response format must match the format the reader requires - that's the only constraint. But it's absolutely OK to modify the reader in your case (if the data is used somewhere else as well).

[amanind]

I want to call "expandAll" and "collapseAll" methods
How to do that?

[teqneers]

grid.getView().expandAll();
grid.getView().collapseAll(); 

[amanind]

I want to call it outside the class

if(rec.data.id == 99999){
        return '<alert href="#" onclick="Ext.ux.tree.GridView().expandAll()">'+rec.data.name+'</a>';
    } else {
        return rec.data.name;    
    } 

[teqneers]

That doesn't work. You have to call the methods via the instance of your grid. The easiest way would be to assign an id-property in your grid and use Ext.getCmp() to retrieve the instance.

[amanind]

Thanks Stepan for your help, it works with Ext.getCmp

[wdeqing]

Hi,

It is very nice that I am able to add an editor such as editor:{ xtype: 'datefield' }. But after the date change, the icon for that row is gone and the text is aligned to the left end. Do you see this problem? Can you advice how to fix it?

Thank you in advance,

Deqing

[wdeqing]

I attached my testing code below. You can see the problem by either change Cost value or eDate value.

var mytree = new Ext.grid.EditorGridPanel({
renderTo: Ext.getBody(),
autoHeight: true,
width: 400,
columnLines: true,
autoExpandColumn: 'col-name',
view: new Ext.ux.tree.GridView({
useArrows: true,
staticTree: false
}),
store: {
xtype: 'store',
autoDestroy: true,
reader: new Ext.ux.tree.TreeReader({
fields: [{
name: 'id',
mapping: 'id',
type: 'int'
}, {
name: 'name',
mapping: 'name'
}, {
name: 'edate',
mapping: 'edate'
}, {
name: 'cost',
mapping: 'cost',
type: 'float'
}]
}),
data: [{
id: 1,
name: 'Company A',
cost: 1000000.00,
edate: '2011-03-30',
leaf: false,
expanded: true,
children: [{
id: 11,
name: 'Department AA',
cost: 800000.00,
edate: '2011-03-30',
leaf: false,
expanded: true,
children: [{
id: 111,
name: 'Thing AAA',
cost: 300000.00,
edate: '2011-03-30',
leaf: true
}, {
id: 112,
name: 'Thing AAB',
cost: 500000.00,
edate: null,
leaf: true
}]
}, {
id: 12,
name: 'Department AB',
cost: 200000.00,
edate: '2011-03-30',
leaf: false,
expanded: true,
children: [{
id: 121,
name: 'Thing ABA',
cost: 50000.00,
edate: '2011-03-30',
leaf: true
}, {
id: 122,
name: 'Thing ABB',
cost: 150000.00,
edate: null,
leaf: true
}]
}]
}, {
id: 2,
name: 'Company B',
cost: 200000.00,
edate: '2011-03-31',
leaf: false,
expanded: true,
children: [{
id: 21,
name: 'Department BA',
cost: 100000.00,
edate: '2011-03-30',
leaf: false,
expanded: true,
children: [{
id: 211,
name: 'Thing BAA',
cost: 50000.00,
edate: '2011-03-30',
leaf: true
}, {
id: 212,
name: 'Thing BAB',
cost: 50000.00,
edate: '2011-03-30',
leaf: true
}]
}, {
id: 22,
name: 'Department BB',
cost: 100000.00,
edate: '2011-03-30',
leaf: false,
expanded: true,
children: [{
id: 221,
name: 'Thing BBA',
cost: 90000.00,
edate: '2011-03-30',
leaf: true
}, {
id: 222,
name: 'Thing BBB',
cost: 10000.00,
edate: '2011-03-30',
leaf: true
}]
}]
}]
},
columns: [{
header: 'Id',
dataIndex: 'id',
width: 30
}, {
header: 'Name',
id: 'col-name',
dataIndex: 'name',
treeCol: true
}, {
header: 'eDate',
dataIndex: 'edate',
width: 80,
editor: {
xtype: 'datefield'
}
}, {
header: 'Cost',
dataIndex: 'cost',
width: 80,
editor: {
xtype: 'textfield'
}
}]
});

[wdeqing]

I got this problem when I use extjs 3.3.1. But it is ok now when I switched to extjs 3.2.1.

[teqneers]

There have been some major internal changes on how a grid view would render its items. The tree-grid-view presented in this thread is incompatible with this new rendering and won't work correctly with ExtJS 3.3.1 and up. We do have a working version for ExtJS 3.3.1 but it still needs some testing and can not be released currently.