extjs4.2之页面框架搭建完整步骤（二）

来源：互联网发布：标签打印软件有哪些编辑：程序博客网时间：2024/04/28 10:26

在一里完成了框架的基本搭建，今天来实现功能

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();    }});
4、在controller里的Test.js里修改内容
Ext.define('RCP.controller.Test',{    extend:'Ext.app.Controller',    requests:[        'Ext.window.Window'    ],
//------------------添加model和view-------------------------------------------------    models:[        'Customer@RCP.model'    ],    views:[        'List@RCP.view.customer'    ],
//--------------添加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;        }    }});

0 0