备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

对于Ext.data.Store 介紹 与总结,以及对以前代码的重构与优化

2013-06-25 619
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 对于Ext.data.Store 一直不是很了解,不知道他到底是干嘛的有哪些用处,在实际开发中也由于不了解也走了不少弯路, store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表.

     对于Ext.data.Store 一直不是很了解,不知道他到底是干嘛的有哪些用处,在实际开发中也由于不了解也走了不少弯路,

store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表.

　　由于刚学不是太懂,都是比葫芦画瓢,东搬西畴的去完成功能.程序思路都是自己想象的,对于rest方式的增删改查全是采用另外一种方式去实现的,最后研究发现其实,store都

已经有了这些函数,根本不用自己去实现.下面看下以前所写的代码:这是model,store ,gridpanel

var store;
Ext.onReady(function () {
    //接口管理model
    Ext.define('InterfaceModel', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'ID',
            type: 'int',
            useNull: true
        }, 'FunctionCode', 'FunctionName', 'IsEnabled', 'Invoker', 'Module'],
        validations: [{
            type: 'length',
            field: 'FunctionCode',
            min: 1
        }, {
            type: 'length',
            field: 'FunctionName',
            min: 1
        }, {
            type: 'length',
            field: 'Invoker',
            min: 1
        }]
        //        proxy: {
        //            type: 'rest',
        //            url: 'api/InterfaceManage'
        //        }

    });

    //接口数据加载
    store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        pageSize: 20,
        model: 'InterfaceModel',
        proxy: {
            type: 'rest',
            url: 'api/InterfaceManage',
            reader: {
                type: 'json',
                root: 'Data',
                totalProperty: 'TotolRecord'
            },
            writer: {
                type: 'json'
            }
        }

    });

    //删除单条接口信息
    function OnDelete(id) {
        $.ajax({
            type: 'DELETE',
            url: '/api/InterfaceManage/' + id,
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (results) {
                store.load();
            }
        })
    }

    //单选checkbox模式
    var selModel = Ext.create('Ext.selection.CheckboxModel', {
        width: 55,
        injectCheckbox: 1,
        listeners: {
            selectionchange: function (sm, selections) {
                grid.down('#removeButton').setDisabled(selections.length === 0);
                grid.down('#editButton').setDisabled(selections.length === 0);
            }
        }
    });


    //接口数据渲染
    var grid = Ext.create('Ext.grid.GridPanel', {
        id: 'node_Interface',
        width: 400,
        height: 300,
        frame: true,
        title: '接口管理',
        store: store,
        iconCls: 'icon-user',
        selModel: selModel,
        border: false, //grid的边界 

        listeners: {
            itemdblclick: function (grid, rowIndex, e) {

                var record = grid.getSelectionModel().getSelection()[0];
                if (record) {
                    UpdateInterface();

                    //更新功能
                    Ext.getCmp('BtnSave_newsinfo').on('click', function () {
                        OnUpdate(record.get('ID'));
                    });
                    Ext.getCmp('code').setValue(record.get('FunctionCode'));
                    Ext.getCmp('name').setValue(record.get('FunctionName'));
                    Ext.getCmp('isEnable').setValue(record.get('IsEnabled'));
                    Ext.getCmp('Invoker').setValue(record.get('Invoker'));
                    Ext.getCmp('Module').setValue(record.get('Module'));
                }
                else {
                    Ext.Msg.alert('提示', '请选择要编辑的内容');
                }
            }
        },
        columns: [Ext.create('Ext.grid.RowNumberer', { width: 35, text: '序号' }), {
            text: '编号',
            width: 40,
            sortable: true,
            hideable: false,
            dataIndex: 'ID'
        }, {
            text: '接口代码',
            width: 80,
            sortable: true,
            dataIndex: 'FunctionCode',
            field: {
                xtype: 'textfield'
            }
        }, {
            header: '接口名称',
            width: 120,
            sortable: true,
            dataIndex: 'FunctionName',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: '是否启用',
            width: 80,
            // xtype: 'checkcolumn',
            dataIndex: 'IsEnabled',
            renderer: function boolFromValue(val) {

                if (val) {
                    return '<img src=../../Content/images/true.png>'
                }
                else {
                    return '<img src=../../Content/images/false.png>'
                }
            }
        }, {
            text: '调用者',
            width: 100,
            sortable: true,
            dataIndex: 'Invoker',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: '所属模块',
            width: 100,
            sortable: true,
            dataIndex: 'Module',
            field: {
                xtype: 'textfield'
            }
        }],
        bbar: Ext.create('Ext.PagingToolbar', {
            plugins: [new Ext.ux.ComboPageSize({})],
            store: store, //---grid panel的数据源
            displayInfo: true,
            displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
            emptyMsg: "没有数据"
        }),
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: '添加',
                iconCls: 'icon-add',
                handler:
                function () {
                    AddInterface();
                    store.reload();
                }
            }, '-', {
                itemId: 'removeButton',
                text: '删除',
                iconCls: 'icon-delete',
                disabled: true,
                handler: function () {
                    var selection = grid.getSelectionModel().getSelection();
                    var len = selection.length;

                    if (len == 0) {
                        Ext.Msg.alert('提示', '请先选择要删除的数据');
                    }
                    else {
                        Ext.Msg.show({
                            title: '系统确认',
                            msg: '你是否确定删除这些数据！',
                            buttons: Ext.Msg.YESNO,
                            scope: this,
                            fn: function (btn) {
                                if (btn == 'yes') {
                                    for (var i = 0; i < len; i++) {
                                        var id = selection[i].get('ID');
                                        OnDelete(id);
                                        //console.log(selection[i]);
                                        //store.remove(selection[i]);
                                    }
                                }
                            }, icon: Ext.MessageBox.QUESTION

                        });
                    }
                }
            }, '-', {
                itemId: 'editButton',
                text: '编辑',
                disabled: true,
                iconCls: 'icon-edit',

                handler:
                             function () {
                                 var record = grid.getSelectionModel().getSelection()[0];

                                 if (record) {
                                     UpdateInterface();

                                     //更新功能
                                     Ext.getCmp('BtnSave_newsinfo').on('click', function () {
                                         OnUpdate(record.get('ID'));
                                     });
                                     Ext.getCmp('code').setValue(record.get('FunctionCode'));
                                     Ext.getCmp('name').setValue(record.get('FunctionName'));
                                     Ext.getCmp('isEnable').setValue(record.get('IsEnabled'));
                                     Ext.getCmp('Invoker').setValue(record.get('Invoker'));
                                     Ext.getCmp('Module').setValue(record.get('Module'));
                                 }
                                 else {
                                     Ext.Msg.alert('提示', '请选择你要编辑的内容');
                                 }
                             }
            }]

        }]
    });

添加函数

// Copyright : .  All rights reserved.
// 文件名：AddInterfac.js
// 文件描述：添加接口信息
//-----------------------------------------------------------------------------------
// 创建者：
// 创建时间：2013-06-20
//====================================================================================

Ext.require([
    'Ext.form.*',
    'Ext.layout.container.Absolute',
    'Ext.window.Window'
]);

var win;//窗口
function  AddInterface() {
    var form = Ext.create('Ext.form.Panel', {
        
        border: false,
        bodyPadding: 20,
        border: 1, //边框
        frame: true, //
        defaults: {//统一设置表单字段默认属性
            //autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
            labelSeparator: '：', //分隔符
            labelWidth: 100, //标签宽度
            width: 350, //字段宽度
            allowBlank: false, //是否允许为空
            blankText: '不允许为空', //若设置不为空，为空时的提示
            labelAlign: 'right', //标签对齐方式
            msgTarget: 'qtip'          //显示一个浮动的提示信息
            //msgTarget :'title'       //显示一个浏览器原始的浮动提示信息
            //msgTarget :'under'       //在字段下方显示一个提示信息
            //msgTarget :'side'        //在字段的右边显示一个提示信息
            //msgTarget :'none'        //不显示提示信息
            //msgTarget :'errorMsg'    //在errorMsg元素内显示提示信息
        },


        items: [{
            xtype: 'textfield',
            fieldLabel: '接口代码',
            id: 'code',
            anchor: '90%'
        },
                        {
                            xtype: 'textfield',
                            fieldLabel: '接口名称',
                            id:'name',
                            name:'name',
                            anchor: '90%'
                        },
                        {
                            xtype: 'checkbox',
                          
                            fieldLabel: '是否启用',
                            boxLabel: '',
                            id: 'isEnable',
                            anchor: '90%'
                        },
                        {
                            xtype: 'textfield',
                            fieldLabel: '调 用 者',
                            id: 'Invoker',
                            anchor: '90%'
                        },
                        {
                            xtype: 'textfield',
                            fieldLabel: '所属模块',
                            id: 'Module',
                            anchor: '90%'
                        }
           ]
    });

     win = Ext.create('Ext.window.Window', {
        autoShow: true,
        title: '接口添加',
        width: 400,
        height: 250,
        minWidth: 300,
        minHeight: 200,
        buttonAlign: 'center',
        modal: true,
        resizable: false,
        layout: 'fit',
        plain: true,
        items: form,

        buttons: [{
            text: '确定',
            handler: function () {
                OnInsert();
            }
        }, {
            text: '取消',
            handler: function () {
                win.close();
            }
        }]
    });
};

//添加接口函数
function OnInsert(evt) {
    var functionCode = Ext.getCmp('code').getValue();
    var FunctionName = Ext.getCmp('name').getValue();
    var IsEnabled = Ext.getCmp('isEnable').getValue();
    var Invoker = Ext.getCmp('Invoker').getValue();
    var module = Ext.getCmp('Module').getValue();

    var data = '{"ID":"' + '' + '","FunctionCode":"' + functionCode + '","FunctionName":"' + FunctionName + '","IsEnabled":"' + IsEnabled + '","Invoker":"' + Invoker + '","Module":"' + module + '"}';

    $.ajax({
        type: 'POST',
        url: '/api/InterfaceManage',
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (results) {
            Ext.Msg.alert('添加提示', '添加成功！');
            store.reload();
            win.close();
        }
    })

}

修改函数:

// Copyright : .  All rights reserved.
// 文件名：UpdateInterface.js
// 文件描述：更新接口信息
//-----------------------------------------------------------------------------------
// 创建者：
// 创建时间：2013-06-20
//====================================================================================

Ext.require([
    'Ext.form.*',
    'Ext.layout.container.Absolute',
    'Ext.window.Window'
]);
var win;
function UpdateInterface() {
    var form = Ext.create('Ext.form.Panel', {

        border: false,
        bodyPadding: 20,
        border: 1, //边框
        frame: true, //
        defaults: {//统一设置表单字段默认属性
            //autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
            labelSeparator: '：', //分隔符
            labelWidth: 120, //标签宽度
            width: 350, //字段宽度
            allowBlank: false, //是否允许为空
            blankText: '不允许为空', //若设置不为空，为空时的提示
            labelAlign: 'right', //标签对齐方式
            msgTarget: 'qtip'          //显示一个浮动的提示信息
            //msgTarget :'title'       //显示一个浏览器原始的浮动提示信息
            //msgTarget :'under'       //在字段下方显示一个提示信息
            //msgTarget :'side'        //在字段的右边显示一个提示信息
            //msgTarget :'none'        //不显示提示信息
            //msgTarget :'errorMsg'    //在errorMsg元素内显示提示信息
        },


        items: [{
            xtype: 'textfield',
            fieldLabel: '接口代码',
            id: 'code',
            anchor: '90%'
        },
                        {
                            xtype: 'textfield',
                            fieldLabel: '接口名称',
                            id: 'name',
                            name: 'name',
                            anchor: '90%'
                        },
                        {
                            xtype: 'checkbox',

                            fieldLabel: '是否启用',
                            boxLabel: '',
                            id: 'isEnable',
                            anchor: '90%'
                        },
                        {
                            xtype: 'textfield',
                            fieldLabel: '调 用 者',
                            id: 'Invoker',
                            anchor: '90%'
                        },
                        {
                            xtype: 'textfield',
                            fieldLabel: '所属模块',
                            id: 'Module',
                            anchor: '90%'
                        }
           ]
    });

    win = Ext.create('Ext.window.Window', {
        autoShow: true,
        title: '接口更新',
        width: 400,
        height: 250,
        resizable: false,
        buttonAlign: 'center',
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        plain: true,
        items: form,
        modal: true,
        buttons: [{
            text: '更新',
            id: 'BtnSave_newsinfo'

        }, {
            text: '取消',
            handler: function () {
                win.close();
            }
        }]
    });
};

//更新数据
function OnUpdate(id) {
    //获取要更新的数据
    var functionCode = Ext.getCmp('code').getValue();
    var FunctionName = Ext.getCmp('name').getValue();
    var IsEnabled = Ext.getCmp('isEnable').getValue();
    var Invoker = Ext.getCmp('Invoker').getValue();
    var module = Ext.getCmp('Module').getValue();

    var data = '{"ID":"' + id + '","FunctionCode":"' + functionCode + '","FunctionName":"' + FunctionName + '","IsEnabled":"' + IsEnabled + '","Invoker":"' + Invoker + '","Module":"' + module + '"}';

    $.ajax({
        type: 'PUT',
        url: '/api/InterfaceManage/' + id,
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (results) {
            Ext.Msg.alert('提示', '更新成功！');
            store.reload();
            win.close();
        }
    })

}

删除函数,包含到上面那部分代码中了.下面我们一步一步来优化代码:

  1. 修改删除函数:
    原先的OnDelete函数全部去掉,在相应的删除事件中添加

    store.remove(selection[i]);

    这样他就会自动调用rest对应的delete方式,将要删除的对象传到后台.还没完,使用OnDelete函数传到后台的是id,而使用remove传到后台的是model对象,所以后台

    接受的参数需要进行相应的改变.

  2. 修改添加函数:去掉了重新写的往后台传值方式,直接调用Rest的Post方式,修改后的OnInsert函数如下:
    //添加接口函数
function OnInsert(evt) {
    var functionCode = Ext.getCmp('code').getValue();
    var FunctionName = Ext.getCmp('name').getValue();
    var IsEnabled = Ext.getCmp('isEnable').getValue();
    var Invoker = Ext.getCmp('Invoker').getValue();
    var module = Ext.getCmp('Module').getValue();

    var newInterfaceModel = new InterfaceModel(
    {
        ID: '',
        FunctionCode: functionCode,
        FunctionName: FunctionName,
        IsEnabled: IsEnabled,
        Invoker: Invoker,
        Module: module
        });

    store.insert(0, newInterfaceModel);
    store.reload();
    win.close();
}

    这种方式直接调用store的insert()方法,insert方法所对应的就是post方式.



  3. 对update函数的修改:

文章标签：
数据格式
JSON
网络架构
API
前端开发
容器
存储
幕三少
目录
相关文章
Zp
|
JavaScript
Vue里的data声明方式：data{},data(){}
Vue里的data声明方式：data{},data(){}
Zp
166 0
游客gjmdmyngegq2k
|
前端开发
组件中的data为什么是个函数
前端面试
游客gjmdmyngegq2k
48 0
一颗优雅草科技
|
前端开发
优雅草蜻蜓k知识付费系统前端打包报错问题 前端打包报错 文件查找失败：’vue-flip-page’ 文件查找失败：’vue-flip-page’ at pages\read\index.vue:12
优雅草蜻蜓k知识付费系统前端打包报错问题 前端打包报错 文件查找失败：’vue-flip-page’ 文件查找失败：’vue-flip-page’ at pages\read\index.vue:12
一颗优雅草科技
363 0
优雅草蜻蜓k知识付费系统前端打包报错问题 前端打包报错 文件查找失败：’vue-flip-page’ 文件查找失败：’vue-flip-page’ at pages\read\index.vue:12
前端歌谣
hook+ts业务开发思路2-完成input组件的编写
hook+ts业务开发思路2-完成input组件的编写
前端歌谣
62 0
hook+ts业务开发思路2-完成input组件的编写
天行无忌
|
JSON JavaScript 前端开发
Ember Data 之模型定义
前面在《 Ember.js 项目开发之 Ember Data 》介绍了Ember Data，本文将继续介绍模型的定义。
天行无忌
72 0
天行无忌
|
存储 JSON 前端开发
Ember Data 之记录查询
前面在《Ember.js 项目开发之 Ember Data》介绍了Ember Data 和 《Ember Data 之模型定义》，本文将继续介绍记录操作。
天行无忌
102 0
inzaghi1984
重构——29以数据类取代记录（Replace Record with Data Class）
以数据类取代记录（Replace Record with Data Class）：你需要面对传统编程环境中的记录结构；为该记录创建一个“哑”数据对象
inzaghi1984
1511 0
pandamonica
|
数据格式 JSON 前端开发
Ext6中从Component如何找到Store和Model
这个问题挺傻的，也很基础。View部分的代码 Ext.define('RUKU.view.hr.HRUserList', { extend: 'Ext.grid.Panel', xtype: 'hruserlist', // 引入store requires:[ 'RUKU.
pandamonica
1728 0
inzaghi1984
重构——23复制“被监视数据”（Duplicate Observed Data）
复制“被监视数据”（Duplicate Observed Data）：Observer/Observable模式。你有一些领域数据置身于gui控件中，而领域函数需要访问这些数据；将该对象复制到一个领域对象中。建立一个Observer模式，用以同步领域对象和Gui对象内的重复数据
inzaghi1984
1670 0
科技小先锋
|
JavaScript
extjs 之Ext.data.Store变更单行记录值【修改】
科技小先锋
1389 0