1

私が Ext JS の完全な初心者であることを認めて、質問の前置きをさせてください。私の無知をお許しください。私は HTML、CSS、JavaScript/JQuery に精通しているので、ほとんどの構文を個々の部分で理解できますが、それらの部分を組み合わせるのに苦労しています。

一番上の行全体にまたがるヘッダー、その下の残りのスペースの 50% を占める左の列、および左と同じ寸法の右の列を含む基本的なページ レイアウトを作成することから始めたいと思います。

最終的には、さまざまな種類のコンテンツをパネルに表示したいと考えていますが、現時点では、Ext JS のレイアウトとビューポートの基本的な構文と構造を理解する必要があります。現状では、私は最終的に混乱しています。以下は、いくつかのコードでの私の最初の試みのサンプルですが、明らかにベースから外れています:

var panel = new Ext.Panel({
    fullscreen: true,
    layout: {
        type: "Panel",
        align: "fit",
    },
    items: [
        {
            xtype: "panel",
            id: "topHeader",
            title: "Header",
            style: "height:200px;"
        },
        {
            xtype: "panel",
            id: "left",
            title: "Left",
            style: "width:500px;z-index:2;background-color:#ccc;position:absolute;left:0px;"
        },
        {
            xtype: "panel",
            id: "right",
            title: "Right",
            style: "width:500px;z-index:2;background-color:#000;position:absolute;right:0px;"
        }
    ]
});
4

2 に答える 2

1

このためには、「ボーダー」レイアウトを使用する必要があります。ボーダー レイアウトでは、北、中央、左、右、南など、さまざまな地域にコンポーネントを追加できます。

ここで動作する例を取得できます - http://docs.sencha.com/ext-js/4-0/#!/example (レイアウトセクション - ボーダーレイアウト)

お役に立てれば。

于 2011-09-05T06:47:01.443 に答える
0

こんな意味だと思いますか？

Ext.create('Ext.Viewport', {
    layout: {
        type: 'border',
        padding: 5
    },
    defaults: {
        split: true
    },
    items: [
        {
            region: 'north',
            collapsible: false,
            border: false,
            split: true,
            height: 100,
            html: 'north'
        },
        {
            region: 'west',
            collapsible: false,
            border: false,
            split: true,
            width: '50%',
            html: 'west<br>I am floatable'
        },
        {
            region: 'center',
            border: false,
            html: ' I am center'
        }
    ]
});

それを試して、私に知らせてください。

于 2011-09-07T11:23:32.133 に答える