AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2013-06-25 649
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 对于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
前端开发
容器
存储
幕三少
目录
相关文章
不吃核桃
|
4月前
LangChain 构建问题之定义extract_local_group_size工具如何解决
LangChain 构建问题之定义extract_local_group_size工具如何解决
不吃核桃
29 0
前端歌谣
hook+ts业务开发思路2-完成input组件的编写
hook+ts业务开发思路2-完成input组件的编写
前端歌谣
94 0
hook+ts业务开发思路2-完成input组件的编写
inzaghi1984
重构——29以数据类取代记录（Replace Record with Data Class）
以数据类取代记录（Replace Record with Data Class）：你需要面对传统编程环境中的记录结构；为该记录创建一个“哑”数据对象
inzaghi1984
1566 0
pandamonica
|
JavaScript 前端开发 测试技术
ExtJS前端实现过程
从无到有的实现过程
pandamonica
1963 0
技术小甜
|
Linux Windows 存储
[深入理解文件系统之十一] ext2中data和meta-data的数据一致性
技术小甜
1468 0
科技小先锋
|
JavaScript 数据库
extjs 之Ext.data.Store[Grid]操作(增删)
科技小先锋
1318 0
技术mix呢
|
XML JSON JavaScript
Ext Js简单Data Store创建及使用
技术mix呢
1294 0
天飞
|
JSON 数据格式 网络架构
EXT.JS6中的model,store,proxy的一些用法
//one-to-one Ext.define('Address', { extend: 'Ext.data.Model', fields: [ 'address', 'city', 'state', 'zipcode' ] }); Ext.
天飞
1364 0
天飞
Ext.js的store里放model，还是field？
按别人的经验， 一般来说，如果通用性强的应用，STORE里存放MODEL，便于重用代码。 如果通用性较弱的（报告，图表），则考虑使用field进行定制。
天飞
889 0
天飞
EXT.JS的PROXY放在哪里，STORE放在哪里，绝对是个技术活儿啊。
我理解的是，单独的STORE，会在应用程序开始时就加载， 而VIEWMODEL的STORE，会在VIEW加载时才开始加载。 PROXY放在STORE，则会在调用这个STORE的VIEW才能请求服务器数据。
天飞
1019 0

热门文章

最新文章

  • 1
    基于区块链的机器学习模型创建方案
  • 2
    性能的极致,Rust的加持,Zed-Dev编辑器快速搭建Python3.10开发环境
  • 3
    首届Global VR Hackathon完结 全球前三甲诞生
  • 4
    我的博客即将入驻“云栖社区”，诚邀技术同仁一同入驻。
  • 5
    iptables
  • 6
    DevExpress 10.2.4系列-ASPxListBox根据列值不同设置不同图标
  • 7
    jquery的load加载js页面到指定div中
  • 8
    分享平时工作中那些给力的shell命令（更新版）
  • 9
    如何在ubuntu下用SVN commit
  • 10
    hdu 1800 Flying to the Mars
  • 1
    HelloMeme：开源的面部表情与姿态迁移框架，将视频中的人物表情迁移到静态图像中生成动态视频
    102
  • 2
    VSI-Bench：李飞飞谢赛宁团队推出视觉空间智能基准测试集，旨在评估多模态大语言模型在空间认知和理解方面的能力
    32
  • 3
    CLEAR：新加坡国立大学推出线性注意力机制，使8K图像的生成速度提升6.3倍，显著减少了计算量和时间延迟
    32
  • 4
    Kheish：开源的多智能体开发框架，通过 YAML 配置工作流和多个 Agent 共同协作解决复杂任务
    41
  • 5
    Bamba-9B：基于 Mamba2 架构的仅解码语言模型，旨在提高大型语言模型在推理时的效率
    37
  • 6
    DisPose：清华北大等多所高校联合推出基于人物图像增强视频生成技术，实现对人物动画的准确控制和一致性
    41
  • 7
    InvSR：开源图像超分辨率生成模型，提升分辨率，修复老旧照片为超清图像
    36
  • 8
    Univer：开源全栈 AI 办公工具，支持 Word、Excel、PPT 等文档处理和多人实时协作
    28
  • 9
    《人工智能：驱散新材料数据噪声与填补缺失值的曙光》
    25
  • 10
    《人工智能：解锁新材料最佳掺杂元素及比例的密码》
    18

    • 相关电子书

    更多
  • Building Data Product on Spark at Airbnb
  • Node.js性能平台
  • 低代码开发师（初级）实战教程
    • 下一篇
    DataWorks售前咨询