Grid panel collapse, grouping not working inside a Window

[extz]

Hi all,

I am trying to put a Grid panel with data with grouping and sorting,etc. something very simple.

The thing is, that it is not working when I put it into a Window. But works if I use a Panel or TabPanel. Is there any specific reason for that ? is a bug ? should do something to make it work with the Window ?

I am using Sencha Architect 2 at the moment, with ExtJS4 from cachefly. SA is licensed but the ExtJS version is GPL.

<img src="http://www.sencha.com/forum/attachment.php?attachmentid=38736&amp;stc=1" attachmentid="38736" alt="" id="vbattach_38736" class="previewthumb">

At the image attached you can find a tab panel and the grid working, if you remove a grid into a Window will stop working as expected. If move the grid from a Window that does not work to a tab panel it works.

It is a 99% default grid, but I can put the code if you want.

Thanks in advance.

[sword-it]

Hi extz,

Yes you can render grid inside window, see the sample code-

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [
        {
        "name": "Lisa",
        "email": "lisa@simpsons.com",
        "phone": "555-111-1224"},
    {
        "name": "Bart",
        "email": "bart@simpsons.com",
        "phone": "555-222-1234"}
    ]
});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    viewConfig: {
        layout: 'fit'
    },
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {
        header: 'Name',
        dataIndex: 'name',
        editor: 'textfield'},
    {
        header: 'Detail',
        columns: [{
            header: 'Email',
            dataIndex: 'email',
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }},
        {
            header: 'Phone',
            dataIndex: 'phone'}]}],
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
    })
        ],
    height: 200,
    width: 400
    
});



Ext.create('Ext.window.Window', {
    title:'Window',
    renderTo: Ext.getBody(),
    items:[grid]
}).show();

Here is working sample example -http://jsfiddle.net/maneeshgo/Dp9JW/

[iplanit]

I see.

But your Window has a Panel, so it is not what I asked.

Allow me to put some code.

Ext.define('MyApp.view.dashboard', {
    extend: 'Ext.window.Window',

    floating: true,
    frame: true,
    height: 754,
    id: 'dashboard_id',
    itemId: 'dashboard',
    minHeight: 200,
    width: 921,
    shadowOffset: 10,
    autoScroll: true,
    layout: {
        type: 'border'
    },
    collapseFirst: false,
    collapsible: true,
    title: 'Projects',
    maximizable: true,
    minimizable: false,
    modal: false,
    plain: false,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'gridpanel',
                    region: 'center',
                    weight: 7,
                    border: '',
                    frame: false,
                    autoScroll: true,
                    animCollapse: false,
                    collapsible: false,
                    frameHeader: false,
                    header: false,
                    hideCollapseTool: false,
                    overlapHeader: false,
                    title: 'DevelopmentsList',
                    titleCollapse: false,
                    columnLines: false,
                    enableLocking: true,
                    hideHeaders: false,
                    scroll: 'vertical',
                    store: 'MyModels', // correct store 
                    viewConfig: {
                        autoRender: false,
                        frame: true,
                        autoScroll: true,
                        singleSelect: true,
                        enableTextSelection: true,
                        stripeRows: false
                    },
                    listeners: {
                        itemclick: {
                            fn: me.onGridpanelItemClick,
                            scope: me
                        },
                        select: {
                            fn: me.select,
                            scope: me
                        }
                    },
                    items: [
                        {
                            xtype: 'pagingtoolbar',
                            height: 275,
                            width: 962,
                            autoScroll: false,
                            displayInfo: true,
                            store: 'MyModel'
                        }
                    ],
                    features: [
                        {
                            ftype: 'grouping'
                        }
                    ],
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'status',
                            text: 'Current status'
                        },
                       
                    ],
                    dockedItems: [
                        {
                            xtype: 'panel',
                            dock: 'bottom',
                            height: 187,
                            itemId: 'detail',
                            minHeight: 250,
                            tpl: [
                                '{whatever} field here from the Grid'
                            ],
                            width: 781,
                            layout: {
                                type: 'border'
                            },
                            animCollapse: false,
                            frameHeader: false,
                            header: false,
                            overlapHeader: false,
                              }
                            ]
                        },
                        {
                            xtype: 'toolbar',
                            dock: 'top',
                            items: [
                                {
                                    xtype: 'button',
                                    handler: function(button, event) {
                                        Ext.ux.grid.Printer.printAutomatically = false;
                                        Ext.ux.grid.Printer.print(this);
                                    },
                                    iconCls: 'icon-print',
                                    text: 'Print '
                                }
                            ]
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    },

    onGridpanelItemClick: function(tablepanel, record, item, index, e, options) {


    },

    select: function(selModel, record, index, options) {
        var detailPanel=this.down('#detail');
        detailPanel.update(record.data);
    }

});

I have a viewport, and a window outside the viewport since I cannot have windows inside the viewport.

Then in the window I have a Grid, but not window -> panel -> grid. It displays properly with only window and grid but fails to expand or collapse, even sort.

If I just move the grid to any other place it works. There is nothing coded in the window, I just create it and I show, and I am using Sencha Architect so the definition should be the correct one.

Any comment will be welcome.

Thanks for your reply.

Hi extz,

Yes you can render grid inside window, see the sample code-

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [
        {
        "name": "Lisa",
        "email": "lisa@simpsons.com",
        "phone": "555-111-1224"},
    {
        "name": "Bart",
        "email": "bart@simpsons.com",
        "phone": "555-222-1234"}
    ]
});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    viewConfig: {
        layout: 'fit'
    },
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {
        header: 'Name',
        dataIndex: 'name',
        editor: 'textfield'},
    {
        header: 'Detail',
        columns: [{
            header: 'Email',
            dataIndex: 'email',
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }},
        {
            header: 'Phone',
            dataIndex: 'phone'}]}],
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
    })
        ],
    height: 200,
    width: 400
    
});



Ext.create('Ext.window.Window', {
    title:'Window',
    renderTo: Ext.getBody(),
    items:[grid]
}).show();

Here is working sample example -http://jsfiddle.net/maneeshgo/Dp9JW/

[iplanit]

Even in a window with a tabpanel inside it doesn't work.

The grouping works when I set up the groupfield in the store, but it is ignoring my groupfield feature and sorting.

[eaglefox12]

I am having problem using pagingtoolbar with this. How would I do that. Please help

Hi extz,

Yes you can render grid inside window, see the sample code-

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [
        {
        "name": "Lisa",
        "email": "lisa@simpsons.com",
        "phone": "555-111-1224"},
    {
        "name": "Bart",
        "email": "bart@simpsons.com",
        "phone": "555-222-1234"}
    ]
});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    viewConfig: {
        layout: 'fit'
    },
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {
        header: 'Name',
        dataIndex: 'name',
        editor: 'textfield'},
    {
        header: 'Detail',
        columns: [{
            header: 'Email',
            dataIndex: 'email',
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }},
        {
            header: 'Phone',
            dataIndex: 'phone'}]}],
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
    })
        ],
    height: 200,
    width: 400
    
});



Ext.create('Ext.window.Window', {
    title:'Window',
    renderTo: Ext.getBody(),
    items:[grid]
}).show();

Here is working sample example -http://jsfiddle.net/maneeshgo/Dp9JW/