Sencha Architect window with grid collapses but not after moving to a viewport

[iplanit]

Hi,

I have a class that is a panel with a grid that has groupingfeature,etc. It works, since I can expand and collapse when I group.

Later, if I move the window to viewport or I desplay the wiewport with Ext.create from the viewport it doesn expands or collapses correctly.

Most of the code is default, there are no special references, all was made using Sencha Architect.

This is the code that works only if I mark it as initial view.

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

    requires: [
        'MyApp.view.gridscreen'
    ],

    autoShow: true,
    height: 708,
    id: 'window2',
    width: 1107,
    autoScroll: true,
    resizable: false,
    layout: {
        type: 'border'
    },
    frameHeader: false,
    title: 'Summary of your events',
    maximizable: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'tabpanel',
                    flex: 1,
                    dock: 'top',
                    resizable: false,
                    activeTab: 0,
                    items: [
                        {
                            xtype: 'panel',
                            width: 1094,
                            layout: {
                                type: 'fit'
                            },
                            title: 'Summary',
                            tabConfig: {
                                xtype: 'tab',
                                autoRender: true,
                                id: 'window_'
                            },
                            items: [
                                {
                                    xtype: 'gridscreen'
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            title: 'Tab 2'
                        },
                        {
                            xtype: 'panel',
                            title: 'Tab 3'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

I can put a video or more code if required.

Probably I am missing a critical thing in the development since it works when it is market as initial view. But from a viewport in the launch I use:

var dashboard=Ext.create('MyApp.view.SummaryPanel');
dashboard.show();
console.log(dashboard);

And it makes the window appear but the first group never collapses or expands. When you click makes the other groups to collapse or expand, you can only click in the first one, the other ignores the event. When you test only the panel with the grid it works.

Kind regards

[scottmartin]

I created an example based in what I think you meant, but it was a little hard to follow. Please review the example and make the changes needed to duplicate your issue.

// GRID; GROUP; GROUPING; VIEWPORT; WINDOW; TAB; TABPANEL;

Ext.onReady(function(){

    Ext.create('Ext.data.Store', {
        storeId : 'simpsonsStore',
        fields  : ['name', 'email', 'change', 'type'],
        data    : {'items' : [
            { 'name' : 'Lisa',  'email' : 'lisa@simpsons.com',  'change' : 100, 'type' : 'child' },
            { 'name' : 'Bart',  'email' : 'bart@simpsons.com',  'change' : -20, 'type' : 'child'  },
            { 'name' : 'Homer', 'email' : 'home@simpsons.com',  'change' : 23 , 'type' : 'parent'  },
            { 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11, 'type' : 'parent'  }
        ]},
        groupField: 'type',
        proxy   : {
            type   : 'memory',
            reader : {
                type : 'json',
                root : 'items'
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        title      : 'Simpsons',
        store      : Ext.data.StoreManager.lookup('simpsonsStore'),
        columns    : [
            { header : 'Name', dataIndex : 'name' },
            { header : 'Email', dataIndex : 'email', flex : 1 },
            { header : 'Change', dataIndex : 'change', tdCls : 'x-change-cell' }
        ],
        features: [{
            ftype: 'grouping'
        }]
    });

    var panel = Ext.create('Ext.tab.Panel', {
        items: [ grid,
        {
            title: 'Bar',
            tabConfig: {
                title: 'Custom Title',
                tooltip: 'A button tooltip'
            }
        }]
    });

    var win = Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 300,
        width: 400,
        layout: 'fit',
        items: [ panel ]
    });

    Ext.define('MyViewport', {
        extend: 'Ext.container.Viewport',

        initComponent: function() {
            var me = this;

            me.callParent(arguments);
        }

    });

    Ext.create('MyViewport', {
        items: [{
            xtype: 'button',
            text: 'click me',
            handler: function(){
                win.show();
            }
        }]

    });

});

Scott.

[iplanit]

Hi Scott,

Thanks for your reply, I tried your code and it works. However, you're not using Sencha Architect / MVC in the example. So I cannot reproduce it in your code.

In my case I change the "initial view" in Sencha Architect, and I am not sure what is changing by setting it in the code.

This is a video with my setup.

https://docs.google.com/open?id=0B0C...EUxeWVIcklkS00

What is happening is that the grid is not collapsing in a proper way when it is grouping: if you click in the first group it collapses everything except the first group, if you click in any other group it collapses everything except the group where you clicked, and in my scenario also happens than if you click the last group or in any other group doesn't collapses at all.

The grid in my case is a promoted class so when I work with it in the designer it works and it should work in all scenarios, if there is no reference conflict, since the code is the same.

Here is the sencha architect code so you can open the project and deploy.

I get this error in firebug

Unexpected value -Infinity parsing width attribute.
2
3
4 ...else{l=b._lastItemForPoint;if(l){b.fireEvent("itemmouseout",l);delete b._lastIte...
5
6 ext-all.js (line 21)

To test in the project click in the button at the top, "B show grid".

Thanks in advance.

[iplanit]

The title is confusing, I agree.

But... this is serious issue.

I have a panel with a tab panel and a grid inside it, the collapse and expand doesn't work. Very frustrating since there is no special code here, and I can make it work if I create the grid using the same store outside the tab panel.

The grid is ignoring the collapse and expand events, buttons.

Comments welcome.

Thanks.

[scottmartin]

Can you provide me with a working test case so I can test this out?

Scott.