在 HTML div 中注入 sencha 面板答案

【问题标题】：inject sencha panel inside HTML div在 HTML div 中注入 sencha 面板
【发布时间】：2013-05-20 12:35:59
【问题描述】：

我在视图中有一个面板

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

有没有办法做到这一点

【问题讨论】：

标签： html sencha-touch-2 panel

【解决方案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.

【讨论】：