extjs 4如何在自定义html中包装容器的子组件? [英] extjs 4 how to wrap children components of container in custom html?

问题描述

我需要在ExtJS 4.2应用程序中创建Twitter Bootstrap基本NavBar组件.我想让我的组件生成以下html:

I need to create Twitter Bootstrap basic NavBar component in my ExtJS 4.2 application. All I want to make my component generate the following 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):

I've created two views (NavBar and NavBarItem correspondingly):

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视图以使其具有自定义模板并将子组件添加到特定元素?

How can I modify my NavBar view in order it could have a custom template and children components could be added to a particular element?

推荐答案

您已经完成了一半:您的子项或多或少正确地渲染了，但是容器将需要做一些工作以避免渲染额外的元素.这里的要点是，对于容器而言，渲染过程与布局紧密相关，实际上，容器是在布局内进行渲染的.因此，您需要对自动布局稍作改动:

You're halfway there: your child items are rendering more or less properly, but the container will require a bit of work to avoid rendering extra elements. The catch here is that for a container, the rendering process is tightly intertwined with the layout and in fact containers render from within a layout. So you will need to fudge the auto layout a bit:

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

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

Instantiating this container will give you approximately this output:

<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和其他属性，因此您将不得不对模板进行更多的调整，但是我希望您能掌握要点.

I'm simplifying here and the actual elements rendered to the DOM will get a lot of auto-generated classes, ids, and other attributes, so you will have to tweak your templates even more, but I hope you get the gist of it.

这篇关于extjs 4如何在自定义html中包装容器的子组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！