更改NestedList中的Detail容器？

Question

在我的小程序中，我正在尝试为嵌套列表的每个叶节点设置自定义容器。

以下是我试图测试的几个任意示例容器：

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);

    }
});

Answer 1

最后，我找到了解决问题的正确方法。

一些解释：

• 如果您想在hbox的右侧显示“自定义detailContainer”，则很明显您应该为detailCard禁用Ext.NestedList配置，因为它旨在显示内嵌（即取代您的Ext.NestedList）。
• 使用Ext.define时，所有内容都应包含在config中（extend，xtype，alias，id除外，所以在此如果必须将layout放入config）。
• 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'}
                ]
            }));
    }
});