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
    Answers
    124
    Vote Rating
    85
    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/

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi