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

      0  

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

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


    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.

    Code:
    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:

    Code:
    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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,079
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

    Code:
    // 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.

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

      0  

    Default cannot use your example

    cannot use your example


    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.

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

      0  

    Default No one with this problem ?

    No one with this problem ?


    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.

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,079
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

Thread Participants: 1

Tags for this Thread