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

最新推荐文章于 2021-06-09 16:08:24 发布

天使没吃饱

最新推荐文章于 2021-06-09 16:08:24 发布

阅读量1.4k

点赞数

分类专栏： extjs

本文链接：https://blog.csdn.net/u011493599/article/details/45718881

版权

extjs 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

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

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