Question

我在视图中有一个面板

Ext.define('MyApp.view.myPanel', {
extend : 'Ext.Panel',
xtype : 'myPanel',

config : {
    scrollable: 'vertical',
    width: '100%',
    height: '100%',
    html : '<div class="body"><div class="title">My Page</div><div class="content"></div></div>'
}
});

我可以在<div class="content"></div>内添加其他面板吗？

我需要在内容div标签之间添加此面板：

var pan = Ext.define('My.view.otherView', {
extend : 'Ext.Panel',
xtype : 'otherView',
config : {
    title : '<img src="images/logo.png" alt="" class="logo"/>',
    scrollable: false,
    width: '100%',
    cls : 'panicView',
    layout: 'vbox',
    items : [
                {
                    flex : 1,
                    xtype: 'panel',
                    html: '<img class="pageHeaderImage" src="images/Header.png" /><div class="pageHeader">Emergency!</div>'
                },
                {
                    flex : 6,
                    xtype: 'formGrid'
                }
            ]
}
});

有没有办法可以做到这一点

Answer 1

以下是使用类将面板添加到div中的代码。

Ext.application({
    name: ('SF' || 'SenchaFiddle'),

    launch: function () {
        Ext.define('MyApp.view.firstpage', {
            extend: 'Ext.Panel',
            xtype: 'firstcontainer',            
            config: {     
                fullscreen:true,
                title: 'Setting',
                iconCls: 'settings',
                html: [
                    '<div class="container">', 
                    '</div>'].join("")
            }
        });
        Ext.create('MyApp.view.firstpage');
        Ext.create('Ext.Panel',{html:'Container Inner Panel'
                ,renderTo:Ext.DomQuery.select('.container')[0]});
    }
});

Here is the link to the fiddle

在HTML div中注入sencha面板

1 个答案: