NHibernate3.3.0GA+ExtJS4.1.1+ASP.NET MVC3.0权限管理系统（3）--Grid编辑

最新推荐文章于 2022-01-18 22:13:52 发布

置顶 mengxinjinglong

最新推荐文章于 2022-01-18 22:13:52 发布

阅读量1.5k

点赞数 1

分类专栏： NHibernate3.3.0GA+ExtJS4.1.1+ASP.NET MVC3.0权限管理系统

本文链接：https://blog.csdn.net/mengxinjinglong/article/details/8101677

版权

NHibernate3.3.0GA+ExtJS4.1.1+ASP.NET MVC3.0权限管理系统专栏收录该内容

4 篇文章 0 订阅

订阅专栏

框架页做好后，接下来我们开始Grid的demo吧，在管理系统中信息的增删改查是家常便饭，也是最多的操作了。好了，还是先上图，再贴代码。

以上是关于菜单编辑的界面，代码中我们也会包含tab添加的代码，这在上一章中没有贴出代码。

按照MVC，按照模块划分，权限管理模块，我们统一放在SystemManage文件下，具体的文件结构如下：

主界面显示部分采用的tab部分，是通过左侧的tree点击事件来实现的，实现代码为（2）中注释掉的部分，如下：

Ext.define('RoleManage.controller.WestTree', {
    extend: 'Ext.app.Controller',
    stores: ['WestTree'],
    models: ['WestTree'],
    views: ['WestTree'],

    init: function () {
	//初始化部分，下面是部分是给菜单绑定单击事件，接下来会用，这里先注释
        this.control({
            'WestTree': {//树节点单击事件
              itemclick: function (tree, record, item, index, e, eOpts) {
                    var tab = Ext.getCmp('CenterTabPanel')[0];//根据id获取组件对象..
                    var currentTab = tab.getComponent(tabID);//如果没有找到相关id的tab，向tab组件新增一个id为tabID的选项卡
                    if (!currentTab) {
                        tab.add(
                        {
                            id: record.data.url,//节点菜单的url作为选项卡的id
                            title: record.data.text,
                            xtype: record.data.url,
                            closable: true,
                        }).show();
                    } else {
                        tab.setActiveTab(currentTab);
                    }
                }
          }
          });
    }

});

A.view/SystemManage/menu/List.js

Ext.define('RoleManage.view.SystemManage.menu.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.menulist',
    id: 'menulist',
    title: '菜单列表',
    region: 'center',
    store: 'SystemManage.Menu',
    tbar:  Ext.create('Ext.Toolbar', {//添加工具栏按钮--新增，修改，删除按钮
        xtype: 'toolbar',
        items: [
        { id: 'add', action: 'add', text: '新增菜单', iconCls: 'add'}, '-',
        { id: 'edit', action: 'edit', text: '修改菜单', iconCls: 'option' }, '-',
        { id: 'delete', action: 'delete', text: '删除菜单', iconCls: 'remove' }
    ]}),
    initComponent: function () {//设置Grid显示信息列
        this.columns = [
              { header: '编号', dataIndex: 'id', flex: 1 },
              { header: '菜单名称', dataIndex: 'vcName', flex: 1 },
              { header: '地址', dataIndex: 'vcUrl', flex: 1 }
        ];
        this.callParent(arguments);
    }
});

B.view/SystemManage/menu/Edit.js

Ext.define('RoleManage.view.SystemManage.menu.Edit', {
    extend: 'Ext.window.Window',
    alias: 'widget.menuedit',
    title: '菜单编辑',
    layout: 'fit',
    autoShow: true, 
    initComponent: function () {
        this.items = [{
            xtype: 'form',
            frame:true,
            items: [{
                xtype: 'textfield',
                name: 'id',
                fieldLabel: '编号'
            },
                {
                    xtype: 'textfield',
                    name: 'vcName',
                    fieldLabel: '菜单名称'
                },
                {
                    xtype: 'textfield',
                    name: 'vcName',
                    fieldLabel: '上级菜单'
                },
                {
                    xtype: 'textfield',
                    name: 'iParent',
                    fieldLabel: '上级菜单'
                },
                {
                    xtype: 'textfield',
                    name: 'vcPictureUrl',
                    fieldLabel: '图片URL'
                },
                {
                    xtype: 'textfield',
                    name: 'iGroup',
                    fieldLabel: '序号'
                },
                {
                    xtype: 'textfield',
                    name: 'vcUrl',
                    fieldLabel: '地址URL'
                }
                ]
        }];
        this.buttons = [{
            text: '保存',
            action: 'save'
        },
            {
                text: '取消',
                scope: this,
                handler: this.close
            }];
        this.callParent(arguments);
    }
});

C.controller/SystemManage/Menu.js

Ext.define('RoleManage.controller.SystemManage.Menu', {
    extend: 'Ext.app.Controller',
    stores: ['SystemManage.Menu'],
    models: ['SystemManage.Menu'],

    views: [
         'SystemManage.menu.List',
         'SystemManage.menu.Edit'
    ],

    init: function () {
        //添加按钮时间
        this.control({
          //Grid的行双击事件，调用方法为editMenu
            'menulist': {
                itemdblclick: this.editMenu
            },
          //添加按钮事件，调用方法为showAddMenu
            'menulist button[action=add]': {
                click: this.showAddMenu
            },
           //修改事件，调用方法为showEditMenu
            'menulist button[action=edit]': {
                click: this.showEditMenu
            },
          // 删除按钮事件，调用方法为showDeleteMenu
            'menulist button[action=delete]': {
                click: this.showDeleteMenu
            },
          // 编辑界面保存按钮事件
            'menuedit button[action=save]': {
                click: this.updateMenu
            }
        });
    },
    editMenu: function (grid, record) {
       //通过xtype创建实例
        var view = Ext.widget('menuedit');
       //读取双击选中行的id数据
        var id = record.get('id');
         view.down('form').load({
                frame: true,
                waitMsg: '正在加载数据请稍后', //提示信息
                   waitTitle: '提示' //标题
                // url: 'Menu/GetDataByID', //请求的url地址
                // params: { id: id },
              // method: 'GET', //请求方式
                //failure: function (form, action) {//加载失败的处理函数
                //   Ext.Msg.alert('提示', '数据加载失败');
              //}
            });
            view.show();
    },
    showAddMenu: function () {
        var view = Ext.widget('menuedit');
        var form = view.down('form');
        form.load({
            frame: true,
            waitMsg: '正在加载数据请稍后', //提示信息
            waitTitle: '提示' //标题
        });
        view.show();
    },
    showEditMenu: function () {
        var objGrid = Ext.getCmp('menulist');//根据向ConterTabPanel添加的Grid组件id读取对象
        var data = objGrid.getSelectionModel().getSelection();
        if (data.length == 0) {
            Ext.Msg.alert('提示', '请至少选择一条数据！');
        } else {
            var s = data[0].get('id');
            var view = Ext.widget('menuedit');
            var form = view.down('form');
            form.load({
                frame: true,
                waitMsg: '正在加载数据请稍后', //提示信息
                   waitTitle: '提示' //标题
                //url: 'Menu/GetDataByID', //请求的url地址
                //params: { id: s },
              //method: 'GET', //请求方式
                //failure: function (form, action) {//加载失败的处理函数
                //  Ext.Msg.alert('提示', '数据加载失败');
              //}
            });
            view.show();

        }
    },
    showDeleteMenu: function () {

    },
    updateMenu: function (button) {
        var win = button.up('window');
        form = win.down('form');
        form.form.submit({
            waitMsg: '',
            waitTitle: '',
            url: 'Menu/Edit',
            method: 'POST'
        });
    }

});

D.model/SystemManage/Menu.js

Ext.define('RoleManage.model.SystemManage.Menu', {
    extend: 'Ext.data.Model',
    fields: ['id','vcName','iParent','vcPictureUrl','iGroup','vcUrl']
});

E.store/SystemManage/Menu.js

Ext.define('RoleManage.store.SystemManage.Menu', {
    extend: 'Ext.data.Store',
    model: 'RoleManage.model.SystemManage.Menu',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '../../data/menuInfo.json',
        reader: {
            type: 'json',
            root: 'menus',
            successProperty: 'success'
        }
    }
});

在添加了以上的js文件之后，最后我们还需要将定义的controller在app.js中进行加载。

Ext.Loader.setConfig({ enabled: true });
Ext.application({
    name: 'RoleManage',
    autoCreateViewport: true,
    appFolder: 'app', //应用文件夹名字
    
    controllers: [//加载controller文件夹下定义controllers的WestTree,SystemManage.Menu
         'WestTree','SystemManage.Menu'
    ]

});

当项目逐渐完善的过程中，我们需要的controller也会增多，那每添加一个controller，我们就要在app.js中修改一次，这样不仅麻烦，而且当controller量很大的时候，app.js中的内容就会显得很凌乱，阅读性会降低。那么，我们是不是可以动态的加载controller呢？

推荐下自己的淘宝小店女装：诗语情裳