对于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函数的修改:
对于Ext.data.Store 介紹 与总结,以及对以前代码的重构与优化的更多相关文章
- 设置 Ext.data.Store 传参的请求方式
设置 Ext.data.Store 传参的请求方式 1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var res ...
- Ext.data.Store添加动态参数
多条件查询页面的参数都是动态的,并且我们通常还会有默认加载页面.此时,动态添加参数非常重要,其中baseparam是解决问题的关键. @ 将查询条件定义为一个全局变量 var param_01 = & ...
- 转： Ext.data.Store 修改Post请求
Extjs 4.0版本 var Store = Ext.create('Ext.data.Store', { pageSize: pageSize, model: 'Ext.data.Model名称' ...
- Extjs 项目中常用的小技巧，也许你用得着(5)--设置 Ext.data.Store 传参的请求方式
1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var resultsPanel = Ext.create('Ex ...
- ExtJs Ext.data.Store 处理
var storeCpye = new Ext.data.GroupingStore({ proxy : new Ext.data.HttpProxy({ url : 'cxgl_cpye.app?d ...
- Ext.data.Store动态修改url
store.proxy = new Ext.data.HttpProxy({url:path}); 示例: var ad_store = new Ext.data.JsonStore({ fields ...
- Ext 修改Store初始化加载完后修改record属性。
/** * Created by huangbaidong on 2016/9/18. * 产品组件通用Store, */ Ext.define('app.component.ebs.itemdata ...
- ExtJS笔记 Ext.data.Model
A Model represents some object that your application manages. For example, one might define a Model ...
- extJS 中 ext.data 介绍
ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来,于是,Ext.data成了数据的来源,负责显示数据. Ext.data在命名空间中定义了一系列store.reader和pro ...
随机推荐
- 修改chrome浏览器默认css样式的方法
最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的 ...
- STARTTLS is required but host does not support STARTTLS
Spring boot 邮件系统的错误,需要修改配置的文件yml.如果是企业邮箱的话就需要进行这个配置: spring: mail: host: mail.ccds.com username: inf ...
- 获取input标签中file的内容
1.直接获取文件中的内容: <form id="form" method="post" enctype="multipart/form-data ...
- ScriptOJ-safeGet#99
const safeGet = (data, path) => { if(!path) return undefined; const pathArr = path.split('.'); le ...
- POJ3204 Ikki's Story I - Road Reconstruction
Ikki's Story I - Road Reconstruction Time Limit: 2000MS Memory Limit: 131072K Total Submissions: 7 ...
- [au3]批量输入号码程序
批量输入号码程序 这个文件可以随时产生一个剪贴板文字的文本文件,以供其他程序读取. 这个程序修改了许多次了,主要是针对网络延迟的问题. 最终找到了解决方案:探测输入的界面的反馈信息,也就是反馈的颜色. ...
- attempt to open datawindow failed@安装两个PB软件
attempt to open datawindow failed@安装两个PB软件 安装了不同版本的PB软件后,默认打开方式为后一个安装的版本. 如果想改为第一个安装版本,在“右键”——>”打 ...
- 技术文档生成工具：appledoc
做项目一般都会要求写技术文档,特别是提供SDK或者基础组件的.如果手写这类技术文档的话,工作量比编写代码也少不了多少.比如 Java 语言本身就自带 javadoc 命令,可以从源码中抽取文档.本篇我 ...
- Git入门基础详情教程
前言 写了一篇文章<一篇文章了解Github和Git教程>还觉得不错,继续写了<为了Github默默付出,我想了解你>,那么继续写Git 基础知识. Git 官网:https: ...
- 音频科普---oggs
做为一个做音频的人,很多基础的东西还是要牢记的.最近一个客户用ogg格式的音频,感觉这个很陌生,就翻了这方面的 资料.好比是认识一个大牛,只有在你有一个困扰你很久的困难问题被他瞬间解决的时候,才知道什 ...