Ext grid PagingToolbar does not show on IE

Question

I have Viewport as below. The panel2 has a grid which has a PagingToolbar. It does not show in IE, it shows little in FF. If I don't have the north region, it works fine. What can be the reason?

Ext.create('Ext.Viewport', {
    layout: 'border',
    border : 0,
    items: [
         {
            region: 'north',
            html : 'Some html'
         },
            { region: 'center',
            layout:'fit',
            split : true,
            items : [panel1, panel2]
         }
    ]
    });

Here is a similar example : http://jsfiddle.net/edgMV/20/ The buttons are not showing up.

@LaurenZonneveld Yeah `panel2` is hidden until `panel1` is submitted. — fastcodejava, Aug 19 '13 at 19:37
@LaurenZonneveld There is `split` property on `viewport`? I have IE 9, it happens in FF as well, it is just little better in FF. — fastcodejava, Aug 26 '13 at 20:49
Nope, my bad, fixed in example. From documentation: This configuration option is to be applied to the child items managed by this layout. Each region with split:true will get a Splitter that allows for manual resizing of the container. **Except for the center region**. — Lauren Zonneveld, Aug 30 '13 at 06:13

score 2 · Answer 1 · edited Feb 04 '14 at 11:46

I was looking at your Fiddle but there are several things wrong.

CSS looks like an incomplete Neptune stylesheet
By doing this: items: resultsPanel in your region panels, you are creating a new panel inside that panel
You are setting incorrect configuration on elements, my advice is to look at the ExtJS documentation for this, it lists all the valid configuration options
You might want to look at the MVC architecture tutorial

Now for the layout, I don't know what you want exactly, but this might be close: http://jsfiddle.net/laurenzonneveld/kVUEU/4/

var navigate = function (panel, direction) {
    var layout = panel.getLayout();
    layout[direction]();
    Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
    Ext.getCmp('move-next').setDisabled(!layout.getNext());
};

Ext.define('App.view.RequestPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.requestpanel',

    title: 'Request Panel',
    items: [{
        html: 'Sample Result'
    }],
    bbar: [{
        xtype: 'button',
        text: 'Search'
    }, {
        xtype: 'button',
        text: 'Reset'
    }]
});

Ext.define('App.view.ResultPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.resultpanel',

    title: 'Result Panel',
    layout: 'card',

    items: [{
        xtype: 'panel', // Standard panel, but this could be another super complex panel
        html: 'Sample Result 1'
    }, {
        // Defaults to xtype: 'panel', if no xtype is specified
        html: 'Sample Result 2'
    }, {
        // Defaults to xtype: 'panel', if no xtype is specified
        html: 'Sample Result 3'
    }, {
        // Defaults to xtype: 'panel', if no xtype is specified
        html: 'Sample Result 4'
    }],
    bbar: [{
        xtype: 'button',
        text: 'Previous',
        handler: function (btn) {
            navigate(btn.up('panel'), 'prev');
        }

    }, {
        xtype: 'button',
        text: 'Next',
        handler: function (btn) {
            navigate(btn.up('panel'), 'next');
        }
    }]
});

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Sencha</h1>',
        border: false
    }, {
        xtype: 'requestpanel', // Your super complex panel
        region: 'center', // Context specific properties for the panel
        layout: 'fit', // Context specific properties for the panel
        flex: 1 // Context specific properties for the panel
    }, {
        region: 'south', // Your super complex panel
        xtype: 'resultpanel', // Context specific properties for the panel
        flex: 1, // Context specific properties for the panel
        collapsible: true, // Context specific properties for the panel
        split: true
    }]
});

Edit: Updated Fiddle and code example to use Ext.define

You have a property `hidden: true` on the panel with the buttons. Second, the center region of a border layout cannot be collapsible. Third, you are creating a panel inside a panel. That's unnecessary overnesting, follow my example or look at Ext.define. — Lauren Zonneveld, Aug 29 '13 at 21:06
Thanks for the quick response. We can not put the request Panel and reesponse Panel inside the viewport. The panels are very complex. — fastcodejava, Aug 30 '13 at 03:43
So, use `Ext.define`. I've updated the Fiddle and code example. You should also read the comments I've included in the example. If your app is complex, also look at MVC as I suggested. — Lauren Zonneveld, Aug 30 '13 at 06:03

Ext grid PagingToolbar does not show on IE

1 Answers1