Ext的学习(三):数据添加完整操作

上面了解了一下window了之后..直接取下同事项目添加操作.再自己搞了个例子！
addCategory.js

var categoryName = new Ext.form.TextField({
		fieldLabel: '类别名',
		emptyText: '请输入类别的名字',
		allowBlank: false,
		name:'categoryName',
		msgTarget: 'under'// 验证错误信息显示地点，加上这个属性，才会有验证效果
	});

从上面代码中 可以发现组件FormPanel和TextField2个主要的组件.先说下TextField
顾名思义TextFeild就是和Html的那个text属性是差不多的！不过ext提供了一个可以直接验证的效果。其下面的几个属性:

1.fieldLabel: //文本框提示名字,

2.emptyText: //'请输入类别的名字',

3.allowBlank: //是否允许为空.默认情况下为true.

4.name://用于别的容器对其添加,

5.msgTarget: //验证错误信息显示地点，加上这个属性，才会有验证效果

这是一个文本框组件对象。现在可以将组件对象向formPanel进行添加
addCategory.js

var addcategoryForm = new Ext.form.FormPanel({
baseCls: 'x-plain',
        labelWidth: 55,
        defaultType: 'textfield',
        items: [
           	categoryName,//通过名字获取到相应的组件添加到该容器中
           	categoryDescription
        ]
}); 

属性的解析:

//input的各种类型（这个大家都知道，就只列了几个典型的）
radio
check
text(默认)
file
password等等

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格式的String
							var 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格式的String
							var 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();
            }
        }]
 	});

属性上篇文章做了解析就不多说.说下一些操作！
进度条的显示
waitTitle:进度条的标题
waitMsg:进度条的内容
[img]http://dl.iteye.com/upload/attachment/193661/1a22c888-e434-377a-9e06-0d35e87ec0a5.jpg[/img]
其中的一些响应是通过json传输数据到struts2进行解析.
效果为

[img]http://dl.iteye.com/upload/attachment/193652/afec6645-cb36-3f3e-bf79-fdefc673c0b6.jpg[/img]


[img]http://dl.iteye.com/upload/attachment/193656/a697968a-5351-38a9-a5e8-948c232aa633.jpg[/img]

下面提供源码下载.