0

以下のようなビューポートがあります。にpanel2は、 を持つグリッドがありPagingToolbarます。IE では表示されず、FF ではほとんど表示されません。私が北部地域を持っていない場合、それはうまくいきます。その理由は何ですか？

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

同様の例を次に示します: http://jsfiddle.net/edgMV/20/ ボタンが表示されません。

4

1 に答える 1

2

私はあなたのフィドルを見ていましたが、いくつか間違っています。

  • CSS が不完全な Neptune スタイルシートのように見える
  • これを行うことにより:items: resultsPanelリージョン パネルで、そのパネル内に新しいパネルを作成します。
  • 要素に誤った構成を設定しています。これについてはExtJS のドキュメントを参照することをお勧めします。有効な構成オプションがすべてリストされています。
  • MVC アーキテクチャ チュートリアルをご覧になることをお勧めします。

レイアウトについては、あなたが正確に何を望んでいるのかわかりませんが、これは近いかもしれません: http://jsfiddle.net/laurenzonneveld/kVEU/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
    }]
});

編集：使用するフィドルとコード例を更新Ext.define

于 2013-08-27T08:14:22.290 に答える