最近在写Ext的程序,增加和修改时,打算使用同一个Form,增加和修改的Widow通过hide 和show来控制显示 ,
但是出现了一个问题,在网上查了半天,终于解决了,原来是Form中字段设置了id,把id取消就好了,参考网址
http://topic.csdn.net/u/20100618/11/a09196cc-550b-41e2-9e19-1c331d54aa1c.html
var STUDENT=Ext.data.Record.create([
{name:"sid",type:"string"},
{name:"sname"},
{name:"birthday",type:"string"},//type:"date",dataFormat:"Y-m-d"},
{name:"city",type:"string"},
{name:"stature",type:"int"}
]);
Ext.apply(Ext.form.VTypes, {
LengthLimit: function(v) {
return v.length <=10
},
LengthLimitText: "字符串长度不能大于10",
IntLimit:function(v){
return v <300;
},
IntLimitText:"身高不能大于300"
});
/********************
*表格,显示人员信息,继承自Ext.grid.GridPanel
*
********************/
StudentListGrid=Ext.extend(Ext.grid.GridPanel,{
_store:null,
_tbar:null,
_addWin:null,
_updateWin:null,
constructor:function(){
this._store=new Ext.data.JsonStore({
autoLoad:true,
url : "grid_service.jsp?action=getAllStudents",
root:"rows",
id:"id",
fields:STUDENT,
sortInfo:{field: "sid", direction: "DESC"}
});
this._tbar=new Ext.Toolbar({
id:"mainMenu",
items:["-",
{
text:"增加用户",
id:"addBtn",
iconCls:"adduser",
handler:function(){
this._addWin.show();
this._addWin._form.getForm().reset();
},
scope:this
},"-",
{
text:"修改用户",
id:"updateBtn",
iconCls:"modifyuser",
handler:this.updateFn,
scope:this
},"-",
{
text:"删除用户",
id:"delBtn",
iconCls:"deleteuser",
handler:this.deleteFn,
scope:this
},"-","->",
{
xtype:"textfield",
fieldLabel:"请输入姓名",
id:"searchName",
width:100,
emptyText:"-请输入姓名"
},"-",{
text:"搜索",
width:50,
iconCls:"search",
handler:this.searchFn,
scope:this
},"-"
]
});
this._addWin=new AddNewStudentWindow();
this._updateWin=new UpdateStudentWindow();
StudentListGrid.superclass.constructor.call(this,{
title:"学生列表",
renderTo:Ext.getBody(),
id:"main_grid",
frame:true,
height:300,
width:500,
tbar:this._tbar,
store:this._store,
sm: new Ext.grid.RowSelectionModel({
singleSelect:true
}),
columns:[
{header:"SID",dataIndex:"sid",hidden:true},
{header:"姓名",dataIndex:"sname"},
{header:"生日",dataIndex:"birthday",renderer:this.birthdayFn},
{header:"所在城市",dataIndex:"city"},
{header:"身高",dataIndex:"stature"}
]
});
},
birthdayFn:function(value){
if(typeof(value)=="string")
return value.substring(0,10);
else
return Ext.util.Format.date(value,"Y-m-d");
},
updateFn:function(){
var sm=this.getSelectionModel();
if(sm.getCount() == 0) {
Ext.Msg.show({
title : '注意!',
msg : '请选择需要修改的学生!',
icon : Ext.MessageBox.WARNING,
buttons : Ext.MessageBox.OK
});
return;
}
var _record=sm.getSelected();
if(_record.data.birthday.length>=10)
_record.data.birthday=_record.data.birthday.substring(0,10);
this._updateWin._form.getForm().loadRecord(_record);
this._updateWin.show();
},
deleteFn:function(){
},
searchFn:function(){
}
});
/*******************************************
*增加人员和修改人员时所用到的Form,继承自Ext.form.FormPanel
*
*
****************************************/
StudentFormPanel=Ext.extend(Ext.form.FormPanel,{
constructor:function(){
StudentFormPanel.superclass.constructor.call(this,{
width:340,
frame:true,
plain:true,
layout:"form",
labelWidth:60,
labelAlign:'right',
items:[
{ xtype:"hidden",
fieldLabel:"id",
id:"sid",
value:"",
width:200},
{
xtype:"textfield",
fieldLabel:"姓 名",
vtype:"LengthLimit",
id:"sname",
value:"",
width:200
},
{
xtype:"datefield",
fieldLabel:"生 日",
id:"birthday",
width:200,
format:"Y-m-d",
editable:false,
value:new Date()
},
{
xtype:"textfield",
fieldLabel:"所在城市",
id:"city",
width:200,
value:""
},
{
xtype:"textfield",
fieldLabel:"身 高",
id:"stature",
width:200,
vtype:"IntLimit",
value:""
}
]
});
}
});
/*************************************
*增加用户是的弹出窗口,继承自Ext.Window
*
**************************************/
AddNewStudentWindow=Ext.extend(Ext.Window,{
_form:null,
constructor:function(){
this._form=new StudentFormPanel();//这里新建了FormPanel
AddNewStudentWindow.superclass.constructor.call(this,{
title:"增加用户",
width:350,
frame:true,
plain:true,
closeAction:"hide",
autoDestroy:true,
[color=#FF0000]items:[this._form],[/color]
modal:true,
buttons:[
{text:"保存",
iconCls:"sure",
handler:this.sureFn,
scope:this},
{text:"重置",
iconCls:"reset",
handler:this.resetFn,
scope:this},
{text:"关闭",
iconCls:"close",
handler:this.closeFn,
scope:this}
]
});
},
sureFn:function(){
},
resetFn:function(){
},
closeFn:function(){
this.hide();
}
});
/*****************************
*更新用户时调用的窗口
*
******************************/
UpdateStudentWindow=Ext.extend(Ext.Window,{
_form:null,
constructor:function(){
this._form=new StudentFormPanel();//新建FormPanel
UpdateStudentWindow.superclass.constructor.call(this,{
title:"修改用户",
width:350,
frame:true,
plain:true,
closeAction:"hide",
autoDestroy:true,
[color=#FF0000]items:[this._form],[/color]
modal:true,
buttons:[
{text:"保存",
iconCls:"sure",
handler:this.sureFn,
scope:this},
{text:"重置",
iconCls:"reset",
handler:this.resetFn,
scope:this},
{text:"关闭",
iconCls:"close",
handler:this.closeFn,
scope:this}
]
});
},
sureFn:function(){
},
resetFn:function(){
},
closeFn:function(){
this.hide();
}
});

- 大小: 42.6 KB

- 大小: 47.7 KB
分享到:
相关推荐
Ext的入门示例代码!!!!!!!!!!!!!!!!!!!!
在Ext JS这个强大的JavaScript框架中,GridPanel是一个非常重要的组件,用于展示数据表格。然而,在实际应用中,可能会遇到一个常见的问题:当GridPanel需要进行第二次加载时,数据或者功能可能会丢失。这个问题主要...
综上所述,这个实例展示了如何在Ext中创建一个完整的表单,包括表单的布局、字段的定义及验证、按钮及事件处理等多个方面。对于初学者来说,这是一个很好的学习资源,可以帮助他们快速掌握如何使用Ext构建复杂的Web...
在IT行业中,"ext扩展 延时加载"是一个关于前端开发的重要概念,特别是对于使用Ext JS框架的应用程序。Ext JS是一个强大的JavaScript库,用于构建数据驱动的富客户端应用程序。延时加载(Lazy Loading)是一种优化...
1. `form`:`Ext.FormPanel`是EXT JS中的表单面板,它是一个容器,可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`:`Ext.form.Checkbox`是用于创建复选...
Ext Form全攻略 Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略
1. **表单(FormPanel)**:这是Ext 2.0中的核心表单组件,它是一个容器,可以包含各种表单字段和其他组件。FormPanel提供了数据提交、验证、加载和保存的功能。 2. **表单字段(Form Fields)**:包括文本字段...
`Ext.Loader` 是 Ext4 中的一个核心特性,用于动态加载所需的 JavaScript 类库和模块,这在开发大型应用时尤其有用,因为它可以显著减少页面初次加载时的资源需求。 动态加载的核心在于按需加载,即只有在实际需要...
在Ext JS这个强大的JavaScript框架中,动态加载表单数据是一种常见的功能需求,特别是在构建数据驱动的应用程序时。本文将深入探讨如何使用JSON格式的数据来实现这一功能,以便于灵活地更新和显示表单内容。 首先,...
**Ext.form.DateField** 是一个日期选择器,继承自 **Ext.form.TriggerField**,专门用于日期的选择和输入。 - **altFormats**: 类型为 `String`,定义用于解析用户输入的其他日期格式,默认为 `'m/d/Y|m-d-y|m-d-Y...
在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...
在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...
"揭示了一个关键信息,即GXT(Ext GWT)的版本2.0。这是一个基于Google Web Toolkit(GWT)的UI组件库,它允许开发者使用Java来构建富互联网应用程序(Rich Internet Applications,RIAs)。GXT提供了大量的可定制的...
在ExtJS中,延迟加载(lazy loading)是一种优化技术,主要用于处理大量数据或组件时,避免一次性加载所有内容导致的性能问题。在多标签(tab)场景下,如果每个标签页都包含复杂的组件或需要进行大量的网络请求,...
1. **初始化表单**:首先需要使用EXT创建一个表单对象,该对象将包含所有需要提交的字段。 ```javascript var form = new Ext.form.FormPanel({ id: 'myForm', url: 'yourActionUrl', method: 'POST', items...
"ext 异步加载树完整版" 提到的是EXT JS框架中的一个特性,EXT JS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。在这个场景下,"异步加载树"是指树形组件(Tree Panel)不一次性加载所有节点,而是...
在压缩包中的`Ext.form.TextField`文件夹,很可能是包含了一个或者多个HTML、JavaScript和CSS文件的示例项目,展示了如何在实际应用中使用`Ext.form.TextField`组件。这些文件通常会包含一个或者多个示例,演示了...
Grid组件是EXT中非常重要的一个组成部分,主要用于展示表格数据。它支持数据的排序、筛选、分页等功能,并且可以通过Ajax技术动态加载数据。 **Grid组件的简易分页** Grid支持内置分页功能,通过配置`store`属性,...
"的资源中,你将找到一系列适合自学者和初学者的教程,帮助你深入理解和掌握ExtJS的基本概念和高级特性。 首先,让我们从基础开始。ExtJS的核心是组件模型,它允许开发者通过组合各种小部件来构建复杂的UI。`Ext....
本实例“ext实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵资源,它演示了如何将这些组件结合起来,实现交互式的数据操作。 1. **树形控件(Tree)**:在左边展示数据结构,通常用于...