0

タイトルと小さな要約グリッドも保持するパネルに含まれるデータを含むグリッドがあります。パネルはレイアウトに適合しているため、タイトルと最初のグリッド (要約グリッド) は問題なく表示されます。しかし、問題のグリッドには、画面に表示できるよりも多くのレコードがあり、そのコンポーネントの高さは、ブラウザー ウィンドウの高さに常に収まるパネルのサイズに調整されていません。

私が望むのは、パネルのようなグリッドコンポーネントの高さを親に合わせて調整し、グリッド本体内のスクロールバーが表示されるようにすることです。

私のコードはこれに似ています (initComponent は Ext.panel.Panel の拡張です): (このコードのヘッダーは要約グリッドを意味します)

initComponent: function (config) {
    var config = {
        border: false,
        hidden: false,
        hideMode: "display",
        padding: '5',
        layout: "fit"
    }

    Ext.apply(this, Ext.apply(this.initialConfig, config));
    this.callParent(arguments);

    title = Ext.create("Ext.panel.Panel", {
        html: '<h2>title</h2>',
        padding: '5',
        border: false
    });

// the stores for the grids are created here
    var storeHdr = DataStoreFactory.CreateStore("GetHeaderP", DataStoreFactory.fieldsCollection.Default);
    var storeBdy = DataStoreFactory.CreateStore("GetBodyP", DataStoreFactory.fieldsCollection.Default);

    var grdHeader = Ext.create("Ext.grid.Panel", {
        store: storeHdr,
        columns: getHeaderColumns(), 
        columnLines: true,
        autoHeight: false,
        autoWidth: false,
        enableHdMenu: false,
        enableColumnMove: false,
        enableColumnResize: false,
        disableSelection: true,
        trackMouseOver: false,
        sortable: false
    });

    var grdBody = Ext.create("Ext.grid.Panel", {
        id: id,
        store: storeBdy,
        columns: getBodyColumns(), 
        columnLines: true,
        autoHeight: false,
        autoWidth: false,
        autoScroll: true,
        scroll: "vertical",
        enableColumnMove: false,
        enableColumnResize: false,
        enableHdMenu: false,
        trackMouseOver: false,
        disableSelection: true
    });
},

    var headerGridContainer = Ext.create("Ext.panel.Panel", {
        layout: "fit",
        border: false,
        items: [grdHeader]
    });
    var bodyGridContainer = Ext.create("Ext.panel.Panel", {
        layout: "fit",
        border: false,
        items: [grdBody]
    });

    this.add(title);
    this.add(headerGridContainer);
    this.add(bodyGridContainer);
    storeHdr.load();
    storeBdy.load();
    this.doLayout();
}

誰かがこれで私を助けてくれることを願っています。前もって感謝します

編集 - それがどのように、どのようにあるべきかのスクリーンショット。リアルタイム データは非公開であり、問​​題には関係ないため、削除または消去されます。

どうですか これがその方法です

それがどうあるべきか これがどうあるべきか

4

1 に答える 1

1

間違った方法でレイアウトを使用しています。まず、メイン コンテナにはレイアウト 'fit' があります。これは、内部に単一のアイテムがある場合に使用されるはずです - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container .Fit - アイテムが少ない。

第二に、過度のネストを避けるようにしてください。グリッドをパネルにラップしてから、これらのパネルをコンテナー内に配置します。その理由はありますか？

あなたが持っているものとあなたが持ちたいもののスクリーンショットを投稿してください。これに使用する必要があるレイアウトを理解するのに役立ちます.

アップデート：

layout: 'hbox'メインコンテナで使用してみてください。flex: 1画面の残りの部分を埋める場合は、メイン (下部) グリッドを指定します。Son 基本的に、これに似たものがあります（メインコンテナ内）：

{
   layout: 'hbox',
   ..
   items: [{
      xtype: 'panel', // header
      height: 100, 
   },
   {
      xtype: 'grid', // first grid
      height: 200
   },
   {
      xtype: 'grid', // second grid
      flex: 1
   }]
}
于 2012-08-03T11:41:52.647 に答える