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

灰太狼 2022-08-08 09:18 83阅读 0赞

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

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;
            }
        }
    });