Ext面向对象开发实践代码第1/2页

示例程序简述:
这个Demo为了演示如将使用GridPanel显示数据,并为GridPanel添加工具条按钮,提供弹出式窗体新增数据。
使用到的Ext组件
这个Demo涉及到Ext中的GridPanel,FormPanel和Window三个组件。
效果图


现在开始讲解代码,首先看一下创建GridPanel的代码片段


代码如下:

//定义数据列表面板类
PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {
insertWin: null,
updateWin: null,

constructor: function() {
//添加自定义事件
this.addEvents("rowSelect");

this.insertWin = new InsertPersonInfoWindow();
this.insertWin.on("submit", this.onInsertWinSubmit, this);

this.updateWin = new UpdatePersonInfoWindow();
this.updateWin.on("submit", this.onUpdateWinSubmit, this);

PersonListGridPanel.superclass.constructor.call(this, {
renderTo: Ext.getBody(),
width: 360,
height: 300,
frame:true,
sm: new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners: {
"rowselect": {
fn: function(sm, rowIndex, r) {
this.fireEvent("rowSelect", r); //触发自定义事件
},
scope: this
}
}
}),
store: new Ext.data.JsonStore({
data: [{name: "李宗盛", age: 28, sex: "男"}, {name: "林忆莲", age: 26, sex: "女"}],
fields: ["name", "sex", "age"]
}),
draggable: false,
enableColumnMove: false,
title: "First Grid",
//iconCls:'icon-grid',
colModel: new Ext.grid.ColumnModel([
{header: "Staff Name", width: 100, menuDisabled: true},
{header: "Age", width: 100, sortable: true, dataIndex: "age", align: "right", tooltip: "这里是提示信息"},
{header: "Sex", width: 100, sortable: true, dataIndex: "sex", align: "center"}
]),
tbar: [{
text: "添加人员",
handler: function() {
//***************************************************
//如果没有重写InsertPersonInfoWindow的Close方法
//在调用之前需要检查其实例insertWin是否被释放
//使用示例:
//if (!this.insertWin) {
// this.insertWin = new InsertPersonInfoWindow();
//}
//this.insertWin.show();
//***************************************************
this.insertWin.show();
},
scope: this
}, "-", {
text: "修改人员",
handler: function() {
var r = this.getActiveRecord();
if (!r) return;

//一定要先调用Show方法,而后再调用Load方法,
//否则数据不会被呈现出来
this.updateWin.show();
this.updateWin.load(r);
},
scope: this
}, "-", {
text: "删除人员",
handler: function() {
var r = this.getActiveRecord();
if (!r) return;
Ext.MessageBox.confirm("删除", "删除当前人员信息?", function(btn) {
if(btn == "yes") {
this.delRecord(r);
}
}, this);
},
scope: this
}]
});
},
getActiveRecord: function() {
var sm = this.getSelectionModel();
//没有选中的记录时,是抛出异常还是返回null???????
return (sm.getCount() === 0) ? null : sm.getSelected();
},
insert: function(r) {
this.getStore().add(r);
},
delRecord: function(r) {
this.getStore().remove(r);
},
onInsertWinSubmit: function(win, r) {
this.insert(r);
},
onUpdateWinSubmit: function(win, r) {
alert('onUpdateWinSubmit');
}
});

数据维护面板代码


代码如下:

//定义数据维护面板,在后面定义的新增和修改窗体中都会使用到该面板
PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, {
constructor: function() {
PersonInfoFormPanel.superclass.constructor.call(this, {
//title: "Person Info",
frame: true,
width: 360,
labelWidth: 40,
defaultType: "textfield",
defaults: { anchor: "92%" },
items: [{
name: "name", //注意,这里使用name属性而不是id,因为PersonInfoFormPanel会被添加和插入两个窗体使用,使用id会有冲突,导致组件不能被正确显示
fieldLabel: "Name",
allowBlank: false,
emptyText: "请输入姓名",
blankText: "姓名不能为空"
}, {
name: "age",
fieldLabel: "Age",
vtype: "age"
}, {
hiddenName: "sex",
xtype: "combo",
fieldLabel: "Sex",

store: new Ext.data.SimpleStore({
fields: [
{name: 'Sex'}
],
data:[["男"], ["女"]]
}),
mode: 'local',
displayField:'Sex',
triggerAction: 'all',
emptyText:'选择性别...'
}]
})
},
getValues: function() {
if (this.getForm().isValid()) {
return new Ext.data.Record(this.getForm().getValues());
}
else {
throw Error("Error Message");
}
},
setValues: function(r) {
this.getForm().loadRecord(r);
},
reset: function() {
this.getForm().reset();
}
});

对数据的维护有新增和更新两个动作,从设计的角度来讲就需要编写两个窗体对其进行操作。细心的朋友一定会想,新增和更新的动作都是针对相同的数据表,那么能不能只写一个窗体,然后复用呢?答案是肯定的。下面我们就先写一个窗体基类。


代码如下:

//新增,修改窗体基类
PersonInfoWindow = Ext.extend(Ext.Window, {
form: null,

constructor: function() {
this.addEvents("submit");

this.form = new PersonInfoFormPanel();

//Ext.apply(this.form, {baseCls: "x-plain"});
PersonInfoWindow.superclass.constructor.call(this, {
plain: true,
width: 360,
modal: true, //模式窗体
onEsc: Ext.emptyFn,
closeAction: "hide",
items: [this.form],
buttons: [{
text: "确 定",
handler: this.onSubmitClick,
scope: this
}, {
text: "取 消",
handler: this.onCancelClick,
scope: this
}]
});
//alert(this.onSubmitClick);
},
close: function() {
//需要重写CLose方法,
//否则在窗体被关闭其实体会被释放
this.hide();
this.form.reset();
},
onSubmitClick: function() {
//alert(Ext.util.JSON.encode(this.form.getValues().data));
try {
this.fireEvent("submit", this, this.form.getValues());
this.close();
}
catch(_err) {
return;
}
},
onCancelClick: function() {
this.close();
}
});

基类写了之后,我们就可以使用继承的方法来编写新进和更新窗体了。


代码如下:

//定义新增数据窗体
InsertPersonInfoWindow = Ext.extend(PersonInfoWindow, {
title: "添加"
});

//==============================================================================

代码如下:

//定义编辑数据窗体
UpdatePersonInfoWindow = Ext.extend(PersonInfoWindow, {
title: "修改",
load: function(r) {
this.form.setValues(r);
}
});

为了区分新增和更新窗体,我们在其各自的实现类中为其指定了Title属性,另外在更新窗体类中需要另外添加一个用于加载待编辑数据的方法Load。

脚本部分算是完成了,下面看看如何在HTML中使用。HTML中的引用代码 


代码如下:

<script type="text/javascript">
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
Ext.BLANK_IMAGE_URL = "http://localhost:8080/ext-2.2/resources/images/default/s.gif";

Ext.apply(Ext.form.VTypes, {
"age": function(_v) {
if (/^\d+$/.test(_v)) {
var _age = parseInt(_v);
if ((_age > 0) && (_age < 200)) return true;
}
return false;
},
"ageText": "年龄必须在0到200之间",
"ageMask": /[0-9]/i
});

Ext.onReady(function() {
new PersonListGridPanel();
});
</script>

代码很简洁,也很清晰。只需要创建一个PersonListGridPanel即可,因为它自身包含了新增、修改的窗体对象,而新增和修改窗体中都使用到了负责数据编辑的PersonInfoFormPanel。
在PersonInfoFormPanel中使用了VTypes进行数据验证。
新增和修改窗体仅仅是界面,负责将用户在PersonInfoFormPanel中填写的数据传回到ListGrid中以便保存,或是将ListGrid中的数据传递到PersonInfoFormPanel中进行呈现,供用户编辑。

当前1/2页 12下一页阅读全文

(0)

相关推荐

  • Ext面向对象开发实践代码第1/2页

    示例程序简述: 这个Demo为了演示如将使用GridPanel显示数据,并为GridPanel添加工具条按钮,提供弹出式窗体新增数据. 使用到的Ext组件 这个Demo涉及到Ext中的GridPanel,FormPanel和Window三个组件.效果图现在开始讲解代码,首先看一下创建GridPanel的代码片段 复制代码 代码如下: //定义数据列表面板类 PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, { insertWin: null

  • Ext面向对象开发实践(续)

    要实现对数据表中的数据进行操作,第一步就是要取得数据表中的数据,我们把上篇文章中的创建Store的方法也略作调整,让其从数据表中读取数据. 复制代码 代码如下: this.departmentStore = new Ext.data.JsonStore({ proxy: new Ext.data.HttpProxy({url: "http://localhost:8080/Test_EXT/DB/Department.php"}), fields: ["department_

  • vue2.0开发实践总结之疑难篇

    续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1.  vue 组件的说明和使用 2.  vuex在实际开发中的使用 3.  开发实践总结 1.  vue 组件的说明和使用 一个组件实质上是一个拥有预定义选项的一个 Vue 实例 在header组件内部允许外部使用,需要导出属性,有2种导出方法 1.  默认导出(不用命名) export default { data () { return { msg: 'header' } } } 以上代

  • C#微信公众号与订阅号接口开发示例代码

    本文实例讲述了C#微信公众号与订阅号接口开发示例代码.分享给大家供大家参考,具体如下: using System; using System.Web; using System.IO; using System.Text; using System.Web.Security; using weixin_api; public class wxgz_api : IHttpHandler { public void ProcessRequest(HttpContext context) { cont

  • .Net平台开发实践的一些点滴总结(技术规范与实践精华)第1/2页

    以下是本人对.Net平台开发实践的一些点滴总结.这里的技术规范主要是开发过程的代码规范.数据库设计规范.Com和.Net互操作规范:实践精华是对技术实践过程中的部分总结. 一.代码规范 良好的代码风格来自于同一的代码规范.风格良好的代码不仅具备可读性和可维护性,同时也给人行云流水.赏心悦目之快感. 据Microsoft公司统计,基于微软平台的开发中,有70-80%的印度工程师在完成同类算法或者模块时,使用的代码基本一致:而相同的调查中只有20%的中国工程师们是基本一致的.这说明我们的代码生产过程

  • Vue项目组件化工程开发实践方案

    我们暂时给提取出来的脚手架取名叫vde-cli,通过vde-cli脚手架生成的组件库工程目录结构如下: 核心功能 组件库 工程的packages文件夹就是用来存放组件库里面的各种组件了,这里不需要通过手动创建文件的方式创建组件,直接通过一条创建组件的命令完成.每个组件都有一个单独的组件文件夹,组件文件夹下都至少包含"index.vue","example.vue","readme.md"这三个文件,这几个文件都是通过创建组件传递的参数加指定的模板

  • Linux 命令查询小程序中的 WePY 云开发实践

    大家好,今天我来为大家分享一下, Linux 命令查询小程序中的 WePY 云开发实践. Why WePY 首先,先分享一下为什么要选择 WePY ? 在项目开始进行选型的时候,我可选的底层框架有 WePy.MPVue.Taro.MinUI,这些框架都是工程化做得很好的框架,可以帮助小程序项目长期进行维护.其中,Taro 因为采用的是我所不熟悉的 React ,所以从一开始就被排除.MPVue 我看了以后,它更多是给 Web 开发者提供小程序转化工具,而不是给小程序开发者提供类 Vue 工具,所

  • javascript面向对象程序设计实践常用知识点总结

    本文实例讲述了javascript面向对象程序设计实践常用知识点.分享给大家供大家参考,具体如下: 实践一:原型中的引用类型的属性是共享的 var Person = function(){}; Person.prototype = { info:{ "name":"Tom" } } var p1 = new Person(); var p2 = new Person(); p1.info.name = '我是p1'; p2.info.name = '我是p2'; c

  • SpringCloud 微服务最佳开发实践

    现在基于SpringCloud的微服务开发日益流行,网上各种开源项目层出不穷.我们在实际工作中可以参考开源项目实现很多开箱即用的功能,但是必须要遵守一定的约定和规范. 本文结合我们实际的开发中遇到的一些问题整理出了一份微服务开发的实践规范,欢迎各位大佬拍砖指点. Maven规范 1.所有项目必须要有一个统一的parent模块 所有微服务工程都依赖这个parent,parent用于管理依赖版本,maven仓库,jar版本的统一升级维护 在parent下层可以有 core,starter,rate-

  • Vue3结合TypeScript项目开发实践总结

    目录 概述 1.compositon Api 1.ref 和 reactive的区别? 2.周期函数 3.store使用 4.router的使用 2.关注点分离 3.TypeScript支持 概述 Vue3出来已经有一段时间了,在团队中,也进行了大量的业务实践,也有了一些自己的思考. 总的来说,Vue3无论是在底层的原理上,还是在业务的实际开发中,都有了长足的进步. 使用 proxy 代替之前的 Object.defineProperty 的API,性能更加优异,也解决了之前vue在处理对象.数

随机推荐