extjs tablepanel 问题

Question

main.js
Ext.onReady
        (
            function() {
                
                var MyViewportUi = new Ext.Viewport({
                    layout: 'border',
                    items:
                    [
                            {
                                xtype: 'box',
                                region: 'north',
                                height: 70,
                                id: 'Sys_title',
                                el: 'north_div'
                            },
                            {
                                xtype: 'tabpanel',
                                activeTab: 0,
                                region: 'center',
                                autoWidth: true,
                                el: 'center_div',
                                
                                items: [
                                    {
                                        xtype: 'panel',
                                        title: '商品管理'
                                    },
                                    {
                                        xtype: 'panel',
                                        title: '采购管理'
                                    },
                                    {
                                        xtype: 'panel',
                                        title: '用户管理',
                                        html: '<div id="UserManage" style="overflow:auto;width:100%;height:100%"></div>'
                                    }
                                ]
                            },
                            {
                                xtype: 'panel',
                                title: '系统设置',
                                region: 'west',
                                width: 150,
                                layout: 'accordion',
                                itemId: 'Sys_Set',
                                id: 'Sys_Set',
                                el: 'west_div',
                                layoutConfig:
                                {
                                    animate: true
                                },
                                items: [
                                    {
                                        xtype: 'panel',
                                        title: '系统设置',
                                        border: false,
                                        html: '<div id="SystemSet" style="overflow:auto;width:100%;height:100%"></div>'
                                    }
                                ]
                            }
                        ]
                });
            }        );user.jsvar strUserInfo;
var userGridUi;
//获得数据
strUserInfo = new Ext.data.Store
 (
    {
        proxy: new Ext.data.HttpProxy
        (
            {
                url: 'UI/SysSet/UserManageSet.aspx?opera_name=Search'
            }
        ),
        //解析Json
        reader: new Ext.data.JsonReader
        (
            {
                root: 'data',
                id: 'UserID',
                fields:
                [
                    'UserID', 'LoginName', 'LoginPWD', 'FullName', 'DepartName', 'DepartID', 'Sex', 'BirthDay', 'Address', 'PostCode', 'Email', 'MobilePhone'
                ]
            }
        ),
        remoteSort: true
    }
);
Ext.onReady
(
    function() {    //加载数据
    strUserInfo.load();
    userGridUi = new Ext.grid.GridPanel({
        renderTo: "UserManage",
        title: '用户管理',
        width: 500,
        height: 400,
        store: strUserInfo,
        columns:
        [
            {
                xtype: 'gridcolumn',
                dataIndex: 'LoginName',
                header: '登陆名',
                sortable: true,
                align: 'left',
                editable: false            },
            {
                xtype: 'gridcolumn',
                header: '姓名',
                sortable: true,
                dataIndex: 'FullName'
            }
        ],
        tbar: new Ext.Toolbar({            xtype: 'toolbar',
            height: 40,
            id: 'User_SearchTbar',
            items: [
                {
                    xtype: 'label',
                    text: '登陆名：',
                    width: 50
                },
                {
                    xtype: 'textfield',
                    id: 'Search_Login'
                },
                {
                    xtype: 'splitbutton',
                    text: '查询',
                    iconCls: 'search',
                    id: 'User_SearchBtn',
                    handler: ''
                }
            ]
        })
         
    });
    }
);main.aspx
    <script type"text/javascript" src="UI/JS/main.js"></script>
    <script type"text/javascript" src="UI/JS/user.js"></script>界面加载之后就报错呢！！
'center'部分不用tablepanel就没事！！

Answer 1

这样改一下试试
{
                                xtype: 'tabpanel',
                                activeTab: 0,
                                region: 'center',
                                autoWidth: true,
                                items: [
                                    {
                                       height:300,//都加一个高度
                                        title: '商品管理'
                                         el: 'center_div', //这句放到它的子tab页中去，放到这里先
                                    },
                                    {
                                         height:300,//都加一个高度
                                          title: '采购管理'
                                    },
                                    {
                                          height:300,//都加一个高度
                                          title: '用户管理',
                                        html: '<div id="UserManage" style="overflow:auto;width:100%;height:100%"></div>'
                                    }
                                ]
                            },

Answer 2

{
                                xtype: 'tabpanel',
                                activeTab: 0,
                                region: 'center',
                                autoWidth: true,
                                el: 'center_div',//这里不要，因为显示数据要放在items中显示
                                
                                items: [
                                    {
                                        xtype: 'panel',
                                        title: '商品管理'
                                    },
                                    {
                                        xtype: 'panel',
                                        title: '采购管理'
                                    },
                                    {
                                        xtype: 'panel',
                                        title: '用户管理',
                                        html: '<div id="UserManage" style="overflow:auto;width:100%;height:100%"></div>'
                                    }
                                ]
                            },
tappanel中，不指定宽度、高度好像可以自动铺满tab的

Answer 3

{
                                xtype: 'tabpanel',
                                activeTab: 0,
                                region: 'center',
                                autoWidth: true,
                                items: [
                                    {
                                       height:300,//都加一个高度
                                        title: '商品管理'
                                         el: 'center_div', //这句放到它的子tab页中去，放到这里先
                                    },
                                    {
                                         height:300,//都加一个高度
                                          title: '采购管理'
                                    },
                                    {
                                          height:300,//都加一个高度
                                          title: '用户管理',
                                        html: '<div id="UserManage" style="overflow:auto;width:100%;height:100%"></div>'
                                    }
                                ]
                            },这样还是报错，不过我把activeTab: 0,改成2就没事了，但是我想要的是默认查看第一个tab,这是怎么回事呀！！！郁闷！！

Answer 4

那就 activeTab: 0
把这个去掉
  el: 'center_div', //这句放到它的子tab页中去，放到这里先

Answer 5

可能是这里加载出问题了。
  {
  height:300,//都加一个高度
  title: '商品管理'
  el: 'center_div', //这句放到它的子tab页中去，放到这里先
  },

Answer 6

为什么当前页加载都没事，非活动页就报错,this.el为null!

Answer 7

我的三个页面都要住里面加geidpanel的，很迷茫，初学ext框架，有没有好的教程，系统一点的

Answer 8

1.代码写的正确不会出现这种错误的。
2.学习ext还是要多练，多看api和例子。

Answer 9

我就是想在做一个tabpanel，里面有三个panel，每个panel里加入一个geidpanel，谁能教教我