Model view controller extjs 4如何在自定义html中包装容器的子组件？

我需要在我的ExtJS 4.2应用程序中创建Twitter引导基本NavBar组件。我只想让我的组件生成以下html：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <ul class="nav">
      <li class="active"><a href="#"><i class="icon1"></i> Item #1</a></li>
      <li><a href="#"><i class="icon2"></i> Item #3</a></li>
      <li><a href="#"><i class="icon3"></i> Item #3</a></li>
    </ul>
  </div>
</div>

我创建了两个视图（相应的NavBar和NavBarItem）：

Ext.define（'My.view.layout.Navbar'{
扩展：“Ext.container.container”，
xtype:'navbar'，
cls:“导航栏导航栏反向导航栏固定顶部”，
defaultType:'navbaritem'，
initComponent:function（）{
Ext.apply（本{
项目：[
{
标题：“第1项”，
图标：“icon1”，
所选：真
},
{
标题：“第2项”，
图标：“icon2”
},
{
标题：“第3项”，
图标：“icon3”
}
]
});
this.callParent（参数）；
}
});
Ext.define（'My.view.layout.NavbarItem'{
扩展：“Ext.Component”，
xtype:'navbaritem'，
autoEl:{tag:'li'}，
配置：{
标题：“”，
图标：空，
所选：false
},
renderTpl:“”，
initComponent:function（）{
....
this.callParent（参数）；
}
});

我得到这样的输出：

<div class="navbar navbar-inverse navbar-fixed-top">
   <li class="active"><a href="#"><i class="icon1"></i> Item #1</a></li>
   <li><a href="#"><i class="icon2"></i> Item #3</a></li>
   <li><a href="#"><i class="icon3"></i> Item #3</a></li>
</div>

---

如何修改我的NavBar视图，使其具有自定义模板，并且可以将子组件添加到特定元素？

您已经完成了一半：您的子项渲染或多或少都是正确的，但是容器将需要一些工作来避免渲染额外的元素。这里需要注意的是，对于容器，渲染过程与布局紧密交织在一起，事实上，容器从布局中渲染。因此，您需要对自动布局进行一些修改：

Ext.define('My.view.layout.NavBar', {
    extend: 'Ext.container.Container',
    alias:  'widget.navbar',  // Not xtype here!

    defaultType: 'navbaritem',

    // Let's be declarative
    items: [{
        title: 'Item #1',
        icon: 'icon1',
        selected: true
    }, {
        title: 'Item #2',
        icon: 'icon2'
    }, {
        title: 'Item #3',
        icon: 'icon3'
    }],

    renderTpl: [
        '<div class="navbar-inner">',
            '<ul class="nav">',
                '{%this.renderChildren(out,values)%}',
            '</ul>',
        '</div>',

        {
            renderChildren: function(out, renderData) {
                // We have to be careful here, as `this`
                // points to the renderTpl reference!
                var me = renderData.$comp.layout,
                    tree = me.getRenderTree();

                if (tree) {
                    Ext.DomHelper.generateMarkup(tree, out);
                }
            }
        }
    ]
});

Ext.define（'My.view.layout.NavBar'{
扩展：“Ext.container.container”，
别名：“widget.navbar'，//此处不是xtype！
defaultType:'navbaritem'，
//让我们声明一下
项目：[{
标题：“第1项”，
图标：“icon1”，
所选：真
}, {
标题：“第2项”，
图标：“icon2”
}, {
标题：“第3项”，
图标：“icon3”
}],
renderTpl：[
'',
“
”，
“{%this.renderChildren（out，value）%}”，
“
”，
'',
{
renderChildren：函数（out，renderData）{
//我们在这里必须小心，因为`
//指向renderTpl引用！
var me=渲染数据$comp.layout，
tree=me.getRenderTree（）；
如果（树）{
Ext.DomHelper.generateMarkup（tree，out）；
}
}
}
]
});

实例化此容器将为您提供大致如下输出：

<div ...>
    <div class="navbar-inner">
        <ul class="nav" ...>
            <li ...>
                <a href="#">...</a>
            </li>
            <li ...>
                <a href="#">...</a>
            </li>
            <li ...>
                <a href="#">...</a>
            </li>
        </ul>
    </div>
</div>

---

我在这里进行了简化，渲染到DOM的实际元素将获得许多自动生成的类、ID和其他属性，因此您必须进一步调整模板，但是我希望您能理解它的要点。

您可以使用

Ext.view.view

并创建自己的自定义

XTemplate

，以模仿所需的div结构。Ext文档中的一些示例很好地演示了View和XTemplates。谢谢，它对我很有用。但是我在ExtJS文档中没有找到任何关于这种方法的信息。@Stas好吧，这些东西对于常规文档来说可能有点太深了，而且弊大于利。ExtJS布局非常灵活和强大，但我们要付出的代价是它们也极其复杂。如果你想弄乱布局，你必须非常清楚自己在做什么，如果你想弄乱布局，你可能根本不需要这些文档

<div ...>
    <div class="navbar-inner">
        <ul class="nav" ...>
            <li ...>
                <a href="#">...</a>
            </li>
            <li ...>
                <a href="#">...</a>
            </li>
            <li ...>
                <a href="#">...</a>
            </li>
        </ul>
    </div>
</div>