`

ExtJS使用总结经验2

 
阅读更多
Ext.data.JsonStore使用HttpProxy加载数据时传递参数的两种方法


1.用baseParams属性
var Type1Store = new Ext.data.JsonStore({
fields: ['name','id'],
url: 'LoadData.aspx',
baseParams: {mode: 'type1'},
autoLoad: true
});

第一种方法传参数可能有时传递不到,为空,第二种比较保险
2.在Store load的时候传递
Type2Store.load({params:{mode: 'type2',type1: record.data.id}}); 


2、Ext.getCmp('imageReportID').update()
以上是更新组件id为'imageReportID'的展示html中的内容。。。

3、当数据库数据量过大的时候,进行查询,譬如下拉框HTTP请求数据,等待时间过长,则会请求失败,所以可做如下修改
Ext.Ajax.timeout = 180000;

延长Ext中的Ajax请求时间,则问题可以解决

4、ExtJS中Ajax请求,带参数传递的精简例子:(注释掉的传参也是行得通的)
点击Grid中一行数据产生反应
	grid.on("rowclick", function(grid, rowIndex, e) {
		
		var riskAdvice = document.getElementById("riskAdvice");
		var record = grid.getStore().getAt(rowIndex);
		if(riskAdvice){
			riskAdvice.innerHTML = "";
		}
		var riskAdviceID = record.get('flowRate');
		Ext.Ajax.request({
			method:'POST',
			url : 'queryRiskAdvice.action',//?riskAdviceID=' + riskAdviceID,
			params:{riskAdviceID : riskAdviceID},
			success : function(response, options) {
				var arrays = Ext.util.JSON.decode(response.responseText);
				riskAdvice.innerHTML = arrays.riskDealAdvice;
			}
	    });
	});


5、不带样式渲染面板   即去掉默认样式 ,配置以下属性即可 unstyled:true

6、提交数据时,提示用户等待数据返回信息
var loadMarsk = new Ext.LoadMask(Ext.getBody(), {
		msg : '正在查询中,请稍候......',
		removeMask : true
			// 完成后移除  
		});
	loadMarsk.show(); //显示  
当数据已经查询到,则取消该滚动提示,显示数据
storeReplys.on("load", function() {
		loadMarsk.hide();
		var totalCount = storeReplys.getTotalCount();
		if (totalCount == 0) {
			Ext.MessageBox.alert("提示", "没有查询到相关数据。");
			return;
		}
		Ext.getCmp('start').setDisabled(false);
		Ext.getCmp('clear').setDisabled(false);
		Ext.getCmp("labelt").add(fieldset);
		Ext.getCmp("logPanel").doLayout();
		Ext.getCmp("scrollPanel").doLayout();

		Ext.getCmp("panel").doLayout();
});


3、关于这个问题,花了我将近两天时间啊!都快把我弄哭了。。。~~~~(>_<)~~~~
问题:如何在JS文件中的Store对象得到非赋予给根属性 root 的对象的值,用啥EL表达式都行不通。。。。实在没办法了。。。试下结果成功了!
	var storeReplys = new Ext.data.Store( {
		proxy : new Ext.data.HttpProxy( {
			url : 'dailyBehaviorQuery.action',
			params : param,
			async : false, //ASYNC 是否异步( TRUE 异步 , FALSE 同步,此处需要引进一个外部js文件,此处文件已改动过,同步请求才能成功)
			success:function(response, options) {
				var arrays = Ext.util.JSON.decode(response.responseText);
				if(startDate == '' || endDate == ''){
					startDate = arrays.dateStart.replace("T"," ");
					endDate = arrays.dateEnd.replace("T"," ");
				}
			}
		}),
		reader : new Ext.data.JsonReader( {
			root : 'rows'
		}, [ {
			name : 'time',
			mapping : 'time',
			convert : function(v) {
				return v.replace("T", " ");
			}
		}])
	});


4、在ExtJS中用Store对象请求信息,如何动态请求,对Store中的数据实现动态更新,可采纳如下方法:(此处个人觉得实现以上要求,只要再次调用Store对象的load方法就行了。。。)
storeReplys.load( {
					params : param,
					callback : function(records, options, success) {
						
					},
					scope : storeReplys,
					add : false  // 此处为false表示不追加在原有数据的后面,清除原有数据。
				});


5、动态加载GRID头部标题、即显示的列并对数据重新请求并加载
StoreQueryParams.on('load', function() {
		var size = StoreQueryParams.getCount();
		var flag = false;
		//alert(size);
		for (var i = 0; i < size; i++) {
			var temp = StoreQueryParams.getAt(i).get('name');
			cm.setHidden(Number(temp) - 1, false);
		}
		grid.reconfigure(gridStore, cm);
		grid.getView().refresh();
		gridStore.load({
			params : param
		});
	});


6、在ExtJS中this.form.el.is.undefined
在ExtJS中,经常会需要用到一个窗口中嵌入一个form表单,进行表单提交,在提交表单并且关闭窗口,这个时候,会报上面错误,因为form在提交表单的时候,ajax提交表单是基于iframe的,需要去取window里面form的值,而form的window值此时已经被销毁,form.dom已经回收,正常情况下需要回调调用,如下:
{xtype:'button',text:'提交',iconCls:'save',handler:function(){
 formPanel.getForm().submit({params:{},failure:function(form,action)}
分享到:
评论

相关推荐

    EXTJS Grid总结例子

    本总结例子将深入探讨EXTJS Grid的核心特性和使用方法,通过源代码分析,帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...

    Extjs开发总结(转).pdf

    ExtJS是一种富互联网应用(RIA)开发框架,专注于构建客户端应用程序。与Prototype和jQuery等轻量级库不同,ExtJS提供了完整的组件模型和丰富的用户...在实际项目中,不断学习和总结经验,是提升ExtJS开发技能的关键。

    ExtJS教程_完整版

    ExtJS教程全面介绍了ExtJS框架的基本功能和高级特性,适用于有Web开发经验的开发者,尤其是希望快速构建丰富用户界面的人员。ExtJS是一个基于JavaScript的开源前端框架,它提供了丰富的用户界面组件和数据处理机制,...

    经验总结-Extjs(一)数据交互设计

    标题中的“经验总结-Extjs(一)数据交互设计”表明了本文主要关注的是ExtJS框架在实现数据交互方面的设计和实践经验。ExtJS是一个流行的JavaScript库,用于构建富客户端Web应用,尤其以其强大的数据管理、组件化和...

    Extjs学习—总结的extjs的一些常用小知识点

    本文将根据一个月的学习经验,总结一些对于初学者来说非常有用的小知识点。 #### 二、基础配置与属性 1. **`disabled` 属性**: - 作用:控制组件是否禁用。 - 示例代码:`disabled: true` - 说明:当设置为 `...

    Extjs6示例中文版

    综上所述,《Extjs6示例中文版》不仅提供了详细的ExtJS6教程,还分享了作者的实践经验和个人见解,这对于想要深入学习和掌握ExtJS6的开发者来说是一份宝贵的资源。通过学习本书,读者不仅可以了解ExtJS6的基础知识和...

    ExtJs各个版本2-6API汇总.zip

    总结来说,这个压缩包是学习和开发ExtJS应用的宝贵资源,涵盖了从基础到高级的各种知识,包括组件使用、数据绑定、布局管理、MVC架构、触摸支持、多平台适配等多个方面。无论是初学者还是经验丰富的开发者,都能从中...

    ExtJS介绍及应用举例

    总结来说,这个压缩包提供了一个全面的学习资源,涵盖了从理论到实践的所有方面,适合初学者入门和经验丰富的开发者参考。通过阅读和研究这些内容,你可以了解到ExtJS如何帮助你构建高性能、响应式的Web应用,同时...

    深入浅出ExtJS(第2版).

    总结起来,《深入浅出ExtJS(第2版)》这本书应该涵盖了ExtJS的基础知识、核心特性以及实际应用案例等内容,适合希望深入了解并掌握该框架的开发者阅读。通过本书的学习,相信读者能够更好地利用ExtJS的强大功能来...

    EXTJS 5.1 Examples

    ### EXTJS 5.1 Examples知识点详解 #### 一、EXTJS 5.1 Examples简介 EXTJS 5.1 Examples是一系列针对EXTJS 5.1版本的...而对于有经验的开发者,则可以通过Examples进一步挖掘EXTJS的潜在能力,提升项目的整体水平。

    learning extjs 经典教材

    - **Shea Frederick**:具有多年Web开发经验,擅长使用ExtJS构建高效稳定的Web应用程序。 - **Colin Ramsay**:在前端技术和用户体验设计方面有着深厚的功底,对ExtJS有独到见解。 - **Steve 'Cutter' Blades**:...

    extjs资料打包

    虽然这个文件名暗示它可能与Java编程语言相关,但考虑到其在EXTJS资料包中,我们可以推测这可能是作者或分享者通过Java开发者视角来探讨EXTJS的使用,或者是如何将EXTJS与Java后端技术结合的经验总结。在阅读这份...

    php+ExtJS 开发实战

    - **最佳实践**: 分享了一些在开发过程中积累的最佳实践,包括代码优化、性能提升等方面的经验总结。 #### 6. 学习资源与进阶指南 对于初学者来说,本书不仅提供了详细的理论介绍,还附带了丰富的实践指导。 - **...

    extjs资料大全

    - `Ext常用属性总结.doc`:总结了ExtJS中常用的组件属性,对理解和配置组件非常有用。 - `Extjs_前后台数据交互.doc`:讲解了ExtJS如何与服务器进行数据交互,包括Ajax请求、Store与Model的使用等。 - `extjs_...

    MyEclipse安装ExtJS插件–Spket IDE

    在现代Web开发领域,使用诸如ExtJS这样的框架能够显著提升开发效率与应用性能。为了更好地集成ExtJS到开发环境中,开发者通常会选择安装专门的插件来增强IDE的功能。本文将详细介绍如何在MyEclipse中安装并配置Spket...

    跟我一起学extjs5前20节的代码

    2. **环境搭建**:描述中提到需要根据前几节的说明搭建环境,这意味着你需要安装EXTJS5的SDK,设置好开发环境(例如使用Sencha CMD工具),并配置好Web服务器以运行示例代码。 3. **文件解析**: - **bootstrap....

    ExtJS使用笔记

    在使用ExtJS进行开发时,还有一些经验总结值得注意。例如,在布局时,推荐避免使用column布局方式,尤其是在IE6浏览器中存在兼容性问题,而应该使用hbox布局。对于复杂组件的布局,应尽量避免使用form布局,特别是在...

    Extjs2.0中文文档

    总结而言,Ext.js 2.0中文文档涉及了Ext.js框架的核心概念、类和方法,适合有一定JavaScript基础和前端开发经验的开发者。通过阅读该文档,开发者可以快速掌握Ext.js 2.0的使用,有效地开发出界面丰富、交互性强的...

    ExtJs(开发指南书籍+实例+可视化工具)

    总结来说,这个资源包提供了全面学习ExtJs的途径:理论书籍让你扎实基础,实例项目让你实战演练,而可视化工具则帮助你高效地设计界面。无论你是初学者还是有一定经验的开发者,这个资源包都能满足你的需求,助你在...

Global site tag (gtag.js) - Google Analytics