PDA

View Full Version : How to hide column in TreeGrid?



krish.sadasivam
11 Oct 2011, 8:05 AM
Hi,

I am a beginner to learn Ext JS. I am using Ext JS 4. How to hide a column/columns in tree grid on selection of another grid's row selection? Below my code:

var tree = Ext.create('Ext.tree.Panel', {
//title: 'Quote Tree Grid',
collapsible: false,
border: false,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
defaults: {autoScroll: true, autoHeight: true, forceLayout: true},
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Quote',
width: 200,
sortable: false,
dataIndex: 'quotetitle'
},{
//we must use the templateheader component so we can use a custom tpl
//xtype: 'templatecolumn',
text: 'Quote 1',
width: 100,
sortable: false,
dataIndex: 'quote1',
align: 'center'

},{
//we must use the templateheader component so we can use a custom tpl
//xtype: 'templatecolumn',
text: 'Quote 2',
width: 100,
sortable: false,
dataIndex: 'quote2',
align: 'center'

},{
//we must use the templateheader component so we can use a custom tpl
//xtype: 'templatecolumn',
text: 'Quote 3',
width: 100,
sortable: false,
dataIndex: 'quote3',
align: 'center'

}]
});

twaindev
11 Oct 2011, 3:10 PM
Hope this helps:


Ext.onReady(function() {

var buildGrid = function() {
return Ext.create('Ext.grid.Panel', {
title: 'Quotes',
margin: '0 0 20 0',
columns: {
defaults: {
flex: 1
},
items: [
{
text: 'Quotes',
dataIndex: 'name'
}
]
},
listeners: {
itemclick: function(view, record, item, index, e) {
var tree = view.up('panel').up('panel').down('treepanel');
for (var i = 1; i <= 3; i += 1) {
tree.columns[i].setVisible(index == i || index == 0);
}
}
}
});
};

var buildStore = function() {
return Ext.create('Ext.data.TreeStore', {
fields: ['text', 'quote1', 'quote2', 'quote3'],
root: {
expanded: true,
children: [
{
text: 'Option 1',
expanded: true,
children: [
{
text: 'Option 1A',
leaf: true,
quote1: '100',
quote2: '200',
quote3: '300'
},
{
text: 'Option 1B',
leaf: true,
quote1: '300',
quote2: '500',
quote3: '700'
}
]
},
{
text: 'Option 2',
expanded: true,
children: [
{
text: 'Option 2A',
leaf: true,
quote1: '111',
quote2: '222',
quote3: '333'
},
{
text: 'Option 2B',
leaf: true,
quote1: '333',
quote2: '555',
quote3: '777'
}
]
}
]
}
});
};

var buildTree = function() {
return Ext.create('Ext.tree.Panel', {
id: 'tree',
title: 'Configurations',
height: 300,
rootVisible: false,
useArrows: true,
store: buildStore(),
columns: {
defaults: {
flex: 1,
align: 'center'
},
items: [
{
text: 'Description',
xtype: 'treecolumn',
dataIndex: 'text',
align: 'left',
flex: 3
},
{
text: 'Quote 1',
dataIndex: 'quote1'
},
{
text: 'Quote 2',
dataIndex: 'quote2'
},
{
text: 'Quote 3',
dataIndex: 'quote3'
}
]
}
});
};

Ext.create('Ext.panel.Panel', {
title: 'Demo',
width: 640,
bodyPadding: '10',
items: [buildGrid(), buildTree()],
renderTo: Ext.getBody()
}).center().down('gridpanel').getStore().loadData([
{ name: 'Compare' },
{ name: 'Quote 1' },
{ name: 'Quote 2' },
{ name: 'Quote 3' }
]);

});

krish.sadasivam
12 Oct 2011, 6:57 AM
Thanks twaindev. one more doubt:

how can i get combined rowIndex value on a grid. below my code:

var data = gridquote.getSelectionModel().getSelection();

for (var i=0; i< data.length; i++) {
alert(data[i].id);

twaindev
12 Oct 2011, 7:38 AM
If you mean that you want to select multiple records in the upper grid, than something like this:


Ext.onReady(function() {

var buildGrid = function() {
return Ext.create('Ext.grid.Panel', {
title: 'Quotes',
margin: '0 0 20 0',
selModel: {
selectionMode: 'SIMPLE'
},
columns: {
defaults: {
flex: 1
},
items: [
{
text: 'Quotes',
dataIndex: 'name'
}
]
},
listeners: {
itemclick: function(view) {
var tree = view.up('panel').up('panel').down('treepanel'),
sm = view.getSelectionModel();

for (var i = 1; i <= 3; i += 1) {
tree.columns[i].setVisible(sm.isSelected(i-1));
}
}
}
});
};

var buildStore = function() {
return Ext.create('Ext.data.TreeStore', {
fields: ['text', 'quote1', 'quote2', 'quote3'],
root: {
expanded: true,
children: [
{
text: 'Option 1',
expanded: true,
children: [
{
text: 'Option 1A',
leaf: true,
quote1: '100',
quote2: '200',
quote3: '300'
},
{
text: 'Option 1B',
leaf: true,
quote1: '300',
quote2: '500',
quote3: '700'
}
]
},
{
text: 'Option 2',
expanded: true,
children: [
{
text: 'Option 2A',
leaf: true,
quote1: '111',
quote2: '222',
quote3: '333'
},
{
text: 'Option 2B',
leaf: true,
quote1: '333',
quote2: '555',
quote3: '777'
}
]
}
]
}
});
};

var buildTree = function() {
return Ext.create('Ext.tree.Panel', {
id: 'tree',
title: 'Configurations',
height: 300,
rootVisible: false,
useArrows: true,
store: buildStore(),
columns: {
defaults: {
flex: 1,
align: 'center'
},
items: [
{
text: 'Description',
xtype: 'treecolumn',
dataIndex: 'text',
align: 'left',
flex: 3
},
{
text: 'Quote 1',
dataIndex: 'quote1'
},
{
text: 'Quote 2',
dataIndex: 'quote2'
},
{
text: 'Quote 3',
dataIndex: 'quote3'
}
]
}
});
};

Ext.create('Ext.panel.Panel', {
title: 'Demo',
width: 640,
bodyPadding: '10',
items: [buildGrid(), buildTree()],
renderTo: Ext.getBody()
}).center().down('gridpanel').getStore().loadData([
{ name: 'Quote 1' },
{ name: 'Quote 2' },
{ name: 'Quote 3' }
]);

});

krish.sadasivam
12 Oct 2011, 8:13 AM
Got some ideas from you. Thanks very much TD