2

私が持っている小さなプログラムでは、ネストされたリストのすべてのリーフノードにカスタムコンテナを作成しようとしています。

これが私がテストしようとしているいくつかの任意のサンプルコンテナです：

Ext.define('DetailContainer1', {
    extend: 'Ext.Container',
    xtype: 'detail-container1',
    layout: {
        type: 'vbox'
    },
    height: 300,
    style: 'background-color: #a9a9a9;',
    //    flex: 1,
    items: [{
        html: 'Detail Container1'
    }]
});

Ext.define('DetailContainer2', {
    extend: 'Ext.Container',
    xtype: 'detail-container2',
    layout: {
        type: 'vbox'
    },
    height: 300,
    style: 'background-color: #c9c9c9;',
    //    flex: 1,

    items: [{
        html: 'Detail Container2',
        flex: 1
    }, {
        xtype: 'button',
        text: 'Hit me!',
        flex: 1
    }]
});

ユーザーがリーフノードをクリックしたときに、新しいコンテナを切り替えるにはどうすればよいですか？

このアクションはで発生するはずonLeafItemTap()です。ところで、最初のコンテナ（＃2）は現在表示されていません。これはレイアウトの問題ですか？

画面がどのように表示されるかについてのアイデアは次のとおりです。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

完全なソース：

Ext.Loader.setConfig({
    enabled: true
});

Ext.define('DetailContainer1', {
    extend: 'Ext.Container',
    xtype: 'detail-container1',
    layout: {
        type: 'vbox'
    },
    height: 300,
    style: 'background-color: #a9a9a9;',
    //    flex: 1,
    items: [{
        html: 'Detail Container1'
    }]
});

Ext.define('DetailContainer2', {
    extend: 'Ext.Container',
    xtype: 'detail-container2',
    layout: {
        type: 'vbox'
    },
    height: 300,
    style: 'background-color: #c9c9c9;',
    //    flex: 1,

    items: [{
        html: 'Detail Container2',
        flex: 1
    }, {
        xtype: 'button',
        text: 'Hit me!',
        flex: 1
    }]
});

Ext.define('ListItem', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['text']
    }
});

Ext.define('Sencha.view.MainView', {
    extend: 'Ext.Container',
    xtype: 'mainview',
    layout: {
        type: 'hbox'
    },
    initialize: function() {
        this.treeStore = Ext.create('Ext.data.TreeStore', {
            model: 'ListItem',
            defaultRootProperty: 'items',
            root: {
                items: [{
                    text: 'Containers',
                    items: [{
                        text: 'Detail #1',
                        leaf: true
                    }, {
                        text: 'Detail #2',
                        leaf: true
                    }]
                }]
            }
        });
        this.detailContainer = Ext.create("DetailContainer2", {});

        this.nestedList = Ext.create('Ext.NestedList', {

            docked: 'left',
            width: 300,
            flex: 1,
            store: this.treeStore,

            detailCard: true,
            detailContainer: this.detailContainer,

            listeners: {
                scope: this,
                leafitemtap: this.onLeafItemTap
            }
        });

        this.setItems([this.detailContainer, this.nestedList]);
    },

    onLeafItemTap: function(nestedList, list, index, node, record, e) {
        var detailCard = nestedList.getDetailCard();
        // nestedList.setDetailContainer(Ext.create("DetailContainer1", {}))
        // detailCard.setHtml(record.get('text') + "...");
    }
});


Ext.application({

    launch: function() {
        var container = Ext.create("Ext.Container", {
            layout: {
                type: 'hbox'
            },
            items: [{
                xtype: 'mainview'
            }]
        });
        Ext.Viewport.add(container);

    }
});
4

1 に答える 1

1

最後に、私はあなたの問題を解決するための適切な方法を見つけました。

いくつかの説明：

  • の右側に「customizeddetailContainer」を表示する場合は、インラインで表示するように設計されているため（つまり、の代わりに）、の構成hboxを無効にする必要があることは明らかです。detailCardExt.NestedListExt.NestedList
  • を使用する場合Ext.defineは、すべてを含める必要がありますconfig（、、、、を除く。この場合は、をextend含めるxtype必要があります）。aliasidlayoutconfig
  • flexでも定義する必要がありconfigます。
  • leafitemtapイベントでは、動的に更新されないため、構成を更新し、再度削除/追加するだけですdetailContainer。

以下の変更されたコードスニペットを見てください、それは私にとって完璧に機能します。

Ext.Loader.setConfig({ enabled: true });

Ext.define('DetailContainer1', {
    extend: 'Ext.Container',
    xtype: 'detail-container1',
    config: {
        flex: 1,
        layout: {
            type: 'vbox'
        },
        style: 'background-color: #a9a9a9;',
        items: [
            {html: 'Detail Container1'}
        ]
    }
});

Ext.define('DetailContainer2', {
    extend: 'Ext.Container',
    xtype: 'detail-container2',
    config: {
        flex: 1,
        layout: {
            type: 'vbox'
        },
        style: 'background-color: #c9c9c9;',

        items: [
            {html: 'Detail Container2', flex: 1},
            {xtype: 'button', text: 'Hit me!', flex: 1}
        ]
    }
});

Ext.define('ListItem', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['text']
    }
});

Ext.define('Sencha.view.MainView', {
    extend: 'Ext.Container',
    xtype: 'mainview',
    id: 'mainview',
    config: {
        layout: {
            type: 'hbox'
        },
    },
    initialize: function() {
        this.treeStore = Ext.create('Ext.data.TreeStore', {
            model: 'ListItem',
            defaultRootProperty: 'items',
            root: {
                items: [
                    {
                        text: 'Containers',
                        items: [
                            { text: 'Detail #1', leaf: true },
                            { text: 'Detail #2', leaf: true }
                        ]
                    }

                ]
            }
        });
        this.detailContainer = Ext.create("DetailContainer2");

        this.nestedList = Ext.create('Ext.NestedList', {
            flex: 1,
            store: this.treeStore,
            listeners: {
                scope: this,
                leafitemtap: this.onLeafItemTap
            }
        });

        this.setItems([this.nestedList, this.detailContainer]);
    },

    onLeafItemTap: function(nestedList, list, index, node, record, e) {
        mainview = Ext.getCmp('mainview');
        if (index==0) {
            mainview.detailContainer = Ext.create("DetailContainer1");
        } else {
            mainview.detailContainer = Ext.create("DetailContainer2");
        }
        mainview.removeAt(1);
        mainview.add(mainview.detailContainer);

    }
});


Ext.application({
    launch: function() {
        Ext.Viewport.add(
            Ext.create("Ext.Container", {
                layout: {
                    type: 'card'
                },
                items: [
                    {  xtype : 'mainview'}
                ]
            }));
    }
});
于 2012-04-27T04:03:14.510 に答える