1. #1
    Sencha User krish.sadasivam's Avatar
    Join Date
    Oct 2011
    Location
    Jersey City, NJ
    Posts
    5
    Vote Rating
    0
    krish.sadasivam is on a distinguished road

      0  

    Question How to hide column in TreeGrid?

    How to hide column in TreeGrid?


    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'

    }]
    });

  2. #2
    Ext JS Premium Member twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    223
    Vote Rating
    3
    twaindev is on a distinguished road

      1  

    Default


    Hope this helps:

    Code:
    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' }
        ]);
    
    });

  3. #3
    Sencha User krish.sadasivam's Avatar
    Join Date
    Oct 2011
    Location
    Jersey City, NJ
    Posts
    5
    Vote Rating
    0
    krish.sadasivam is on a distinguished road

      0  

    Question


    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);

  4. #4
    Ext JS Premium Member twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    223
    Vote Rating
    3
    twaindev is on a distinguished road

      0  

    Default


    If you mean that you want to select multiple records in the upper grid, than something like this:

    Code:
    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' }
        ]);
    
    });

  5. #5
    Sencha User krish.sadasivam's Avatar
    Join Date
    Oct 2011
    Location
    Jersey City, NJ
    Posts
    5
    Vote Rating
    0
    krish.sadasivam is on a distinguished road

      0  

    Red face


    Got some ideas from you. Thanks very much TD

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar