Ext面向对象开发实践代码_YUI.Ext相关-js教程-PHP中文网

首页

web前端

js教程

Ext面向对象开发实践代码_YUI.Ext相关

PHP中文网

May 16, 2016 pm 06:58 PM

ext面向对象

这是自己在学习Ext过程中一个写的一个示例程序，仅为练习，功能并不全，现将其记录在我的博客中，希望可以和学习Ext的朋友一起分享

示例程序简述：
这个Demo为了演示如将使用GridPanel显示数据，并为GridPanel添加工具条按钮，提供弹出式窗体新增数据。
使用到的Ext组件
这个Demo涉及到Ext中的GridPanel，FormPanel和Window三个组件。
效果图
Ext面向对象开发实践代码_YUI.Ext相关

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

数据维护面板代码

//定义数据维护面板，在后面定义的新增和修改窗体中都会使用到该面板
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中的引用代码

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

附上完整的HTML代码和JavaScript代码文件。
Grid.html

Ext Grid

PersonListGridPanel.js

//定义数据列表面板类
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: [{
name: "btnFirst",
//text: "First",
iconCls: "x-tbar-page-first",
handler: function () {
this.getSelectionModel().selectFirstRow();
},
scope: this
}, {
name: "btnPrev",
//text: "Prev",
iconCls: "x-tbar-page-prev",
handler: function () {
this.getSelectionModel().selectPrevious();
},
scope: this
}, {
name: "btnNext",
//text: "Next",
iconCls: "x-tbar-page-next",
handler: function () {
this.getSelectionModel().selectNext();
},
scope: this
}, {
name: "btnLast",
//text: "Last",
iconCls: "x-tbar-page-last",
handler: function () {
this.getSelectionModel().selectLastRow();
},
scope: this
}, "-", {
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;

//如何将数据填充到窗体中?
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("信息不完整");
}
},
setValues: function(r) {
//alert(Ext.util.JSON.encode(r.data));
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);
}
});

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。