在一里完成了框架的基本搭建，今天來實現功能

1、在model建立Customer.js

Ext.define('RCP.model.Customer', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'cusId',
            type: 'string'
},
        {
            name: 'cusName',
            type: 'string'
},
        {
            name: 'passWord',
            type
 
: 'string'
},
        {
            name :'mobile',
            type:'string'
},
        {
            name:'email',
            type:'string'
}

    ]
});

2、在view裡建立customer資料夾，在customer資料夾裡建立List.js

Ext.define('RCP.view.customer.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.customerList'
 
,

    padding: 5,
    autoScroll: true,
    title: '客戶資訊',
    emptyText: '無客戶資訊',

    initComponent: function () {
        var me = this;

        var store = Ext.create('Ext.data.Store', {
            model: 'RCP.model.Customer',
            proxy: {
                type: 'ajax',
                url
 
: 'customer/listCustomerAction.action',
                reader: {
                    type: 'json',
                    root: 'customer',  //後臺傳到前臺全域性變數
                    successProperty: 'success'
}
            },

            autoLoad: true
});

        this.columns = [
            {
                header: '使用者名稱稱',
                dataIndex: 'cusName',
                flex: 1
},
            {
                header: '郵箱',
                dataIndex: 'email',
                flex: 1
},
            {
                header:'電話',
                dataInde:'mobile',
                flex:1
}

        ];

        this.store = store;


        var refreshAction = Ext.create('Ext.Action', {
            text: '重新整理',
            handler: function () {
                store.reload();
            }
        });

        this.dockedItems = [
            {
                dock: 'top',
                xtype: 'toolbar',
                items: [


                    refreshAction
]
            }
        ];



        this.callParent(arguments);
    }
});

3、修改Navigation.js內容

Ext.define('RCP.view.Navigation', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.navigation',
    title: '功能導航',
    rootVisible: false,
    lines: false,
    useArrows: true,

      initComponent: function () {
        Ext.apply(this, {
            store: new Ext.data.TreeStore({

                root: {
                    expanded: true,
                    children: [
                        {
                            text: '員工資訊管理',
                            expanded: true,
                            children: [
                                { id: 'customerList', text: '員工資訊維護', leaf: true }
                            ]
                        },

                        {
                            text: '系統管理',
                            expanded: true,
                            children: [
                                { id: 'usersList', text: '使用者管理', leaf: true },
                                { id: 'programTreeList', text: '功能管理', leaf: true },
                                { id: 'roleList', text: '角色管理', leaf: true }
                            ]
                        }
                    ]
                }
            }),
            viewConfig: {               //可拖動
                plugins: {
                    ptype: 'treeviewdragdrop',
                    containerScroll: true
}
            }
        });

        this.callParent();
    }

});

Ext.define('RCP.controller.Test',{
    extend:'Ext.app.Controller',
    requests:[
        'Ext.window.Window'
],

//------------------新增model和view-------------------------------------------------
    models:[
        '[email protected]'
],
    views:[
        '[email protected]'
],

//--------------新增model和view------------------------------------------------------
    refs: [
        {
            ref: 'viewport',
            selector: 'viewport'
},
        {
            ref: 'navigation',
            selector: 'navigation'
},
        {
            ref: 'contentPanel',
            selector: 'contentPanel'
}
    ] ,

//----------------導航欄點選事件-----------------------------------------
    init: function () {
        this.control({
            'navigation': {
                selectionchange: 'onNavSelectionChange'
}
        });
    },

    onNavSelectionChange: function (selModel, records) {
        alert("c");
        var record = records[0];
        var text = record.get('text');
        var xtype = record.get('id');
        var alias = 'widget.' + xtype;
        var contentPanel = this.getContentPanel();
        var cmp;
        if (xtype) {
            contentPanel.removeAll(true);

            var className = Ext.ClassManager.getNameByAlias(alias);
            var viewClass = Ext.ClassManager.get(className);

            cmp = new viewClass();
            contentPanel.add(cmp);

            cmp.show();

            contentPanel.setTitle(text);

            document.title = document.title.split(' - ')[0] + ' - ' + text;
            location.hash = xtype;
        }
    }
});