好久没用ext了,工作中要用到,想想这次用组件化编程方式吧。因为,之前的写法太垃圾了。个人认为组件化的好处是,相对降低对象的生命周期,其它方面的暂时没考虑到——没好好学过js,就学用框架。当然,回顾还是看别人的代码。一番寻找,找到了dojochina的一个例子。
该实例实现了grid与form间的数据交互,所有数据均为临时存储。代码如下:
/**
* 扩展验证
*/
Ext.apply(Ext.form.VTypes, {
'age':function(_v){
if(/^\d+$/.test(_v))
{
var _age = parseInt(_v);
if(_age < 200)
return true;
}
},
'ageText':'该选项必须输入,例如:24',
'ageMask':/[0-9]/i
});
/**
* 定义form
*/
PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, {
constructor: function(){
PersonInfoFormPanel.superclass.constructor.apply(this, [{
baseCls: "x-plain",
buttonAlign: "right",
labelWidth:30 ,
defaultType: "textfield",
defaults: {
anchor: "95%"
//labelStyle: "text-align:right"//设定后文本框和标签占据同一区域
},
items: [{
fieldLabel: "姓名",
name: "name"
}, {
fieldLabel: "年龄",
name: "age",
vtype: "age"//验证年龄(通过vtype类型来验证)
}, {
xtype: "combo",
mode: "local",//本地数据
readOnly: true,
fieldLabel: "性别",
displayField: "sex",//显示下拉框的内容
triggerAction: "all",//在选择时,显示所有的项
value: "男",//默认值
store: new Ext.data.SimpleStore({
fields: ["sex"],
data: [["男"], ["女"]]
}),
name: "sex"//绑定字段
}]
}])
},
//---以下为PersonInfoFormPanel类对外提供的方法---
getValues: function(){
if (this.getForm().isValid())
return new Ext.data.Record(this.getForm().getValues());
else
throw new Error("验证没有通过");//自定义异常
},
setValues: function(_r){
this.getForm().loadRecord(_r);
},
reset: function(){
this.getForm().reset();
}
});
/**
* 定义window
*/
baseWindow = Ext.extend(Ext.Window, {
form: null,
constructor: function(){
this.form = new PersonInfoFormPanel();//实例化PersonInfoFormPanel类
baseWindow.superclass.constructor.apply(this, [{
modal: true,
resizable: false,
plain: true,
width:350,
items:this.form,
buttonAlign:'right',
closeAction:'hide',
bodyStyle:{'padding':'10px 0 10px 10px'},
items: this.form,
buttons: [{
text: "确 定",
handler:this.onSubmitClick,//提交事件调用
scope: this
}, {
text: "取 消",
handler:this.onCancelClick,//取消事件调用
scope: this
}]
}]);
//给insertWindow对象添加事件(事件冒泡)
this.addEvents("submit");
},
//提交事件处理函数
onSubmitClick: function(){
try {
//发布事件
this.fireEvent("submit", this, this.form.getValues());//调用PersonInfoFormPanel类中自定义的方法getValues
this.close();
}
catch (_err) {
Ext.Msg.alert("系统提示", _err.description);//扑捉自定义错误或异常
}
},
//取消事件处理函数
onCancelClick: function(){
this.close();
},
//重置与隐藏事件处理函数
close: function(){
this.form.reset();
this.hide();
}
});
/**
* 增加人员窗口
*/
insertWindow = Ext.extend(baseWindow, {
title: "新增人员"
});
/**
* 修改人员窗口
*/
updateWindow = Ext.extend(baseWindow, {
title: "修改人员",
load: function(_r){
this.form.setValues(_r);
}
});
/**
* 人员列表
*/
PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {
_window: null,
_updateWin: null,
constructor: function(_url){
this._window = new insertWindow();//insertWindow对象引用
this._updateWin = new updateWindow();//updateWindow对象引用
PersonListGridPanel.superclass.constructor.apply(this, [{
renderTo: Ext.getBody(),
width:325 ,
height:200 ,
frame: true,
autoScroll:true,
layout: "form",
//工具栏
tbar: [{
text: "添加人员",
handler: function(){
this._window.show();
},
scope: this
}, "-", {
text: "修改人员",
handler: function(){
this._updateWin.show();
try {
this._updateWin.load(this.getSelected());
}
catch (_err) {
Ext.Msg.alert("系统提示", _err.description);
this._updateWin.close();
}
},
scope: this
}, "-", {
text: "删除",
handler: this.onRemovePerson,
scope: this
}],
enableColumnMove: false,
//列模板
columns: [{
header: "姓名",
menuDisabled: true,
dataIndex: "name"
}, {
header: "年龄",
menuDisabled: true,
dataIndex: "age"
}, {
header: "性别",
menuDisabled: true,
dataIndex: "sex"
}],
//内存数据
store: new Ext.data.Store({
proxy: new Ext.data.MemoryProxy([['张三','24','男'],['李四','23','女'],['王五','25','男'],['赵六','27','女'],['木易','26','男']]),
reader:new Ext.data.ArrayReader({},['name','age','sex']),
autoLoad:true
}),
/*store: new Ext.data.JsonStore({
autoLoad: true,
url: _url,
fields: ["name", "age", "sex"]
}),*/
//选中模板
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
"rowselect": {
fn: this.onRowSelected,
scope: this
}
}
})
}]);
//添加事件
this.addEvents("rowselect");
//事件订阅
this._window.on("submit", this.onInsertWinSubmit, this);
this._updateWin.on("submit", this.onUpdateWinSubmit, this);
},
//----- 以下为自定义方法---------
//获得选中的记录
getSelected: function(){
var _sm = this.getSelectionModel();
if (_sm.getCount() == 0)
throw new Error("你没有选中任何记录,请选择一条记录后重试");
return _sm.getSelected();
},
//插入一条记录
insert: function(_r){
this.getStore().add(_r);
},
//更新选中的记录
update: function(_r){
try {
var _rs = this.getSelected();
var _data = _rs.data;
for (var _i in _data) {
_rs.set(_i, _r.get(_i));
};
_rs.commit();
}
catch (_err) {
}
},
//删除选中的记录
remove: function(){
try {
var _rs = this.getSelected();
Ext.Msg.confirm("系统提示", "你确定删除吗?", function(_btn){
if (_btn == "yes")
this.getStore().remove(_rs);
}, this);
}
catch (_err) {
Ext.Msg.alert("系统提示", _err.description);
}
},
//-------以下为自定义事件处理函数------------
//添加事件
onInsertWinSubmit: function(_win, _r){
this.insert(_r);
},
//修改事件
onUpdateWinSubmit: function(_win, _r){
this.update(_r);
},
//删除事件
onRemovePerson: function(){
this.remove();
},
//选中事件
onRowSelected: function(_sel, _index, _r){
this.fireEvent("rowselect", _r);//发布事件
}
})
分享到:
相关推荐
ExtJS的组件化开发,描述如何通过将ExtJS组装成组件供项目组调用
Ext 组件:Ext初学者必备 初学宝典 Ext组件概述
ext中grid数据查找后重填到gird中.网上搜集的部分资料。
对EXT.form中的相关组件,进行了详细的说明!!!!!
EXT可视化编程
Ext中grid鼠标单击的每一行数据都能累加id,取消某一行id也随着取消,很实用。
Ext Form全攻略 Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
EXT 中文手册 开发必备 该文档内容取自互联网,详细的介绍了 EXT的各部 分内容,希望对大家有所帮助
1. Ext.form.NumberField 2. Ext.form.TextArea 3. Ext.form.TriggerField 4. Ext.form.DateField 5. Ext.form.ComboBox 6. Ext.form.TimeField
EXT组件一些属性与方法(MessageBox)[文].pdf
EXT dojochina文本框示例Ext.form.TextField.rar
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
Grid数据导出到Excel文件,尝试了三种方法,并比较。
EXT GRID使用EXT GRID使用 EXT GRID使用EXT GRID使用
非常珍贵的初学者资源,详细的使用了ext的各种常用组件和类库,例子完完整整,能运行,数据库资源直接在配置文件里面写就行,是那种就换成什么,非常方便大家使用和参考。
关于ext的数据交互,从前台获取数据以及从后台提交数据,比较详细和实用
EXT 组件详解EXT 组件详解EXT 组件详解
extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...
java+Ext2.0增删改查 数据交互..... 文件夹dataTransfer为增删改查的数据交互,文件夹xml内为读取xml文件