Results 1 to 9 of 9

Thread: Extjs 4 ext.grid.panel hide column only hides Header

  1. #1
    Sencha User
    Join Date
    Aug 2014
    Posts
    30
    Answers
    1

    Default Answered: Extjs 4 ext.grid.panel hide column only hides Header

    Hello,

    I have a problem with my grid panel, When I choose to hide a column, only hides the column header and footer but the body values for that column still shows, to hide them I have to "refresh" the grid, one way of doing is Sorting It,

    The Show Column event works fine, its just the Hide that has that problem.
    Someone knows about that issue?

    thanks a lot
    Bruno

  2. Well, I found that the problem is with the Ext.ux.grid.feature.MultiGroupingSummary,

    I removed that and worked. I really need that plugin, it the only one that I found that has multi-grouping.

    Well, I will try to workaround that..

    Big Thanks for the help

  3. #2
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    See if this will help:

    laste code in fiddle:
    https://fiddle.sencha.com/#home

    Code:
    Ext.onReady(function() {
    
        var store = Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: [
                'name', 'email', 'change'
            ],
            data: {
                'items': [{
                    'name': 'Lisa',
                    "email": "[email protected]",
                    "change": 100
                }, {
                    'name': 'Bart',
                    "email": "[email protected]",
                    "change": -20
                }, {
                    'name': 'Homer',
                    "email": "[email protected]",
                    "change": 23
                }, {
                    'name': 'Marge',
                    "email": "[email protected]",
                    "change": -11
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
    
        var grid = Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: store,
            columns: [{
                header: 'Name',
                dataIndex: 'name'
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                header: 'Change',
                dataIndex: 'change'
            }],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
        
        var colOne = grid.getColumnManager().getFirst();
        colOne.setVisible(false); // hide();    
    
    });
    Last edited by scottmartin; 28 Oct 2014 at 12:31 PM. Reason: Updated to array store

  4. #3
    Sencha User
    Join Date
    Aug 2014
    Posts
    30
    Answers
    1

    Default

    Hello scottmartin

    Yes, your code works fine, as sencha demos, but on my page does not. I am using with asp.net

    Code:
    Ext.onReady(function () {
    
    var store = new Ext.data.JsonStore({
                    autoLoad: false,
                    proxy: new Ext.data.HttpProxy({
                        url: '/Compromissadas/CarregarOperacoesCompromissadas',
                        method: 'POST',
                        headers: { 'Content-type': 'application/json' },
                        reader: {
                            type: 'json',
                            root: 'compromissadas'
                        }
                    }),
                    sorters: { property: 'NomeCliente', direction: 'ASC' },
                    pageSize: 10,
                    totalProperty: 'total',
                    fields: [
                        { name: 'NomeCliente', type: 'string' },
                        { name: 'GrupoEconomico', type: 'string' },
                        { name: 'DataRetorno', type: 'date', dateFormat: 'MS' },
                        { name: 'Papel', type: 'string' }
                    ]
                });
    
    var grid = Ext.create('Ext.grid.Panel', {
                    title: 'Operações Compromissadas',
                    store: store, width: '100%', height: 300,
                    loadMask: true, border: true, stripeRows: true,
                    id: 'gdCompromissadas',
                    xtype: 'grid',
                    layout: 'fit',
                    region: 'center',
                    minSize: 100,              maxSize: 150,                margins: '5 5 0 5',
    
    
                    features: [
                        Ext.create('Ext.ux.grid.feature.MultiGroupingSummary', {
                            id: 'group',
                            hideGroupedHeader: false,
                            enableGroupingMenu: true,
                            startCollapsed: false,
                            summaryRowPosition: 'outside'
                        }),
                        {
                            ftype: 'summary',
                            dock: 'bottom'
                        }
                    ],
    
    
                    viewConfig: {
                        emptyText: 'Nenhum item encontrado.',
                        deferEmptyText: false
                    },
    
    
                    columns: [
                        {
                            id: 'NomeCliente', header: 'Nome Cliente', dataIndex: 'NomeCliente', width: 250,
                            summaryType: 'count',
                            summaryRenderer: function (value, summaryData, dataIndex) {
                                if (value > 0)
                                    return ((value > 1) ? '(' + value + ' Operações)' : '(1 Operação)');
                                else
                                    return '';
                            }
                        },
                        { id: 'GrupoEconomico', dataIndex: 'GrupoEconomico', header: 'Grupo Econômico', width: 150 },
                        {
                            id: 'DataRetorno',
                            dataIndex: 'DataRetorno',
                            header: 'Data Retorno',
                            width: 80,
                            renderer: Ext.util.Format.dateRenderer('d/m/Y')
                        },
                        { dataIndex: 'Papel', header: 'Debênture', width: 165 }
                    ]
    
    
                });
    
    var myPanel = Ext.create('Ext.TabPanel', {
                    width: '100%',
                    height: 650,
                    renderTo: 'divGridCompromissadas',
                    id: 'panelCompromissadas',
                    title: 'Compromissadas',
                    activeTab: 0,
                  
                    //Criação das tabs do painel
                    items: [{
                        title: 'Consulta de Operações',
                        bodyStyle: 'padding:5px;',
                        layout: 'border',
    
    
                        //Criação do form de pesquisa
                        items: [{
                            title: 'Critérios de seleção - Filtro',
                            xtype: 'form',
                            anchor: '100%',
                            id: 'formOperacoes',
                            region: 'north',
                            minSize: 100, maxSize: 160,
                            margins: '5 5 0 5', bodyStyle: 'padding:5px;',
                            collapsible: true,
    
    
                            //Criação dos campos de Filtro
                            items: [
                                {
                                    xtype: 'container',
                                    layout: 'hbox',
                                    pack: 'start',
                                    align: 'stretch',
                                    items: [
                                    {
                                        xtype: 'datefield',
                                        fieldLabel: 'Data Posição',
                                        id: 'dataPosicao',
                                        name: 'dataPosicao',
                                        format: 'd/m/Y',
                                        width: 180,
                                        labelWidth: 80,
                                        margins: '0 5 0 5',
                                        value: new Date(),
                                        msgTarget: 'under',
                                        invalidText: 'Data inválida'
                                    }]
                              }],
    
    
                            buttons: [
                            {
                                id: 'btnPesquisar',
                                text: 'Pesquisar',
                                scope: this,
                                handler: function () {
                                    var data = Ext.getCmp('dataPosicao').getSubmitValue();
                                    myPanel.setActiveTab(1);
    
    
                                    var form = Ext.getCmp('formOperacoes').getForm();
                                    //if (form.isValid()) {
                                    var formFieldsJson = Ext.encode(form.getValues());
    
    
                                    store.load(
                                        {
                                            params:
                                            {
                                                page: 1,
                                                limit: 10,
                                                pDataPosicao: data,
                                                pCodGrupoPapel: 0,
                                                pCodPapel: 0,
                                                pFormFields: formFieldsJson
                                            }
                                        });
                                }
                            }]
                        },
                            grid
    
    
                        ]
                    }]
                });
    
    Ext.EventManager.onWindowResize(function () {
                    myPanel.updateLayout();
                });
    
     });

  5. #4
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Where is your code to hide your column?

  6. #5
    Sencha User
    Join Date
    Aug 2014
    Posts
    30
    Answers
    1

    Default

    I don't have any. by default all my columns should show.

    But I have tried that, I hid one column and was ok, them I showed that column, again no problem, but when I tried to hid again, only the Header was hidden.

    I thinks its because my grid is inside a Tabpanel, then panel ? or because I am using the mult-grouping plugin.

  7. #6
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    So you are just facing the problem when hiding from grid header and not in code?

    see if this is close to what you have.

    Code:
    Ext.onReady(function() {
    
        var store = Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'change'],
            data: {
                'items': [{
                    'name': 'Lisa',
                    "email": "[email protected]",
                    "change": 100
                }, {
                    'name': 'Bart',
                    "email": "[email protected]",
                    "change": -20
                }, {
                    'name': 'Homer',
                    "email": "[email protected]",
                    "change": 23
                }, {
                    'name': 'Marge',
                    "email": "[email protected]",
                    "change": -11
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
    
        var grid = Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: store,
    
            region: 'center',
    
            columns: [{
                header: 'Name',
                dataIndex: 'name'
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                header: 'Change',
                dataIndex: 'change'
            }]
    
        });
    
        var form = Ext.create('Ext.form.Panel', {
            title: 'Form',
    
            height: 100,
            region: 'north',
    
            html: 'This is a form'
        });
    
        var container = Ext.create('Ext.container.Container', {
            title: 'Grid',
            layout: 'border',
            items: [grid, form]
        });
    
        Ext.create('Ext.tab.Panel', {
            renderTo: Ext.getBody(),
            width: 800,
            height: 600,
    
            items: [container, { title: 'ATab' }]
        });
    
    });
    Also, I am wondering if your issues may be related to grid feature.

  8. #7
    Sencha User
    Join Date
    Aug 2014
    Posts
    30
    Answers
    1

    Default

    Hi,


    Yes, its like that.

    See on my image. When I go to hide the "Papel" column, only header is hid, see that the "Papel" values continue under "Carteira" column, But if I Order by "Carteira", then the values disapears.


    GridHide.jpg

    I am gonna remove those features to see if its the issue, the problem is that I need them haha.

    Thanks

  9. #8
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    I am gonna remove those features to see if its the issue, the problem is that I need them haha.
    That is fine, just trying to identify the problem since I cannot reproduce this.

    If you could update my example to show the problem, that would be helpful since I cannot run your code.

  10. #9
    Sencha User
    Join Date
    Aug 2014
    Posts
    30
    Answers
    1

    Default

    Well, I found that the problem is with the Ext.ux.grid.feature.MultiGroupingSummary,

    I removed that and worked. I really need that plugin, it the only one that I found that has multi-grouping.

    Well, I will try to workaround that..

    Big Thanks for the help

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •