对于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(); } }) }
删除函数,包含到上面那部分代码中了.下面我们一步一步来优化代码:
- 修改删除函数:
原先的OnDelete函数全部去掉,在相应的删除事件中添加
store.remove(selection[i]);
这样他就会自动调用rest对应的delete方式,将要删除的对象传到后台.还没完,使用OnDelete函数传到后台的是id,而使用remove传到后台的是model对象,所以后台
接受的参数需要进行相应的改变. - 修改添加函数:去掉了重新写的往后台传值方式,直接调用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方式.
- 对update函数的修改:
