Sencha touch 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）目前没有显示。这是布局问题吗

以下是屏幕外观的一些想法：

---

完整资料来源：

---

我终于想出了解决你问题的正确方法

一些解释：

• 如果您想在

  hbox

  的右侧显示“customized detailContainer”，很明显，您应该为

  Ext.NestedList

  禁用

  detailCard

  配置，因为它设计为内联显示（即代替

  Ext.NestedList

  ）
• 使用

  Ext.define

  时，所有内容都应包含在

  config

  中（除了

  extend

  、

  xtype

  、

  别名

  、

  id

  ，因此在这种情况下，

  布局

  必须放在

  config

  中）

• flex

  也应该在

  config

  中定义
• 在

  leaftItemTap

  事件中，只需更新您的

  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'}
                ]
            }));
    }
});

---

是否希望自定义

detailContainer

并将其显示在屏幕右侧？是的，在代码的第一部分中，我展示了两个简单的示例。一次只能放映一部，对我来说也很好。谢谢你的工作代码和详细的解释。谢谢兄弟。终于解决了我的问题。我在sencha论坛上发帖，但没人介意回答我。做得好

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'}
                ]
            }));
    }
});