ExtJS示例

最新推荐文章于 2016-05-12 11:17:00 发布
最新推荐文章于 2016-05-12 11:17:00 发布
阅读量2k 收藏
点赞数
分类专栏： JavaScript 文章标签： ext header stylesheet function path
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangzikui/article/details/7094371
版权 
//<%@ page language="java" contentType="text/html; charset=utf-8"%>
Ext.Ajax.timeout = 15*60*1000;
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
Ext.BLANK_IMAGE_URL = "../ext-3.4.0/resources/images/default/s.gif";

var areaCodeStore = new Ext.data.Store({
	proxy: new Ext.data.HttpProxy({url:"../tcascommon/userDeptAction_queryUserAuthorizedAreaDept.action"}),
	reader: new Ext.data.JsonReader(
		{root: "authorizedDeptList"},
		[{name: "deptCode"}, {name: "deptName"}]
	),
	listeners:{
		load: function(s, r, o){
			if(r.length==1)
			{
				var ar = Ext.getCmp("areaCodeCombox");
				ar.setValue((r[0]).get("deptCode"));
			}
			
			//store.loadEx({params:{start:0, limit:gridPanel.getTopToolbar().pageSize}});
		}
	}
});

var areaPriceTypeStore = new Ext.data.Store({
	proxy: new Ext.data.HttpProxy({url:"queryPriceTypeByArea.action"}),
	reader: new Ext.data.JsonReader(
		{root: "root"},
		[{name: "priceTypeCode"}, {name: "priceTypeName"}]
	),
	listeners: {
		beforeLoad: function(){
			if(Ext.isEmpty(Ext.getCmp("areaCodeCombox").getValue(), false))
			{
				Ext.Msg.alert("提示", "请选择地区代码!");
				return false;
			}
			
  			this.baseParams['areaCode'] = Ext.getCmp("areaCodeCombox").getValue();
		},
		load: function(s, r, o){
			
			var data ={priceTypeCode: "", priceTypeName: "无方案类型"};
			var emptyOption = [new Ext.data.Record(data)];
			s.insert(0, emptyOption);
			
			var selectionModel = gridPanel.getSelectionModel();
			if(selectionModel.getSelections().length==1)
			{
				var rec = selectionModel.getSelected();
				addPriceTypeWin.getForm().setValues({
					"depotPrice.priceTypeCode": rec.get("priceTypeCode")
				});
			}
			else
			{
				addPriceTypeWin.getForm().setValues({
					"depotPrice.priceTypeCode": ""
				});
			}
			
			addPriceTypeWin.show();
			addPriceTypeWin.getForm().clearInvalid();
		}
	}
});

var toolButtons = [
  {
	id: "queryButton",
	xtype: "button",
	text: "查询",
	icon: "../images/search.gif",
	handler: function(){
		if(Ext.isEmpty(Ext.getCmp("areaCodeCombox").getValue(), false))
		{
			Ext.Msg.alert("提示", "请选择地区代码!");
			return false;
		}
		
		if(!(queryFormPanel.getForm().isValid()))
		{
			return false;
		}
		
		store.loadEx({params:{start:0, limit:gridPanel.getTopToolbar().pageSize}});
	}
  }
<app:isPermission code="/depotcfg/updateDepotPrice.action">
  ,
  '-',
  {
	xtype: "button",
	text: "网点单价配置",
	icon: "../images/edit.gif",
	handler: function(){
		var selectionModel = gridPanel.getSelectionModel();
		if( !(selectionModel.hasSelection()) )
		{
			Ext.Msg.alert("提示", "请选择要配置单价的记录!");
			return false;	
		}
		
		var selectedRecs = selectionModel.getSelections();
		//var firstAreaCode = selectedRecs[0].get("areaCode");
		var deptCodes = selectedRecs[0].get("deptCode");
		
		for(var i=1; i<selectedRecs.length; i++)
		{
			/*
			var otherAreaCode = selectedRecs[i].get("areaCode");
			if(firstAreaCode !== otherAreaCode)
			{
				Ext.MessageBox.show({
					title : "提示",
					msg : "请选择地区代码相同的记录进行批量修改!",
					buttons : Ext.MessageBox.OK
				});
				return false;
			}*/
			
			deptCodes += "_" + selectedRecs[i].get("deptCode");
		}
		
		addPriceTypeWin.getForm().setValues({
			"depotPrice.deptCodes": deptCodes
		});
		
		addPriceTypeWin.setTitle("网点单价配置");
		areaPriceTypeStore.loadEx();
	}
  }
</app:isPermission>
<app:isPermission code="/depotcfg/exportDepotPrice.action">
,
'-',
{
	xtype: "button",
	text: "导出",
	icon: "../images/export.gif",
	handler: function(){
		if(Ext.isEmpty(Ext.getCmp("areaCodeCombox").getValue(), false))
		{
			Ext.Msg.alert("提示", "请选择地区代码!");
			return false;
		}
		
		queryFormPanel.getForm().submitEx({
			url : "exportDepotPrice.action",
			waitTitle : '正在导出',
			waitMsg : '正在导出，请稍等...',
			method : "post",
			success : function(form, action){
				if(!(Ext.isEmpty(action.result.error, false)))
				{
					Ext.Msg.alert("提示", action.result.error);
					return false;
				}
				window.location = "../tcascommon/downloadExcel_downloadReport.action?key=" + encodeURI(encodeURI(action.result.importMsgFileName)) + "&downloadFileName=" + encodeURI(encodeURI("分点部单价配置导出"));
			}
		});
	}
}
</app:isPermission>
<app:isPermission code="/depotcfg/importDepotPrice.action">
	,
	'-',
	{
		xtype: "button",
		text: "导入",
		icon: "../images/copy.png",
		handler: function(){
			importPriceWin.show();
		}
	}
</app:isPermission>
];

var queryFormPanel = new Ext.form.FormPanel({
	region: "center",
	labelAlign: "right",
	title: "",
	labelWidth: 50,
	height: 100,
	frame: true,
	items:[
		{
			xtype: "fieldset",
			title: "查询条件",
			layout: "column",
			labelWidth: 90,
			items:[
				{
					layout: "form",
					columnWidth: .33,
				    items:[{
				    	xtype: "combo",
				    	id: "areaCodeCombox",
				    	fieldLabel: "地区代码",
				    	emptyText: "请选择",
				    	mode: "local",
				    	hiddenName: "areaCode",
				    	triggerAction: "all",
				    	valueField: "deptCode",
				    	displayField: "deptName",
				    	forceSelection: true,
				    	editable: true,
				    	resizable: true,
				    	allowBlank: false,
				    	width: 150,
				    	doQuery : comboxQueryAreaCode,
				    	minChars: 1,
				    	store: areaCodeStore
				    }]
				},
				{
					layout: "form",
					columnWidth: .33,
				    items:[{
				    	xtype: "textfield",
				    	fieldLabel: "网点代码",
				    	name: "deptCode",
				    	maxLength: 30,
				    	width: 150
				    }]
				},
				{
					layout: "form",
					columnWidth: .33,
				    items:[{
				    	xtype: "combo",
				    	width: 100,
				    	fieldLabel: "方案类型",
				    	emptyText: "请选择",
				    	mode: "local",
				    	hiddenName: "priceTypeCode",
				    	allowBlank: true,
				    	triggerAction: "all",
				    	valueField: "TYPE_CODE",
				    	displayField: "TYPE_NAME",
				    	editable: false,
				    	store: new Ext.data.SimpleStore({
				    		fields: ["TYPE_CODE", "TYPE_NAME"],
				    		data: [["", "全部"],["0", "未配置方案"],["A", "A"],["B", "B"],["C", "C"],["D", "D"],["E", "E"],["F", "F"],
				    		       ["G", "G"],["H", "H"],["I", "I"],["J", "J"],["K", "K"],["L", "L"],
				    		       ["M", "M"],["N", "N"],["O", "O"],["P", "P"],["Q", "Q"],["R", "R"],
				    		       ["S", "S"],["T", "T"],["U", "U"],["V", "V"],["W", "W"],["X", "X"],
				    		       ["Y", "Y"],["Z", "Z"]]
				    	})
				    }]
				}
			]
		}
		,{xtype: "panel", layout: "fit", border:false, height:20, items:[{xtype:"label", id:"deptCountLabel", text:""}]}
	]
});

var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});

var cm = new Ext.grid.ColumnModel(
		[sm,
		 {header:"地区代码", dataIndex:"areaCode", width:120},
		 {header:"网点代码", dataIndex:"deptCode", width:120},
		 {header:"网点名称", dataIndex:"deptName", width:160},
		 {header:"方案类型", dataIndex:"priceTypeCode", width:110},
		 {header:"<div style='text-align:left'>票数单价</div>", dataIndex:"priceBallotQty", width:140, renderer:Ext.util.Format.numberRenderer("0.0000"), align:"right"},
		 {header:"<div style='text-align:left'>重量单价</div>", dataIndex:"priceWeightQty", width:140, renderer:Ext.util.Format.numberRenderer("0.0000"), align:"right"},
		 {header:"<div style='text-align:left'>修改人工号</div>", dataIndex:"modifiedEmpCode", width:160, align:"center"},
		 {header:"修改时间", dataIndex:"modifiedTm", width:160}
		 ]);

var MyJsonReader = Ext.extend(Ext.data.JsonReader, {
	read: function(response){
        var json = response.responseText;
        var o = Ext.decode(json);
        if(!o)
        {
            throw {message: 'JsonReader.read: Json object not found'};
        }
        
        this.responseJsonObject = o;
        return this.readRecords(o);
    }
});

var myReader = new MyJsonReader(
	{totalProperty: "totalCount", root: "root"},
	[
	 	{name: "priceId"},
	 	{name: "areaCode"},
	 	{name: "deptCode"},
	 	{name: "deptName"},
	 	{name: "priceTypeCode"},
	 	{name: "priceBallotQty"},
	 	{name: "priceWeightQty"},
	 	{name: "createdEmpCode"},
	 	{name: "createdTm"},
	 	{name: "modifiedEmpCode"},
	 	{name: "modifiedTm"}
	]
);

var store = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({url:"queryPriceByPage.action"}),
		reader: myReader,
		listeners: {
			beforeLoad: function(){
				if(Ext.isEmpty(Ext.getCmp("areaCodeCombox").getValue(), false))
				{
					Ext.Msg.alert("提示", "请选择地区代码!");
					return false;
				}
				
				this.baseParams = queryFormPanel.getForm().getValues();
	  			this.baseParams['limit'] = gridPanel.getTopToolbar().pageSize;
			},
			load: function(){
				Ext.getCmp("deptCountLabel").setText("  网点总数：" 
						+ myReader.responseJsonObject.allDeptCount 
						+ "         已配置数："
						+ myReader.responseJsonObject.configDeptCount
						+ "         未配置数："
						+ "<font style='font-weight:bold;color:red'>" + myReader.responseJsonObject.notConfigDeptCount, false) + "</font>";
			}
		}
	});

var gridPanel = new Ext.grid.GridPanel({
	region: "center",
	store: store,
	sm: sm,
	cm: cm,
	frame: true,
	loadMask: true,
	viewConfig: {
		//forceFit: true,
		getRowClass: function(record, rowIndex, rowParams, store){
			if(Ext.isEmpty(record.data.priceBallotQty, false) 
				|| Ext.isEmpty(record.data.priceWeightQty, false))
			{
				 return "redFontForGrid";
			}
		}
	},
	tbar: new Ext.PagingToolbar({
		pageSize: 50,
		store: store,
		displayInfo: true
	})
});


var addPriceTypeWin = null;
function createPriceTypeDialog(){
	addPriceTypeWin = new Ext.Window({
		width: 550,
		height: 200,
		modal: true,
		border: false,
		bodyBorder: false,
		closable: false,
		resizable: false,
		layout: "fit",
		closeAction: "hide",
		title: "",
		tools: [{id:'close', handler:function(){addPriceTypeWin.hide(); addPriceTypeWin.getForm().reset();}}],
		getForm: function(){
			return Ext.getCmp("addPriceTypeForm").getForm();
		}
	});
	
	addPriceTypeWin.add({
		id: "addPriceTypeForm",
		xtype: 'form',
		bodyBorder: false,
		tbar:[
		      {text: "保存",
		    	icon: "../images/save.gif",
		    	minWidth: 40,
				handler:function(){
					var form = Ext.getCmp("addPriceTypeForm").getForm();
					if(!(form.isValid()))
					{
						Ext.Msg.alert("提示", "请正确填写表单信息！");
						return false;
					}
					
					form.submitEx({
						url: 'updateDepotPrice.action',
						clientValidation: true,
						waitTitle: "提示",
						waitMsg: "正在保存...",
						method: "post",
						success:function(form, action){
							if(!(Ext.isEmpty(action.result.error, false)))
							{
								Ext.Msg.alert("提示", action.result.error);
								return false;
							}
							
							Ext.Msg.alert("提示", "保存成功！");
							store.loadEx({params:{start:0, limit:gridPanel.getTopToolbar().pageSize}});
							gridPanel.getSelectionModel().clearSelections();
							addPriceTypeWin.hide();
							addPriceTypeWin.getForm().reset();
						}
					});
				}},
				'-'],
		items:{
			xtype:'panel',
			height: 180,
			layout:"column",
			frame:true,
			items:[
				{
					xtype:'hidden',
					name:'depotPrice.deptCodes',
					allowBlank:true
				},
				{
					xtype:'panel',
					labelWidth:130,
					layout:"form",
					columnWidth:0.9,
					labelAlign:'right',
					items:[
				       {
				    	xtype: "combo",
				    	width:300,
				    	fieldLabel: "方案类型",
				    	emptyText: "请选择",
				    	mode: "remote",
				    	hiddenName: "depotPrice.priceTypeCode",
				    	allowBlank: true,
				    	triggerAction: "all",
				    	valueField: "priceTypeCode",
				    	displayField: "priceTypeName",
				    	editable: false,
				    	store: areaPriceTypeStore
				    }]
				}]
		}
	});
};


var templateFileUrl = '<div><a href="../tcascommon/downloadExcel_downloadExcel.action?key={0}&downloadFileName={1}&metadataDirectory={2}" style="font-weight:bold;">分点部单价配置导入.xls</a></div>';
var importPriceWin = null;
function createImportDialog(){
	importPriceWin = new Ext.Window({
		width: 650,
		height: 200,
		modal: true,
		border: false,
		bodyBorder: false,
		closable: false,
		resizable: false,
		layout: "fit",
		closeAction: "hide",
		title: "导入",
		tools: [{id:'close', handler:function(){importPriceWin.hide(); importPriceWin.getForm().reset();}}],
		getForm: function(){
			return Ext.getCmp("importPriceForm").getForm();
		}
	});
	
	importPriceWin.add({
		id: "importPriceForm",
		xtype: 'form',
		fileUpload: true,
		bodyBorder: false,
		tbar:[
	      {text: "保存",
	    	icon: "../images/save.gif",
	    	minWidth:40,
			handler:function(){
				var form = Ext.getCmp("importPriceForm").getForm();
				var fileName = form.findField("importFile").getValue();
				if(Ext.isEmpty(fileName, false))
				{
					Ext.Msg.alert("提示", "请选择要导入的Excel文件!");
					return false;
				}
				
				var xlsReg = /.*\S+.*\.xlsx?$/g;
				if(!(xlsReg.test(fileName)))
				{
					Ext.Msg.alert("提示", "请选择类型为 Excel 的文件!");
					return false;
				}
				
				form.submitEx({
					url: "importDepotPrice.action",
					clientValidation: true,
					waitTitle: "提示",
					waitMsg: "正在保存...",
					method: "post",
					success:function(form, action){
						if(!(Ext.isEmpty(action.result.error, false)))
						{
							Ext.Msg.alert("提示", action.result.error);
							return false;
						}
						
						Ext.Msg.alert("提示", action.result.importMsg,
						function(e){
				        	if(action.result.hasError=="Y")
							{
								window.location = "../tcascommon/downloadExcel_downloadReport.action?key=" 
												+ encodeURI(action.result.importMsgFileName) 
												+ "&downloadFileName=" + encodeURI(encodeURI("分点部单价配置导入结果"));
							}
				        	else
				        	{
					        	gridPanel.getSelectionModel().clearSelections();
								importPriceWin.hide();
								importPriceWin.getForm().reset();
								//Ext.getCmp("queryButton").fireEvent("click");
								store.loadEx({params:{start:0, limit:gridPanel.getTopToolbar().pageSize}});
				        	}
						});
					}
				});
			}}],
		items:{
			xtype: 'panel',
			height: 200,
			layout: "column",
			frame:true,
			items:[
				{
					xtype: 'panel',
					labelWidth: 120,
					layout: "form",
					columnWidth: 1,
					labelAlign: 'right',
					items:[
				       {
							xtype: 'fileuploadfield',
							//inputType: "file",
							height: 40,
							name: 'importFile',
							emptyText: '请选择文件',
							fieldLabel: '选择文件',
							buttonText: '浏览...',
							width: 300,
							buttonCfg: {
						    	width: 80
						    }
						},
						{	xtype: 'label',
			            	html: String.format(templateFileUrl, 'DeptPriceTemplate_import', encodeURI(encodeURI("分点部单价配置导入")), "com/sf/module/depotcfg/META-INF"),
			            	fieldLabel: '模板下载'
			            }]
				}]
		}
	});
};


Ext.onReady(
	function(){
		new Ext.Viewport({
			layout: "border",
			items: [{xtype: "panel", layout: "fit", region:"north", frame:true, height:145, tbar:toolButtons, items:[queryFormPanel]},
			        gridPanel]
		});
		
		createPriceTypeDialog();
		areaCodeStore.loadEx();
		createImportDialog();
	}
);

zhangzikui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJs入门测试用例
xjh1991xjh的专栏
05-22 1359
一、简介 ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。
ExtJS 省、市、县 级联 示例
TKD03072010的专栏
03-26 4229
ExtJS 省、市、县级联示例 1.程序代码清单： Test var dataProvince = [ ['河北', '河北'], ['内蒙古', '内蒙古'] ]; var dataCityHebei = [ ['唐山', '唐山'], ['秦皇岛', '秦皇岛']
Extjs6示例中文版
02-07
Ext Js 6 By Example 中文翻译 内容来自网上，保留网页上内容不做更改。
一个ExtJS实例
程序员小董的专栏
05-12 792
聊聊ExtJS 这几天接触了一个项目 前台用的是extjs 发现这个东西还是有点意思的  就把前台的部分 剥离了下来 有兴趣的朋友可以当做模板学习 不多说先上效果图 这篇文章 可以看作是ext知识的一个汇总 因此我不想讲太多细碎的知识点 但我会一一之命这些知识点在哪里可以找到 另一方面 ext细碎的知识点确实太多 自己没有精力也不想搞的太清楚 够用就行
推荐一个ExtJS的综合示例
phphot
01-24 2098
由于ExtJS算是一重量级的客户端框架了，如何把他与传统的Web应用集成也是比较重要的，是所有的地方都用Ext，还是在某些地方使用，另外是每一个页面都引入ext-all.js，还是让整个应用只加载在这个大家伙一次，如何开发自定义的控件，如何充分使用javascript的面向对象特性对我们的应用进行封装，这些也是实际开发中非常关注的。　　学习ExtJS，感觉如果不在项目中使用的话，仅仅是看文
一个ExtJS的综合示例
天一的专栏
01-22 214
　　ExtJS算是一重量级的客户端框架了,如何把他与传统的Web应用集成？是所有的地方都用Ext，还是在某些地方使用，另外是每一个页面都引入ext-all.js，还是让整个应用只加载在这个大家伙一次？我们又该如何开发自定义的控件，如何充分使用javascript的面向对象特性对我们的应用进行封装呢？ 　　下面推荐我们团队的williamRaym及冷雨所做的一个ExtJS综合示例，是一个ExtJ...
Extjs小例子
hww的专栏
10-03 1800
<br />ExtJS本质上也是一个AJAX的框架，但是它和DWR有很大不同，首先，DWR是JAVA世界的产物，而ExtJS是后台无关的。也就是说，ExtJS的后台可以是.NET,PHP或者JAVA都可以。其实我们在网上看到的大部分例子都是PHP或者.NET,后台的。这说明ExtJS在所有后台都很受青睐。其次，DWR只关注客户端与服务器端的交互，没有自己的界面组件，而ExtJS最让人惊叹的就是其丰富而强大的界面组件，除此以外，它自身也能轻松地异步访问后台组件。现如今，RIA（富客户端应用）已经成了不争的趋势
EXTjs的案例（一）
UUID
03-20 2791
我把最近刚学的ext总结一下，方便自己以后查阅，大家有需要的也可以自己看。前面是一些基于4.0的用法，后面是工作中用到的案例基于3.0。 下面是一个登录页面的代码：（命名也不是很规范，因为当时着急出效果） (function(){ Ext.onReady(function() { var config = { fields:['province','post']
EXTJS 经典 案例
06-16
EXTJS经典案例 经典收藏版 EXTJS经典案例 经典收藏版 EXTJS经典案例 经典收藏版
ExtJS例子
shirui_java的专栏
01-16 2726
用ExtJS做的例子  ExtJS      function showDialog(){     Ext.MessageBox.alert("hello","Hello World!!!");     }    function showForm(){     var win=new
Extjs例子Extjs例子
01-21
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
extjs 4.2.1 examples 官方例子
11-27
http://docs.sencha.com/extjs/4.2.1/ 参考这个 ，与这个一样
extJs例子-------
12-16
ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子
extjs简单例子
02-16
extjs简单例子，适合初学者<br>
EXTJS示例
03-19
NULL 博文链接：https://jiulingchen.iteye.com/blog/732326
ExtJS简单示例
一切皆有联系
06-07 1112
创建windowExt.onReady(function() { var win1 = new Ext.Window({ height: 200, width: 300, modal: true }); win1.s
ExtJs grid使用详细
nxyc_twz
12-08 278
Ext2.0是一个javascript框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。 首先，一个表格应该有列定义，即定义表头ColumnMod...
ExtJs各种例子（示例及注释、代码）
livening的专栏
05-21 717
 http://topic.csdn.net/u/20100516/21/52BA5421-9F4F-4736-87FA-22CC9FCEB0A2.html http://leadergxg.25291.84g.com/ExtJs/example/index.html http://leadergxg.25291.84g.com/ExtJs/data/index.html
EXTJS框架详解与应用示例
示例程序，包含丰富的实例，覆盖了12个大类近100个示例，帮助开发者快速上手和理解EXTJS的用法；开发包本身，包含了整个EXTJS框架的源代码和资源，开发者可以根据需要进行定制和扩展。 EXTJS的开发包结构复杂且层次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值