问题描述

Extjs中panel嵌套不显示的问题

 Ext.namespace("ideaproject.js");
var _login = ideaproject.js;

_login.createPanel = function(){
    var panel = new Ext.Panel({
        renderTo : 'loginpanel',
        layout:"border",
        width:525,
        height:290,
        defaults:{border:false},
        items:[{
            region:"north",
            height:56,
            html:"我是顶部"
        },{
            region:"south",
            width:56,
            html:"我是底部"
        },{
            region:"west",
            width:253,
            html:"我是中左"
        },{
            region:"center",
            html:"我是中心"
        }]
    });
};

_login.createFormPanel=function(){
    var form = new Ext.form.FormPanel({
        defaultType:'textfield',
        labelAlign:'right',
        labelWidth:60,
        region:"center",
        defaults:{border:false},
        items:[
            {fieldLabel:'登录账号',name:'user'}
        ],
        buttons:[{text:'登录'},{text:'取消'}]
    });
};

Ext.onReady(function(){
    _login.createPanel();
    _login.createFormPanel();
    Ext.get('loginpanel').setStyle('position','absolute').center(Ext.getBody());
});

下面是我的js文件

jsp页面上就一个

 <div id="loginpanel"></div>

解决方案

extjs panel 中显示 div 中的容

解决方案二：

你的formPanel由没有添加到dom中，不是配置region为center就会自动替换到panel里面的center那个位置的。。

     Ext.namespace("ideaproject.js");
    var _login = ideaproject.js;

    _login.createPanel = function () {
        var panel = new Ext.Panel({
            renderTo: 'loginpanel',
            layout: "border",
            width: 525,
            height: 290,
            defaults: { border: false },
            items: [{
                region: "north",
                height: 56,
                html: "我是顶部"
            }, {
                region: "south",
                width: 56,
                html: "我是底部"
            }, {
                region: "west",
                width: 253,
                html: "我是中左"
            }, /*{
                region: "center",
                html: "我是中心"
            }*/form]
        });
    };

    _login.createFormPanel = function () {
        window. form = new Ext.form.FormPanel({
            defaultType: 'textfield',
            labelAlign: 'right',
            labelWidth: 60,
            region: "center",
            defaults: { border: false },
            items: [
                { fieldLabel: '登录账号', name: 'user' }
            ],
            buttons: [{ text: '登录' }, { text: '取消' }]
        });
    };

    Ext.onReady(function () {
        _login.createFormPanel();//注意顺序
        _login.createPanel();
        Ext.get('loginpanel').setStyle('position', 'absolute').center(Ext.getBody());
    });