我需要在我的 ExtJS 4.2 应用程序中创建 Twitter Bootstrap 基本 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', {
extend: 'Ext.container.Container',
xtype: 'navbar',
cls: 'navbar navbar-inverse navbar-fixed-top',
defaultType: 'navbaritem',
initComponent: function() {
Ext.apply(this, {
items: [
{
title: 'Item #1',
icon: 'icon1',
selected: true
},
{
title: 'Item #2',
icon: 'icon2'
},
{
title: 'Item #3',
icon: 'icon3'
}
]
});
this.callParent(arguments);
}
});
Ext.define('My.view.layout.NavbarItem', {
extend: 'Ext.Component',
xtype: 'navbaritem',
autoEl: { tag: 'li' },
config: {
title: '',
icon: null,
selected: false
},
renderTpl: '<a href="#">{icon}{title}</a>',
initComponent: function() {
....
this.callParent(arguments);
}
});
我得到这样的输出:
<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 视图以便它可以具有自定义模板并且可以将子组件添加到特定元素?