Extjs4使用mvc模式，封装Store层的ArrayStore无法动态加载后台数据

store层代码

 Ext.define('Desktop.store.function.FunctionStore',{
    extend: 'Ext.data.ArrayStore',
    requires:['Desktop.model.function.UserModel'],
    model: 'Desktop.model.function.UserModel',
    autoLoad: true,
    proxy:{
        type:'ajax',
        url:'index/userFindAll.do',
        reader: {
            type: 'json'
        }
    }
});

view层代码

 Ext.define('Desktop.view.function.FunctionGrid', {
    extend: 'Ext.panel.Panel',
    requires: ['Desktop.store.function.FunctionStore'],
    alias: 'widget.itgrid',
    itemId: 'sampleTest',
    layout: {
        type: 'border'
    },
    title: '表单',
    initComponent: function() {
        var me = this;
        var store = Ext.create('Desktop.store.function.FunctionStore');
        store.load();
//        var store = Ext.create('Ext.data.ArrayStore',{
//          model:'Desktop.model.function.UserModel',
//          proxy:{
//              type:'ajax',
//              url:'index/userFindAll.do'
//          }
//        });
//        store.load();
        //声明行编辑器插件
        var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToMoveEditor: 1,
            autoCancel: false
        });
        //复选框插件
        var sm = Ext.create('Ext.selection.CheckboxModel');
        Ext.applyIf(me, {
            items: [{
                id:'itl',
                xtype:'gridpanel',
                bodyPadding: 0,
                region: 'center',
                columns: [{
                    text: 'id',
                    width: 97,
                    sortable: true,
                    renderer: this.change,
                    dataIndex: 'id'
                },{
                    text: 'groupId',
                    width: 97,
                    sortable: true,
                    renderer: this.pctChange,
                    dataIndex: 'groupId'
                },{
                    text: 'userName', 
                    locked: true,
                    width: 200,
                    sortable: false,
                    dataIndex: 'userName'
                },{
                    text: 'userPass',
                    width: 97,
                    sortable: false,
                    dataIndex: 'userPass'
                },{
                    text: 'userDes',
                    width: 97,
                    sortable: false,
                    dataIndex: 'userDes'
                },{
                    text: 'modifyTime',
                    width: 97,
                    sortable: false,
                    dataIndex: 'modifyTime'
                },{
                    text: 'userPass',
                    width: 97,
                    sortable: false,
                    dataIndex: 'userPass'
                },{
                    text: 'userDes',
                    width: 97,
                    sortable: false,
                    dataIndex: 'userDes'
                },{
                    text: 'modifyTime',
                    width: 97,
                    sortable: false,
                    dataIndex: 'modifyTime'
                },{
                    text: 'userPass',
                    width: 97,
                    sortable: false,
                    dataIndex: 'userPass'
                },{
                    text: 'userDes',
                    width: 97,
                    sortable: false,
                    dataIndex: 'userDes'
                },{
                    text: 'userPass',
                    width: 97,
                    sortable: false,
                    dataIndex: 'userPass'
                },{
                    text: 'userDes',
                    width: 97,
                    sortable: false,
                    dataIndex: 'userDes'
                }],
                store: store,
                selModel: sm
            }]
        }); 
        me.callParent(arguments);
    },

    change: function (val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    },
    pctChange: function (val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

});

还是自己回答吧，没有悬赏的分。。
我发现把extend：继承的ArrayStore改成Store就好了，具体原因没时间研究，刚学了两个星期，工作需要不得不先做。同时我还发现了extjs4版本的gridpanel中tabpanel中嵌入gridpanel，如果多列，同时设置某列locked，就会出现格式错位，后来使用Store就没有这个问题了，不知道为什么ArrayStore会有这个问题。

在线等，求大神解惑！！！