Ext与后台（一）

[size=small][b]一段闲话：[/b]
最近做的项目用到了ExtJs，就像每个刚接触Ext的朋友一样，迷茫、无助。
Ext很多资料都是讲解Ext的界面怎么画，很少有人提及到跟后台的交互，以至于一个小小的功能在网上找好长时间，而且还要测试很久才好用。经过一个多月的使用，以及网上一些朋友的文章中的提示，总算是会用了一点。在这里，我认为大家对Ext具备了一定基础，并把自己的一些Ext的用法给大家分享一下，希望对大家能起到抛砖引玉的作用，如果大家发现错误，希望批评指正，共同提高！(附件是我们项目的一个截图)
转载请注明出处：http://simplehumn.iteye.com/blog/484513
[b]言归正传：[/b]
我用的Ext版本是Ext2.21，说到这里顺便提一下，Ext2.2的iframe有bug，关于Ext性能不再多说，由于我们系统是要求跟另一个项目（工作流）集成，所以框架选择的是struts1+Spring2.5+hibernate3.2+Ext2.21。
1.列表Ext.grid.GridPanel显示
关于列表，开始我单纯而善良地认为Ext能自动分页，把json串传给grid就行了，但是我使用的过程中才发现，我的想法不支持Ext。。。哦，好像说反了
说下我的列表实现：
前台：

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
	new Ext.grid.RowNumberer(),
	sm, 
	{header:'订货会编码',width:120,dataIndex:'dhhCommonId'},
	{header:'订货会名称',width:200,dataIndex:'dhhName'},
	{header:'供货月',width:120,dataIndex:'supplymonth'},
	{header:'供货段',width:120,dataIndex:'supplysection'},
	{header:'供货日',width:120,dataIndex:'supplydate'},
	{header:'创建时间',width:180,dataIndex:'createdate'},
	{header:'创建人',width:120,dataIndex:'createuser'}
]);
// 默认情况下列是可排序的
cm.defaultSortable = true;
var store = new Ext.data.JsonStore({
	url:'../../om/supplySection.do?method=findPageSupplySection',
	totalProperty:'totalProperty',
	root:'root',
	fields:[
		{name: 'ssJavaid'},
		{name: 'dhhCommonId'},
		{name: 'dhhName'},
		{name: 'supplymonth'},
		{name: 'supplysection'},
		{name: 'supplydate'},
		{name: 'createdate'},
		{name: 'createuser'}
	]
});
var orderColumnGrid = new Ext.grid.GridPanel({
	height:370,
	bodyStyle:'width:100%;',//宽度用了样式的写法
	stripeRows:true,//隔行换色
	loadMask: {msg:'正在加载数据，请稍侯……'},	
	store:store,
	cm: cm,	
	sm:sm,		
	bbar: new Ext.PagingToolbar({
		plugins:new Ext.ux.Andrie.pPageSize(),	//列表显示多少行
		pageSize:10,
		store: store,
		displayInfo: true,
		displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
		emptyMsg: "没有记录"
	})

});
store.load({params:{start:0,limit:10}});

其中，store是从后台获得json串的，在列表的最后要加上store.load({params:{start:0,limit:10}});触发store调URL获得json串数据，当然store的写法很多这个不多说。
json串格式：
如

：{totalProperty:100,root:[{id:0,name:’name0’,descon:’descon0’},{id:1,name:’name1’,descon:’descon1’},{id:2,name:’name2’,descon:’descon2’}]
}

“totalProperty”是列表总条数，跟store的totalProperty:'totalProperty'单引号的那个名字一样就行了，又如：store里totalProperty:'total'单引号里的名字改为'total'，则json串为"]：{total:100,。。。，root同理。
plugins：
grid的bba多了一个rplugins:new Ext.ux.Andrie.pPageSize(), //列表显示多少行
这是一个下拉框，功能是“每页显示多少行”且支持分页，是我从网上DOWN的资源。使用： 引用<script type="text/javascript" src="../../resources/js/pPageSize.js"></script>（路径自己改），然后在bbar里加上就行了，[b]附件在最后附上[/b]。
后台：
关于分页的后台代码不多说，说一下分页需要的参数，向后台传入的参数为：start、limit，分别表示从第start条开始，查询limit条数据，当点击下一页的时候start会随之变化。
返回时的代码：

response.setContentType("text/json;charset=utf-8");
response.getWriter().write(str);

其中str是你拼好的json串，格式在上面已经提到了。
2.列表Ext.grid.GridPanel增删查改
2.1增加
定义

var tbars = ['->',// 右对齐
		'-', {
			text : '<img src="../../resources/images/img/add.gif"/>新增',
			tooltip : '新增订货分段记录',
			handler : addOrderColumn
		}, '-'];

在GridPanel里加入一行tbar:tbars,
这样在列表的表头上面就会出现一个“新增”按钮，新增调用一个funciont函数，所有funciont中用到的组件都写在方法里，打开和关闭时利于创建、销毁，
代码：

var addOrderColumn = function() {
	// 弹出窗口的按钮集合
	var orderColumnButtons = [{
		xtype : 'submit',
		text : '保存',
		handler : function() {
			if(orderColumnForm.getForm().isValid()){
				//新增时判断供货段截止月不小于开始月
				if(Ext.get('ssStartDate').getValue() > Ext.get('ssEndDate').getValue()){
					Ext.MessageBox.alert("友情提示", "[供货段开始月]应小于等于[供货段截止月]!"); 
					return false;
				}			
				orderColumnForm.getForm().submit({ 
					url:'../../om/supplySection.do', 
					params:{method:'saveSupplySection'}, 
					method:'post',
					waitMsg:'正在保存，请稍等...', 
					success:function(form,action){
						orderColumnWindow.destroy();
						Ext.Msg.alert("友情提示","保存目标成功!",
							function(){
								store.reload();
							},this
						);
					}, 
					failure:function(form,action){ 
						Ext.MessageBox.alert("友情提示", "服务器出现错误请稍后再试！");
					} 
				}); 
			}
		}
	}, {
		text : '取消',
		handler : function() {
			orderColumnWindow.destroy();
		}
	}];


	var dhhStore =  new Ext.data.Store({
		proxy : new Ext.data.HttpProxy({
			url:'../../om/oM.do?method=findAllOMs'
		}), 
		reader : new Ext.data.JsonReader({
		root : 'root'		
		},[
			{name : 'javaid',mapping : 'javaid'},
			{name : 'omName',mapping : 'omName'}
		])
	});
	// 订货会名称
	var dhhmc = new Ext.form.ComboBox({
		fieldLabel : '订货会',
		hiddenName:'javaid',
		autoDestroy : true,
		store : dhhStore,
		valueField : 'javaid',
		displayField : 'omName',
		typeAhead : true,
		mode : 'local',
		triggerAction : 'all',
		emptyText : '请选择订货会',
		selectOnFocus : true,
		forceSelection:true,
		editable : true,
		width : widthValue
	});
	dhhStore.load();
	// 订货会组表单
	var orderColumnForm = new Ext.FormPanel({
		// title: '经销商开户申请及提交',
		bodyStyle : 'padding:5px',
		frame : true,
		layoutOnTabChange : true,
		autoHeight : true,
		autoWidth : true,
		labelWidth : 150,
		labelAlign : 'right',
		items : [dhhmc,{
			xtype : 'datefield',
			fieldLabel : '供货段开始月',
			name : 'ssStartDate',
			emptyText : 'YYYY-MM',
			format: 'Y-m', 
			allowBlank:false,
			width : 150
		},{
			xtype : 'datefield',
			fieldLabel : '供货段结束月',
			emptyText : 'YYYY-MM',
			format: 'Y-m', 
			name : 'ssEndDate',
			allowBlank:false,
			width : 150
		}],
		buttons : orderColumnButtons
	});
	// 创建表单结束

	// 将表单放到一个窗口中，并显示
	var orderColumnWindow = new Ext.Window({
		title : "订货会组信息表单",
		width : 400,
		height : 200,
		autoScroll : true,
		collapsible : true,
		maximizable : true,
		layout : 'fit',
		// plain:true,
		// bodyStyle:'padding:5px;',
		modal : true,
		items : orderColumnForm
	});

	orderColumnWindow.show();
	return orderColumnForm;
};

如果新增的时候想要初始化一些数据的话
在“新增”按钮加上类似这样一段代码

handler : function() {
	var dhhId = selectDhhForm.form.findField('javaid').getValue();
	var hqForm = addOrderColumn ();
	hqForm.load({
		url : '../../om/dhhDate.do?method=initDhhDate&dhhId='+ dhhId,
		waitMsg : '正在载入数据，请稍等...',
		method:"get",
		success:function(form,action){},
		failuer : function(){
			 Ext.Msg.alert('友情提示', '数据加载失败请重试！');
		}
	});
}

即打开addOrderColumn 窗口时，给窗口里的字段赋值
增加时在后台用FormBean直接取值（哎，struts1），然后该保存就保存该变动就动动，值得一提的是，后台要返回成功或失败的json信息，前台接到成功的信息后销毁窗口orderColumnWindow.destroy();，然后刷新列表的数据store.reload();(参考保存按钮代码)，界面不刷新不跳转很人性化。
2.2删除
在bbars里再加一个按钮
var tbars = ['->',// 右对齐
'-',
{
text : '<img src="../../resources/images/img/add.gif"/>新增',
tooltip : '新增订货分段记录',
handler : addOrderColumn
}, '-',{
text:'<img src="../../resources/images/img/delete.gif"/>删除',
tooltip : '删除订货分段记录',
handler : deleteSS
},'-'];
删除比增加相比要简单的多，在grid的store里有一个'ssJavaid'，这个是显示列表时JSON串传进来的，虽然不在界面显示，但是每条记录已经有这个ID了，“修改”时会具体说到这点，删除时根据这个ID去后台删就行了。

var deleteSS = function(){	
	var record = sm.getSelected();
	if(record&&sm.getCount()==1){
		Ext.MessageBox.confirm('提示信息', '您确定要删除所选的记录吗?', function(buttonobj){
		if(buttonobj=='yes'){
			var myCon = new Ext.data.Connection();
			waitMsg:'正在删除数据，请稍等...';
			myCon.request({
		       url:'../../om/supplySection.do?method=deleteSupplySection&ssId=' + record.get('ssJavaid'),
		       method:'post',
		       waitMsg:'正在删除，请稍等...', 
		       successProperty:'success',
		       success:function(transport){
					Ext.Msg.alert("友情提示","成功删除数据!",
						function(){
							store.reload();
						},this
					);
				}, 
				failure:function(form,action){ 
					Ext.MessageBox.alert("友情提示", "服务器出现错误请稍后再试！");
				} 
		      },this);
			}
		});
	}else{
		Ext.Msg.alert('友情提示','您必须选择一行数据以便进行办理！');
	}

};

关于批量删除，网上有一些例子，这里不多说。[/size]