1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    1
    Vote Rating
    0
    extz is on a distinguished road

      0  

    Default Unanswered: Grid panel collapse, grouping not working inside a Window

    Unanswered: Grid panel collapse, grouping not working inside a Window


    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.
    Attached Images

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi extz,

    Yes you can render grid inside window, see the sample code-
    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/
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72
    Vote Rating
    11
    iplanit will become famous soon enough

      0  

    Default Is not the same case, I do not have panel in a window

    Is not the same case, I do not have panel in a window


    I see.

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

    Allow me to put some code.

    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.

    Quote Originally Posted by sword-it View Post
    Hi extz,

    Yes you can render grid inside window, see the sample code-
    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/

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72
    Vote Rating
    11
    iplanit will become famous soon enough

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    48
    Vote Rating
    0
    eaglefox12 is on a distinguished road

      0  

    Default How would you use pagingtoolbar with this

    How would you use pagingtoolbar with this


    I am having problem using pagingtoolbar with this. How would I do that. Please help
    Quote Originally Posted by sword-it View Post
    Hi extz,

    Yes you can render grid inside window, see the sample code-
    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/