最近开始接触ExtJs,在做数据提交和修改的时候老是使用两个表单感觉很别扭,于是在网上查了如何共用表单,最后没有搜索到满意的答案,不过还是实现了,只是我的方法有点笨拙,如果大家有更好的办法,希望赐教
//定义操作名称和表单提交的URL
var opName='add';
var opUrl='addPlanGroup';
//定义提交数据的表单
var pgAddForm=new Ext.form.FormPanel({
id:'pgAddForm',
bodyStyle:'padding:5px',
labelWidth:80,
defaults:{anchor:"95%"},
baseCls:"x-plain",
items:[{
xtype : "textfield",
fieldLabel: '计划组编号',
emptyText:'请输入计划组编号',
name:'planGroupCode',
allowBlank:false,
validator:function(value){
if(value.length>0){
return true;
}else{
return "请输入计划组编号!";
}
}
},
{
xtype : "textfield",
fieldLabel: '计划组名称',
emptyText:'请输入计划组名称',
name:'planGroupName',
allowBlank:false,
validator:function(value){
if(value.length>0){
return true;
}else{
return "计划组名称!";
}
}
},
{
xtype : 'combo',
fieldLabel:'计划组类型',
name:'planGroupType',
hiddenName:"planGroupTypeValue",
emptyText:"请选择...",
mode :"local",
valueField:"paraValue",
displayField:"remark",
editable:false,
triggerAction:"all",
allowBlank:false,
store:pgTypeStore
}]
});
//定义装载表单的窗体
var pgAddWindow = new Ext.Window(
{
id : 'pgAdd-window',
title:'创建新计划组',
plain : true,
width : 460,
autoScroll : true,
modal : true,
items : [pgAddForm],
closeAction : "hide",
buttons : [{
text : "确 定",
handler : function() {
if(opName=='add'){
opUrl='addPlanGroup';
}else{
opUrl='updatePlanGroup';
}
var base_account_form = Ext.getCmp('pgAddForm').getForm('planGroupName');
if (!base_account_form.isValid()) {return;}
else {
pgAddForm.getForm().doAction("submit",
{
url : opUrl,
method : 'post',
timeout : 10000,
waitTitle : '请稍等……',
waitMsg : '提交中……',
success : function(form,action) {
var json = action.result;
checkAjaxSessionTimeOut(json);
if (json.messagecode=="0"){
showResult(); //弹出层
Pause(this,sleep_time);//调用暂停函数
this.NextStep=function(){ //暂停后执行的代码
salecatalogTree.root.reload();
salecatalogTree.expandAll();
Ext.getCmp("pgAdd-window").hide();
base_account_form.reset();
};
}
else
{
Ext.Msg.alert('消息', "操作失败:"+json.obj);
}
},
failure : function(form,action) {
Ext.Msg.alert('消息',"操作失败!");
Ext.getCmp("pgAdd-window").hide();
}
});
}
}
},
{text : "取 消",
handler : function() {
Ext.getCmp("pgAdd-window").hide();
}
}]
});
//树状结构菜单中的添加和修改操作
{
text : ' 添加新计划组',
hide:true,
//增加菜单点击事件
handler:function (node){
if(salecatalogTree.getSelectionModel().getSelectedNode().id!='1'){
Ext.Msg.alert("系统提示","计划组之间目前未关联!");
return;
}
Ext.getCmp('pgAddForm').getForm().reset();
Ext.getCmp('pgAddForm').getForm().getEl().dom.reset();//重置表单中所有组件,包括组件的属性
Ext.getCmp('pgAddForm').getForm().findField('planGroupCode').editable=true;
Ext.getCmp("pgAdd-window").setTitle('添加新计划组');
opName='add';
Ext.getCmp("pgAdd-window").show();
}
},
{
id:'editrMenu',
text : '修改计划组信息',
//修改菜单点击事件
handler:function (node){
Ext.getCmp('pgAddForm').getForm().reset();
Ext.getCmp("pgAdd-window").setTitle('修改计划组信息');
Ext.getCmp('pgAddForm').getForm().findField('planGroupCode').setValue(salecatalogTree.getSelectionModel().getSelectedNode().id);
Ext.getCmp('pgAddForm').getForm().findField('planGroupCode').editable=false;
Ext.getCmp('pgAddForm').getForm().findField('planGroupName').setValue(salecatalogTree.getSelectionModel().getSelectedNode().text);
opName='update';
Ext.getCmp("pgAdd-window").show();
}
分享到:
相关推荐
ExtJS 是一个强大的JavaScript库,...总之,动态添加表单是ExtJS开发中的一个重要技巧,它允许我们根据用户交互或程序逻辑灵活地调整表单结构。结合源码和工具,开发者可以构建出高度可定制和交互性强的Web应用界面。
EXTJS 是一个基于 JavaScript 的富客户端应用框架,用于构建功能丰富的、交互性强的 Web 应用程序。在提供的实例源码中,我们看到的是...对于初学者,这个实例是一个很好的起点,可以帮助理解 EXTJS 的基本概念和用法。
创建一个基本的表单,你可以这样写: ```javascript var formPanel = Ext.create('Ext.form.Panel', { title: '表单示例', width: 400, bodyPadding: 10, renderTo: Ext.getBody(), items: [{ xtype: '...
EXTJS是一个强大的JavaScript库,用于构建富客户端的Web应用程序,而水印则是一种有效的方法,可以防止用户对屏幕内容进行未经许可的复制或拍照。 首先,我们来看EXTJS中的水印实现。EXTJS允许开发者自定义组件,...
- **创建表单组件**:首先,定义一个FormPanel,并在其内部添加所需的表单字段,例如`Ext.form.field.Text`、`Ext.form.field.Date`等。 - **配置表单行为**:为FormPanel设置action属性,指定提交的URL,或者在...
ExtJS 是一个强大的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据绑定、模型、视图、控制器等概念,使得开发者能够创建功能丰富的、交互性强的前端应用。在这个有关ExtJS的...
从提供的标签“源码”和“工具”来看,可能包含的资源kk.doc可能是一个示例代码文档或教程,展示了如何在ExtJS中创建和操作动态表单的详细步骤和代码片段。对于初学者来说,阅读和理解这样的文档有助于深入掌握动态...
假设我们有一个名为`searchlist`的面板,其中包含了我们需要操作的表单,可以通过以下方式获取表单的值: ```javascript var objectjson = Ext.getCmp('searchlist').getForm().getValues(); ``` 这里,`Ext....
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
保存提交代码,extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...
ExtJS 是一个强大的JavaScript 框架,主要用于构建富客户端应用程序。它的数据绑定功能是其核心特性之一,允许开发者将用户界面元素与后端数据源紧密连接,实现数据的自动同步。在“extjs最简单的数据绑定和修改”这...
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
在开发Web应用程序时,ExtJS 是一个非常强大的库,它提供了丰富的组件和API来帮助开发者构建复杂的用户界面。其中一个常用的组件就是`ComboBox`(组合框),它可以用来创建一个包含可选择项目的下拉列表。在某些场景...
1. **ExtJS框架**:ExtJS是Sencha公司开发的一个开源JavaScript库,它提供了大量的预定义组件,如表格、面板、菜单、按钮等,用于构建复杂的、数据驱动的Web应用。它的MVC(模型-视图-控制器)架构和数据绑定机制...
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
### Extjs 表单验证详解 #### 一、引言 在现代Web开发中,确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架,提供了丰富的功能来...希望本文能帮助你更好地理解和应用Extjs的表单验证技术。
参考以前资源,用extJS4.2.1版本做的一个demo示例,希望对大家有用。
本话题主要关注如何在EXTJS3的Window组件中实现一个功能:当用户在窗口内修改了数据后,关闭窗口时提示用户是否保存更改。未进行修改的情况下,窗口可以直接关闭,不显示任何提示。 首先,我们需要创建一个基本的...
上述示例中,`^[a-zA-Z0-9_]*$`是一个正则表达式,它表示字符串只能由字母、数字和下划线组成,不能有其他字符。 4. **全局验证(Ext.form.Basic)**: EXTJS还提供了`Ext.form.Basic`类,允许在表单级别执行全局...