Ext的学习(三):数据添加完整操作
上面了解了一下window了之后..直接取下同事项目添加操作.再自己搞了个例子！
addCategory.js
var categoryName = new Ext.form.TextField({fieldLabel: '类别名',emptyText: '请输入类别的名字',allowBlank: false,name:'categoryName',msgTarget: 'under'// 验证错误信息显示地点，加上这个属性，才会有验证效果});1.fieldLabel: //文本框提示名字,2.emptyText: //'请输入类别的名字',3.allowBlank: //是否允许为空.默认情况下为true.4.name://用于别的容器对其添加,5.msgTarget: //验证错误信息显示地点，加上这个属性，才会有验证效果
var addcategoryForm = new Ext.form.FormPanel({baseCls: 'x-plain', labelWidth: 55, defaultType: 'textfield', items: [ categoryName,//通过名字获取到相应的组件添加到该容器中 categoryDescription ]}); //input的各种类型（这个大家都知道，就只列了几个典型的）radiochecktext(默认)filepassword等等1.labelAlign:fieldlabel的排列位置，默认为"left"，其他两个枚举值是"center","right"2.labelWidth:fieldlabel的占位宽3.method:"get"或"post"4.url："提交的地址"5.submit:提交函数 //这里是后面window调用该submit的函数进行使用
var addCategoryWin = new Ext.Window({ title: '添加类别', width: 260, height:240, minWidth: 300, minHeight: 200, layout: 'fit', plain:true, closeAction :'hide', listeners:{ "close":function(){ //addWindow.hide(); } }, bodyStyle:'padding:5px;', closable :true,// 窗体右上角是否有关闭按钮 buttonAlign:'center',// 窗体中按钮的摆放方式 items: addcategoryForm, buttons: [{ text: '确定', handler:function(){// 按钮点击后的响应函数 // 提交数据 if(addcategoryForm.getForm().isValid()) // 判断验证是否过关 { addcategoryForm.getForm().submit({// 提交细节 waitMsg : '请稍等一下',waitTitle:'等待',method:'POST', url:'/struts2_ext/ext/core/ajax/addCategory.action',// 提交的目标地址，这是一个url,// 提交结果成功返回后自动触发的函数 success :function(form,action) { // 获取后台响应回来的JSon格式的Stringvar msg = action.response.responseText;// 将JSon格式的String转换成JavaScript格式的对象var obj = Ext.decode( msg );var msgData = obj.resultMsg;Ext.Msg.alert("提示", msgData ); }, // 提交结果失败后自动触发的函数 failure :function(form,action) { // 获取后台响应回来的JSon格式的Stringvar msg = action.response.responseText;// 将JSon格式的String转换成JavaScript格式的对象var obj = Ext.decode( msg );var msgData = obj.resultMsg;Ext.Msg.alert("提示", msgData ); } }); addCategoryWin.hide(); } else { Ext.MessageBox.alert( "验证失败" ); } } },{ text: '取消', handler:function(){ // 隐藏窗体 addCategoryWin.hide(); } }] });
