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

     对于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函数的修改:
时间： 2024-10-23 10:52:16

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

Extjs 继承Ext.data.Store不起作用原因分析及解决_extjs

关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 复制代码 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this.reader = new Ext.data.JsonReader( { totalProperty: 'results', root: 'rows', id:'d

Extjs 项目中常用的小技巧，也许你用得着(5)--设置 Ext.data.Store 传参的请求方式

1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var resultsPanel = Ext.create('Ext.panel.Panel', { title: 'Results', width: 600, height: 400, renderTo: Ext.getBody(), bodyStyle: 'background:#ffc; padding:10px;', layout: { type: 'vb

ExtJs之Ext.data.Store

Ext.data.Store的基本用法 在使用之前,首先要创建一个Ext.data.Store的实例,如下面的代码所示.     1 var data = [ 2 ['boy', 0], 3 ['girl', 1] 4 ]; 5 6 var store = new Ext.data.Store({ 7 proxy: new Ext.data.MemoryProxy(data), 8 reader: new Ext.data.ArrayReader({}, PersonRecord) 9 });

Ext.data.Store 的Load 中的callback回调方法

问题描述 varfieldsMaterialPchChangeD=["materialTypeName"];MaterialPchChangeDstore=newExt.data.GroupingStore({proxy:newExt.data.HttpProxy({url:"MaterialAction.aspx?method=GetMatPchChangeDetail",method:"POST"}),reader:newExt.data.J

Ext 新new的 data.store对象怎么里面没有值

问题描述 Ext 新new的 data.store对象怎么里面没有值.function getstore(){ var b = new Ext.data.Store( {id:"bst",proxy :new Ext.data.HttpProxy( {url :__ctxPath + "/st/findFormula.do"}),reader :new Ext.data.JsonReader( {root :"result",totalPrope

Ext JS 增删改 Ext.Net.Store详细教程

本文内容 引入 演示用 Ext JS 增删改 Ext.Net.Store 说明 参考资料   引入 当我使用 Ext.Net 时,始终不能摆脱最初开发 asp.net 应用程序的方式,也就是,前后台的交互.当你用 asp.net 的思维方式,开发 Ext.Net 时,你会发现应用程序问题很多,我所见过的,比如,页面闪的厉害(刷新次数太多,虽然也是局部刷新):页面脚本错误:页面 CSS 错误等等.这充分说明,错误地使用了 Ext.Net.没有理解 Ajax.知道与会用往往是两回事. 现在,我既不想

Ext.data.HttpProxy 不访问URL

问题描述 var jsonurl = '../association.do?method=locationAssociation&type=province&time=' + new Date().getTime();$.getJSON(jsonurl,function(data){});Ext.Ajax.request({ url : jsonurl, form : 'addForm',//对应formpanel.formId callback : function(options, s

Ext 3.0新增内容系列文章之二：Ext.data.Writer简介

上期我们的内容是关于API接口的配置,其中涉及到CRUD只是略略一提,没有谈论太多,今期再重点说说. 根据CRUD 的原则,数据或资源操作不外乎"生.变.见.灭"的四大规律,也就是说,只需要"创建(Create ).获取(Read ).更新 (Update )和销毁(DELETE )"四种行为便可完成对资源的处理和操作了.如果"读"操作在Ext 中没有题的话,那么其他三种操作就应该归类为"写"的操作了.这部分的内容,在Ext

Ext 的store通过HttpProxy 和 JsonReader 获取不了数据..

问题描述 郁闷好几天... store 里还是没有数据... 真的查不出来原因...兄弟们 指导下啊!!!1. companyList.jsvar proxy = new Ext.data.HttpProxy({url: 'companyData.jsp'});// var reader = new Ext.data.JsonReader({root: 'data'},[{name: 'companyId', type: 'int'}, {name: 'companyName'}, {name: