- 浏览: 83397 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
hapet:
顶,保存先,谢谢
Oracle下载地址备忘 -
風一樣的男子:
不错,先收藏
mootools的资料 -
haolixia1982:
老大,那个News是个什么东东
?能不能提供以下?
Flex切换播放 -
dayrl:
良好的用户界面??
良好的用户界面 -
redlz2500:
谢谢很好的资源啊
mootools的资料
EXT做为与用户交互的前端,其功能可以概括为:生成用户界面,与用户实现交互,并与程序(PHP,.NET等)后台通信来完成与用户的交互。下面就这几个功能的实现原理做介绍。
1.1
生成用户界面
EXT别广泛接受认可的原因之一便是他拥有良好的用户外观。
一个系统中最主要的功能便是实现CRUD(新增,读取,更新,删除),同时还有查询。为了将这些功能集中在一起,特意封装了一个EXT的CRUD面板,将这些常用的功能封装成一个类,以便创建易用性良好的界面。该CRUD类的程序代码见前面的文章。
CRUD面板是从EXT的panel继承来的
/**
* 定义命名空间
*/
Ext.namespace("Mis.Ext");
/*
*CRUD面板基类
*/
//继承EXT的Panel,创建CRUD面板
Mis.Ext.CrudPanel=Ext.extend(Ext.Panel,{……});
//限于篇幅就不列出全部代码
EXT里的继承用的是Ext.extend(组件名,{实现代码});
要使用这个CRUD面板,需要继承实现它,我们举一个例子
//继承CrudPanel,创建污水厂管理面板
AddPlantPanel=Ext.extend(Mis.Ext.CrudPanel,{
id:"AddPlantPanel",//id号是表示一个面板的唯一标志
title:"污水厂管理",//面板的名称,见上图
baseUrl:"Plant.aspx",//数据源地址
//根据实际需要,重载编辑方法
edit:function()
{
CommentPanel.superclass.edit.call(this);//调用基类方法
var record=this.grid.getSelectionModel().getSelected();
if(record){
var id=record.get("plantID");
this.fp.form.setValues({ID:id});
}
},
//保存
save:function()
{
var id=this.fp.form.findField("ID").getValue();
this.fp.form.submit({
waitMsg:'正在保存。。。',
url:this.baseUrl+"?cmd="+(id?"Update":"Save"),
method:'POST',
success:function(form_instance_create, action) {
Ext.MessageBox.alert('友情提示', action.result.info);
},
failure:function(form_instance_create1, action1){
Ext.MessageBox.alert('友情提示', action1.result.info);
},
scope:this
});
},
//删除
removeData:function(){
this.remove('plantID');
} ,
//创建新建和修改的表单
createForm:function(){
var formPanel=new Ext.form.FormPanel({
frame:true,
labelWidth:60,
labelAlign:'right',
items:[{
xtype:'fieldset',
title:'基本信息',
autoHeight:true,
defaults:{xtype:"textfield",width:300},
items:[
{xtype:"hidden",name:"ID"},
{fieldLabel:'编号',name:'plantID'},
{fieldLabel:'名称',name:'plantName'}]
}]
});
return formPanel;
},
//创建放置表单的窗口,见上图新增和修改的效果
createWin:function()
{
return this.initWin(438,180,"污水厂管理");
//创建新增、添加面板
},
//指定JSON数据的mapping
storeMapping:["plantID","plantName"],
//初始化界面
initComponent : function(){
var sm = new Ext.grid.CheckboxSelectionModel();
this.cm=new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),//获得行号
sm,
//定义GRID的表头信息
{header: "污水厂编号", sortable:true,width: 100, dataIndex:"plantID"},
{header: "污水厂名称", sortable:true,width: 200, dataIndex:"plantName"}
]);
AddPlantPanel.superclass.initComponent.call(this);
}
});
这样就完成了一个能应用到实际中的CRUD面板,效果见下图
1.2
与用户实现交互和与程序后台实现通信
EXT的组件在执行时是从initComponent开始的
我们来看看AddPlantPanel这个具体的CRUD面板的执行过程
initComponent : function(){
var sm = new Ext.grid.CheckboxSelectionModel();
this.cm=new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),//获得行号
sm,
//定义GRID的表头信息
{header: "污水厂编号", sortable:true,width: 100, dataIndex:"plantID"},
{header: "污水厂名称", sortable:true,width: 200, dataIndex:"plantName"}
]);
AddPlantPanel.superclass.initComponent.call(this);
}
首先是定义Grid表格的相关信息,接着是调用基类的initComponent方法,注意,EXT里面调用基类的方法是用superclass.方法名.call(this);
接着看基类方法里的initComponent
initComponent : function(){
//首先是定义数据源
this.store=new Ext.data.JsonStore({
id:"Id",
url: this.baseUrl+'?cmd=List',//默认的数据源地址,继承时需要提供
root: "rows",
totalProperty:"totalCount",
remoteSort:true,
fields:this.storeMapping});
this.cm.defaultSortable=true;//开启排序
this.sm= new Ext.grid.CheckboxSelectionModel(); //选择框
Mis.Ext.CrudPanel.superclass.initComponent.call(this);//初始化panel
var viewConfig=Ext.apply({forceFit:true},this.gridViewConfig); //添加配置信息
//Grid表格
this.grid=new Ext.grid.GridPanel({
store: this.store,
cm: this.cm,
sm:this.sm,
trackMouseOver:false,
loadMask: true,
viewConfig:viewConfig,
tbar: [……],//顶部工具栏
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: this.store,
displayInfo: true,
displayMsg: '显示第 {0} - {1} 条记录,共 {2}条记录',
emptyMsg: "没有记录"
})//底部工具栏,放置分页信息
});
//双击时执行修改
this.grid.on("celldblclick",this.edit,this);
this.add(this.grid); //将Grid表格添加到panel内,很重要
this.store.load({params:{start:0,limit:10}});//Grid表格生成后,接着是加载数据,这里是与服务器端通信的关键
上面代码与服务器通讯的关键在于url: this.baseUrl+'?cmd=List',和this.store.load({params:{start:0,limit:10}});
url:指定了数据源的地址,在页面初始化时EXT调用this.store.load方法从this.baseUrl+'?cmd=List获取数据,参数为start=0&limit=10,即从 Plant.aspx?cmd=List& start=0&limit=10获取数据
当请求到达服务器端Plant.aspx?cmd=List& start=0&limit=10时(毕业设计用的.NET,其实后台都很简单),下面的代码执行
if(Request.Params["cmd"].ToString()=="List")
{
int start =Convert.ToInt32(Request.Params["start"].ToString());
int
limit = Convert.ToInt32(Request.Params["limit"].ToString());
string json = pnt.GetJsonAll(start, limit, "");
Response.Write(json);
}
//ps这是c#,php的以前发过,自己去找
上面的代码生成了一段JSON数据
{'totalCount':'5', 'rows':[{"plantID":"8","plantName":"ss"},{"plantID":"7","plantName":"7号污水处理厂修改banben"},{"plantID":"23","plantName":"222"},{"plantID":"22", "plantName":"22"},{"plantID":"15","plantName":"15号污水处理厂"}]}
EXT读取上面的JSON,兵将数据显示在表格中,这是与服务器的第一次通信
效果如下
主要流程
页面呈现给用户后接着就是与用户执行交互。
在Mis.Ext.CrudPane基类的初始化函数initComponent中有下面这段代码
tbar: [{
id:'addButton',
text: '新增',
iconCls:'addIconCss',
tooltip:'添加新纪录',
handler: this.create,
scope:this
},'-',//'-'给工具栏按钮之间添加'|'
{
id:'editButton',
text:'编辑',
iconCls:'editIconCss',
tooltip:'修改记录',
handler: this.edit,
scope:this
},'-',
{
text:'删除',
iconCls:'deleteIconCss',
tooltip:'删除所选中的信息',
handler: this.removeData,
scope:this
},'-',
{
text:'刷新',
iconCls:'refreshIcon',
tooltip:'刷新纪录',
handler: this.refresh,
scope:this
},'->',//'->'代表让工具栏按钮到右边去
'Search: ',this.name,
{
text: '查询',
pressed: true,
iconCls:'selectIconCss',
handler: this.search,
scope:this
},'
'
],
上面定义了面板顶部工具栏的按钮(效果见上图中的按钮),每个按钮都有一个handler,其参数是该类里的一个成员方法。当点击一个按钮时,便触发这个按钮handler对应的方法,比如点击新增,那么便会触发this.create方法,下面我们跟踪其执行路径。
见下面……
附件
2008-5-21 22:58
2008-5-21 22:58
2008-5-21 22:58
接上面……从word拷过来的,无用字符比较多
首先是执行create方法,create方法如下
//创建(新增/修改)窗口
create:function()
{
this.showWin();//显示(新增/修改)窗口
this.reset();//清空表单里的数据
}
Create方法中有两个函数,依次执行
//显示(新增/修改)窗口
showWin:function()
{
//createForm()需要在继承时提供,该方法作用是创建表单
if(!this.win){
if(!this.fp){
this.fp=this.createForm();
}
this.win=this.createWin();
this.win.on("close",function(){this.win=null;this.fp=null;this.store.reload();},this);//添加事件,当窗口关闭时表格数据重新加载
}
//窗口关闭时,数据重新加载
this.win.show();
},
Showwin调用createWin()方法创建一个窗口,并将表单放在里面。而create里的第二个方法则是将表单的内容重置。这样就显示出了一个新增的画面
下面我们来看createWin()方法
//创建放置表单的窗口,见上图新增和修改的效果
createWin:function()
{
return this.initWin(438,180,"污水厂管理");
//创建新增、添加面板
},
该方法调用了initWin方法来创建窗口,为了更清晰的理解,我们再看看initWin方法
initWin:function(width,height,title)
{
var win=new Ext.Window({
width:width,
height:height,
buttonAlign:"center",
title:title,
modal:true,
shadow:true,
closeAction:"hide",
items:[this.fp],
buttons:[{text:"保存",
handler:this.save,
scope:this},
{text:"清空",
handler:this.reset,
scope:this},
{text:"关闭",
handler:this.closeWin,
scope:this}
]
});
return win;
},
注意
{text:"保存",
handler:this.save,
scope:this},
当用户填完数据点击保存时,触发save方法,于是EXT调用save方法
//保存
save:function()
{
var id=this.fp.form.findField("ID").getValue();
this.fp.form.submit({
waitMsg:'正在保存。。。',
url:this.baseUrl+"?cmd="+(id?"Update":"Save"),
method:'POST',
success:function(form_instance_create, action) {
Ext.MessageBox.alert('友情提示', action.result.info);
},
failure:function(form_instance_create1, action1){
Ext.MessageBox.alert('友情提示', action1.result.info);
},
scope:this
});
},
效果
该方法实现了与ASP.NET后台通讯,将会把表单内的数据用POST方法传到baseUrl?cmd=Save中,因为上面的baseUrl是Plant.aspx,所以最终将数据传送到Plant.aspx?cmd=Save
[size=+0]EXT将数据传到了.NET后台,接着就是.NET后台处理EXT传来的数据,下面我们看看Plant.aspx怎么处理
Mis.BLL.Plant pnt = new Mis.BLL.Plant();
if (Request.Params["cmd"].ToString() == "Save")
{
string id = Request.Params[
发表评论
-
回发或回调参数无效
2009-08-18 16:20 1430回发或回调参数无效。在配置中使用 <pages enab ... -
事件与委托趣谈
2009-03-06 14:42 782事件与委托似乎很难以 ... -
VS2008TS安装SP1后无法调试
2009-03-04 11:11 883已找到解决方法,方法1修改以后可以成功调试,方法2没有试验。 ... -
关于asp.net Session丢失问题的总结
2009-03-02 08:49 1492asp中Session的工作原理: ... -
从问题入手帮你解决Oracle杀死死锁进程
2009-02-24 16:07 1571从问题入手帮你解决Oracle杀死死锁进程 http:// ... -
Bitmap.Clone提示内存不足的错误
2009-02-11 16:17 4062在使用Bitmap进行图片操作时经常报出“内存不足”的错误,在 ... -
Response.End正在中止线程之另类解决方案
2009-01-20 11:00 2308如果使用 Response.End、Response.Redi ... -
Asp.net中实现同一用户名不能同时登陆(单点登陆)
2009-01-13 11:57 3257Web 项目中经常遇到的问题就是同一用户名多次登陆的问题,相应 ... -
Response.End正在中止线程
2009-01-13 11:26 2386症状 如果使用 Response.End、Response.R ... -
GridView的模板列中判断控件所在的行号
2009-01-07 09:45 1168//获得行号 int row = ((GridViewRow) ... -
[ASP.NET] Session 详解
2009-01-04 12:09 784阅读本文章之前的准备 ... -
ref 关键字的用法
2008-12-19 13:59 1293ref 关键字在 C# 中经常使用,但是一直也没有认真考虑过 ... -
“由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值”的解决方法
2008-11-26 17:22 12148异常:由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算 ... -
allowDefinition='MachineToApplication'
2008-10-27 10:41 2006在应用程序级别之外使用注册为 allowDefinition= ... -
一个Datagrid样式
2008-10-22 15:49 1173private void BindGrid() ...
相关推荐
可滚动的视图,可以用来给用户提供不同的选择与良好的用户界面。
JRubyFX-扫雷器具有良好用户界面的扫雷游戏查看。
内容概要:游戏程序设计是一项精度要求很高的任务...通过合理的设计和优化,可以创建出吸引人、流畅运行且具有良好用户界面的游戏。同时,文章中提到的Java编程语言特性和优化方法,也适用于其他基于虚拟机的编程环境。
而相比较而言, 传统的java语言在开发窗体应用程序中却仅靠代码语句来实习对控件的控制则显得不够灵活和准确,难以高效的开发具有良好用户 界面的应用程序。所以笔者一般喜欢用vs来开发窗体应用程序,但是最近一个...
注册机编写器 感谢你使用注册机编写器。 注册机编写器是一个很特殊的软件,它可以快速地生成一...简单易用,有良好用户界面 可以方便地修改资源,制作个性化的界面 另类注册机功能 文件补丁功能 内存补丁功能
注册机编写器是一个很特殊的软件,它可以快速地生成一个注册机,而...简单易用,有良好用户界面 可以方便地修改资源,制作个性化的界面 另类注册机功能 文件补丁功能 内存补丁功能 注:原版未免杀,杀软会报毒。
是实现数字信号处理教学软件的平台设计开发,在MTLAB环境GUI环境下,有良好用户界面,实现数字信号处理的功能。
从分析实现人机协同智能用户界面需解决的问题入手, 探讨了多 Agent 系统解决上述问题的 技术途径; 提出一种基于多 Ag ent 系统的人机协同式智能用户界面体系结构, 并重点讨论了如何解决 多媒体对象展示...
而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉,相反由于界面设计的失败,让用户有...
毕业设计作业—介绍人机交互(HCI)的概念和设计原则,并解释为什么良好的用户界面设计很重要。
dos下读写IO功能,实现了良好用户界面
Java语言可以编写出良好的图形用户界面,因为它提供了图形用户界面所需要的基本组件,如窗口、按钮、文本框、选择框、滚动条等,Java类库java.awt包含了所有这些基本组件。本章的任务是了解图形用户界面基本组件的...
学生选课系统源码+项目说明+论文(结合跨平台C++图形用户界面+Qt+MySQL Workbench关系型数据库管理系统,开发一种具有选课基本功能、可以正常进行基本的选课操作、可以纪录学生选课日志且人机交互良好的单机学生选课...
良好交互性的图形用户界面,一些较为实用的功能
在这个教程里,你将学到相对布局的所有知识,相对布局用于将用户界面控件或小工具相对于其它控件或它们的父级布局组织在屏幕上。当使用正确的时候,相对布局可以是很强大和灵活布局,很多有趣的Android程序用户界面...
LabVIEW 虚拟仪器软件广泛应用于测控系统的开发...在阐述了菜单形式用户界面基本设计思想和几个主要函数 的基础上, 详述了两种不同的菜单式友好用户界面实现方 法。文章所述方法在实际课题中的运用取得了良好的效 果。
爆轰参数及JWL状态方程数值计算软件,向聪,张奇,针对气态、液态和凝聚态爆源,运用Matlab开发了计算爆轰参数和JWL方程参数的可视化软件,该软件具有良好用户界面,采用化学平衡原理�
而且设计良好的界面能够引导用户自己完成相应的 软件开发中的用户界面设计与测试规则[1] 软件测试 在工作中总结了一些有关界面设计与测试的规范,与大家共享。界面设计与测试规则界面是软件与用户交互的最直接的...
今天,我们将从不同于以往的方面:我们将会深入讲解能使你的网站拥有良好交互性的用户界面和设计原则。交互设计(即IxD)是一块发展迅速的新领域,大致出现于10-15年之前,源于一些体现设计问题的研究,后来被专业设计...