Ext panel为什么加载不进去

问题描述：

--------------------------------------布局----------------------------------

//布局管理
function createLayout(){
new Ext.Viewport({

layout:'border',

items:[{

title: '部门管理',

collapsible: true,

region:'west',

width: 100,
items:tree,
tbar:[{
id:'txt-name',
xtype:'textfield'
},{
xtype:'button',
text:'查找',
handler:searchTree
}]
},{

region:'center',
id:'tabs',
xtype:'tabpanel',
activeTab:0,
contentEl:'dms-content',
items:panels
}]

})

}

--------------------------------------panel----------------------------------

function createPanel(){
panels = Ext.extend(Ext.Panel, {
border:false,
layout:'fit',
pageSize:20, //分页大小
initComponent:function(){
panel.superclass.initComponent.call(this);
this.grid = this.createGrid(); //创建表格
//this.add(this.grid);
},
items:[{items:this.grid}],
/**
* 创建表格部件
*/
createGrid:function(){

    var ds = new Ext.data.JsonStore({
        url:'/KJ222Demo/Demo/getAll',   //由etmvc映射到DeviceController类中的getDevices方法
        fields:[
            'id','code','name','other'
        ],
        baseParams:{
            limit:this.pageSize
        },
        totalProperty:'total',
        root:'demo'

    });
    ds.load({
        params:{start:0}
    });
    var grid = new Ext.grid.GridPanel({
        store:ds,
        columns:[
            {header:'行号',renderer:function(value, cellmeta, record, rowIndex){return rowIndex + 1;}},
            {header:'编号',dataIndex:'code',width:100},
            {header:'名称',dataIndex:'name',width:100},
            {header:'其它',dataIndex:'other',width:100}

        ],
        tbar:[{
            text:'增加',

            iconCls:'tool-add'

        },'-',{
            text:'修改',
            iconCls:'tool-edit'

// iconCls:'tool-edit',
// handler:this.editItem.createDelegate(this)
},'-',{
text:'删除',
iconCls:'tool-cut'
// iconCls:'tool-cut',
// handler:this.destroyItem.createDelegate(this)
},'-',{
text:'查询',
iconCls:'tool-find',
handler:this.showQueryWindow.createDelegate(this)
},'-',{
text:'导出到excel',
iconCls:'tool-find',
handler:this.onPrint.createDelegate(this)
}],
bbar:new Ext.PagingToolbar({
store:ds,
pageSize:this.pageSize
}),
border:false
});
//grid.render('grid-example');
//grid.getSelectionModel().selectFirstRow();

    return grid;
}

});}
---------------------------------------问题------------------------------------
},{

region:'center',
id:'tabs',
xtype:'tabpanel',
activeTab:0,
contentEl:'dms-content',
items:panels
}]

items:panels
没反应

[b]问题补充：[/b]
var tree;
var panels;

已经定义了，用FF调试，到createGrid:function(){ 这里时就断掉了。

[b]问题补充：[/b]
this.grid = this.createGrid(); //创建表格
this.add(this.grid);
定义了。不管怎么调都出来了。。
郁闷

答

因为没有执行initComponent函数，以下是我的修改，不知道是否合适，有部份代码被注释了，是因为我这边没有全部的代码。
[code="JavaScript"]
var tree;
var panels;
//布局管理
function createLayout(){
new Ext.Viewport({

layout:'border',

items:[{

title: '部门管理',

collapsible: true,

region:'west',

width: 200,
items:tree,
tbar:[{
id:'txt-name',
xtype:'textfield'
},{
xtype:'button',
text:'查找',
handler:function(){}
}]
},{

region:'center',
id:'tabs',
xtype:'tabpanel',
title:'123123',
activeTab:0,
contentEl:'dms-content',
items:panels
}]

})
}
function createPanel(){
var ds = new Ext.data.JsonStore({
url:'/KJ222Demo/Demo/getAll', //由etmvc映射到DeviceController类中的getDevices方法
fields:['id','code','name','other'],
baseParams:{limit:this.pageSize},
totalProperty:'total',
root:'demo'
});
//ds.load({params:{start:0}});
grid = new Ext.grid.GridPanel({
height:300,
store:ds,
columns:[
{header:'行号',renderer:function(value, cellmeta, record, rowIndex){return rowIndex + 1;}},
{header:'编号',dataIndex:'code',width:100},
{header:'名称',dataIndex:'name',width:100},
{header:'其它',dataIndex:'other',width:100}

],
tbar:[{
    text:'增加'
    //iconCls:'tool-add'
},'-',{
    text:'修改'
    //iconCls:'tool-edit'
    // iconCls:'tool-edit',
    // handler:this.editItem.createDelegate(this)
},'-',{
    text:'删除'
    //iconCls:'tool-cut'
    // iconCls:'tool-cut',
    // handler:this.destroyItem.createDelegate(this)
},'-',{
    text:'查询'
    //iconCls:'tool-find',
    //handler:this.showQueryWindow.createDelegate(this)
},'-',{
    text:'导出到excel'
    //iconCls:'tool-find',
    //handler:this.onPrint.createDelegate(this)
}],
    bbar:new Ext.PagingToolbar({
    store:ds,
    pageSize:this.pageSize
}),
border:false
});
panels = new Ext.Panel({
    border:     false,
    height:     200,
    width:      200,
    items:      grid
});

}
Ext.onReady(function(){
createPanel();
createLayout();
});
[/code]

答

你打印看看panels 是否已经赋值

答

你没定义全局的panels吧，只有createPanel里定义了，函数外面怎么能调用呢

另外建议你把代码用code括起来，把格式调好，别人看的才清楚

答

既然能够调试，就进createGrid里面继续调吧，看看到哪一句出的问题，用firebug监控一下。
你的代码没贴全，格式又没有缩进，真不太好判断

答

再确认一下，this.grid也定义了？

Ext panel为什么加载不进去

相关推荐