2

ExtJs 4.0 の単純なテーブル レイアウトに問題があります。4 つのパネルがあり、2X2 パネル形式で配置したいと考えています。通常、これは 2 列と 2 行になりますが、ExtJ ではそれをうまく行うことができます。ただし、私の目的では、4 列と 2 行が必要です。レイアウトを次のようにしたい：

|1|222|
|33|44|

パネル 1: 1 列 1 行にまたがる

パネル 2: 3 列、1 行にまたがる

パネル 3: 2 列 1 行にまたがる

パネル 4: 2 列、1 行にまたがる

これは簡単に実行できるように思えますが、正しく動作させることができないようです! 以下は、ExtJs の例からコピーして修正したコード全体です: http://docs.sencha.com/ext-js/4-0/#!/example/layout/table.html (何らかの理由で、この例には Javascript コードへのリンクがありませんが、ext-4.0.1/examples/layout/table.js の下の ExtJs の例のフォルダーで見つけることができました)。

Ext.onReady(function() {
var panel = Ext.create('Ext.Panel', {
    id:'main-panel',
    baseCls:'x-plain',
    renderTo: Ext.getBody(),
    layout: {
        type: 'table',
        columns: 4
    },
    // applied to child components
    defaults: {frame:true, width:200, height: 200},
    items:[{
        title:'Item 1',
        colspan:1,
        width:200
    },{
        title:'Item 2', 
        colspan:3,
        width:600
    },{
        title:'Item 3', 
        colspan:2,
        width:400
    },{
        title:'Item 4',
        colspan:2,
        width:400

    }]
});

});

さて、私の知る限り、このコードは機能するはずです。しかし、私が得ている結果は次のとおりです。 列テーブルのレイアウト

パネル 2 が 1 列右に移動している理由について、何かヒントはありますか? Sencha Docs の例には、複数の列にまたがるパネルがたくさんありますが、何かを見落としているに違いなく、何が何なのかわかりません!

ご協力いただきありがとうございます。

4

2 に答える 2

1

パネルに追加

layout: {
    type: 'table',
    // The total column count must be specified here
    columns: 3
},

このコードを子アイテムに適用します

tdAttrs: {
    colspan: 2
}

調査し、プレーンな HTML で作成しようとした結果、探しているものを 1 つのテーブルで実現できないことがわかりました。

于 2012-06-21T20:04:16.127 に答える