EXTJS容器/面板布局通过自定义非通用html模板

时间:2014-04-07 20:30:50

标签: extjs extjs4.2

我正在寻找一种将自定义布局应用于面板的好方法。我们的想法是提供一些HTML代码并告诉它们应该放在html中的项目。我尝试了所有可用的配置选项似乎对此事有影响,但到目前为止没有任何成功。所以我的问题是是否有一种方法来配置所需的行为,或者我是否需要为此实现布局的自定义子类?我正在寻找一种通用的方法,可以应用于任何containercomponent而不需要重复样板代码每次我想应用自定义布局而不破坏包含hierarchie,以便像.down(...)这样的东西仍然有效。理想情况下,我正在寻找一种方法来获得这种功能,不仅仅是通过html-config给出的某些标记,而是为了使XTemplates以嵌入式项目在更新调用中存活的方式。谢谢!

Ext.define('TestApp.view.test.Test', {
extend: 'Ext.panel.Panel',
alias: 'widget.test',
title: 'Test',

html: [
    'This is <b>some</b> test <i>HTML</i><br>',
    'Here we have a button:<div id="myButton"></div>.<br>',
    'The button should rerender everytime the component\'s html is updated.<br>',
    '<br>',
    'And now to something completely different:',
    '<center> <div id="anotherPanel"></div></center>'],    
items: [
    {
        xtype: 'button',
        text: 'My Label',
        SOME_UNKNOWN_KEY:'#myButton'
    }, {
        xtype: 'panel',
        title: 'Some contained panel',
        SOME_UNKNOWN_KEY:'#anotherPanel',
        width: 200,
        height: 150,
            html: '<center>The panel content</center>'
        }
    ]
});

0 个答案:

没有答案