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

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

一些解释：

  • 如果你想在你的右侧显示“自定义的detailContainer”，hbox很明显你应该禁用你的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'}
                ]
            }));
    }
});
于 2012-04-27T04:03:14.510 回答