自娱自乐

本人收藏的一些文章，供学习使用
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Extjs4---Cannot read property 'addCls' of null

Posted on 2014-06-10 19:07  lwjacky  阅读(742)  评论(0)  编辑  收藏  举报

用MVC做后台管理系统时遇到的问题，关于tab关闭后再打开不显示，或者报错

我在新的tabpanel中加入了一个grid，当我关闭再次打开就会报错Cannot read property 'addCls' of null，

原因是我在定义grid的错误

这是错误代码：

 1 Ext.define('HT.view.Grid', {
 2     extend: 'Ext.grid.Panel',
 3 
 4     title: '人员列表',
 5     width: 400,
 6     height: 170,
 7     frame: true,
 8     store: {
 9         fields: ['id', 'name', 'sex', 'age', 'birthday'],
10         proxy: {
11             type: 'ajax',
12             url: 'users',
13             reader: {
14                 type: 'json', //Ext.data.reader.Json解析器
15                 root: 'users'
16             }
17         },
18         autoLoad: true
19     },
20     columns: [ //配置表格列
21         new Ext.grid.RowNumberer(), //表格行号组件
22         {
23             header: "编号",
24             width: 80,
25             dataIndex: 'id',
26             sortable: true
27         }, {
28             header: "姓名",
29             width: 80,
30             dataIndex: 'name',
31             sortable: true
32         }, {
33             header: "年龄",
34             width: 80,
35             dataIndex: 'age',
36             sortable: true
37         }, {
38             header: "性别",
39             width: 80,
40             dataIndex: 'sex',
41             sortable: true
42         }, {
43             header: "生日",
44             width: 80,
45             dataIndex: 'birthdate',
46             sortable: true
47         }
48     ]
49 });

应该改为这个：

 1 Ext.define('HT.view.Grid', {
 2     extend: 'Ext.grid.Panel',
 3     title: '人员列表',
 4 
 5     initComponent: function() {
 6         Ext.apply(this, {
 7             width: 400,
 8             height: 170,
 9             frame: true,
10             store: {
11                 fields: ['id', 'name', 'sex', 'age', 'birthday'],
12                 proxy: {
13                     type: 'ajax',
14                     url: 'users',
15                     reader: {
16                         type: 'json', //Ext.data.reader.Json解析器
17                         root: 'users'
18                     }
19                 },
20                 autoLoad: true
21             },
22             columns: [ //配置表格列
23                 new Ext.grid.RowNumberer(), //表格行号组件
24                 {
25                     header: "编号",
26                     width: 80,
27                     dataIndex: 'id',
28                     sortable: true
29                 }, {
30                     header: "姓名",
31                     width: 80,
32                     dataIndex: 'name',
33                     sortable: true
34                 }, {
35                     header: "年龄",
36                     width: 80,
37                     dataIndex: 'age',
38                     sortable: true
39                 }, {
40                     header: "性别",
41                     width: 80,
42                     dataIndex: 'sex',
43                     sortable: true
44                 }, {
45                     header: "生日",
46                     width: 80,
47                     dataIndex: 'birthdate',
48                     sortable: true
49                 }
50             ]
51         }),
52         this.callParent(arguments);
53     }
54 
55 });