`
wjm0729
  • 浏览: 15351 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

ExtJS项目 知识点终结(1)

阅读更多

最近的一个ExtJS(version:3.2)的项目中学习和利用了ExtJS,现在罗列如下以备忘:

 

1、适用于TextField、NumberField 添加一个 sideText 标签显示在右侧如必填项的 * 号等标记

/**适用于TextField、NumberField 添加一个 sideText 标签显示在右侧如必填项的 * 号等*/
Ext.override(Ext.form.TextField, {
	sideText : '',
	onRender : function(ct, position) {
		Ext.form.TextField.superclass.onRender.call(this, ct, position);
		if (this.sideText != '' && !this.triggerAction) {
			this.sideEl = ct.createChild({
						tag: 'div',
						style:'position:absolute;left:'+(this.x+this.width)+';top:'+(this.y)+';padding-left:2px;display:inline-block;display:inline;',
						html: this.sideText
					});
		}
		if(this.readOnly){//为只读的text加上特定的样式--background-image:url('')去掉本身的背景图片
			/*边框:b5b8c8 背景色:dfe8f6  background-color:#DDDDDD; border:1px*/
			if(this.xtype=='numberfield'){
				if(this.style){
					this.style+=" text-align:right; background-color:#dfe8f6; border-color:#b5b8c8;background-image:url('')";
				}else{
					this.style=" text-align:right; background-color:#dfe8f6; border-color:#b5b8c8;background-image:url('')";
				}
			}
			else{
				if(this.style){
					this.style+="background-color:#dfe8f6; border-color:#b5b8c8;background-image:url('')";
				}else{
					this.style="background-color:#dfe8f6; border-color:#b5b8c8;background-image:url('')";
				}
			}
		}
		if(this.display){//用于显示的样式,只有下边的border
			this.style="border-style: none none groove none;background-image:url('');";
			this.readOnly=true;
			if(this.ext_style){
				this.style+=this.ext_style;
			}
		}
	}
});

  

2、解决combobox模糊查找(ExtJS 默认的Combobox的输入过滤是从第一个字符开始的,我们一般需要它能够支持模糊匹配,现在就只好又累修改源码了)

//解决combobox模糊查找
Ext.override(Ext.form.ComboBox, {
doQuery : function(q, forceAll){
        q = Ext.isEmpty(q) ? '' : q;
        var qe = {
            query: q,
            forceAll: forceAll,
            combo: this,
            cancel:false
        };
        if(this.fireEvent('beforequery', qe)===false || qe.cancel){
            return false;
        }
        q = qe.query;
        forceAll = qe.forceAll;
        if(forceAll === true || (q.length >= this.minChars)){
            if(this.lastQuery !== q){
                this.lastQuery = q;
                if(this.mode == 'local'){
                    this.selectedIndex = -1;
                    if(forceAll){
                        this.store.clearFilter();
                    }else{
                        this.store.filter(this.displayField, q ,true);
                    }
                    this.onLoad();
                }else{
                    this.store.baseParams[this.queryParam] = q;
                    this.store.load({
                        params: this.getParams(q)
                    });
                    this.expand();
                }
            }else{
                this.selectedIndex = -1;
                this.onLoad();
            }
        }
    }
});

 

3、适用于ComboBox  添加一个 sideText 标签显示在右侧如必填项的 * 号

 

/**适用于ComboBox  添加一个 sideText 标签显示在右侧如必填项的 * 号等*/
Ext.override(Ext.form.ComboBox, {
	sideText : '',
	onRender : function(ct, position) {
		Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
		if (this.sideText != '') {
			//this.sideEl = ct.first('div').createChild({
			this.sideEl = ct.createChild({
						tag: 'div',
						style:'position:absolute;left:'+(this.x+this.width)+';top:'+(this.y)+';z-index:900;padding-left:2px;display:inline-block;display:inline;',
						html: this.sideText
					});
		}
		if (this.hiddenName) {
			this.hiddenField = this.el.insertSibling({
						tag : 'input',
						type : 'hidden',
						name : this.hiddenName,
						id : (this.hiddenId || this.hiddenName)
					}, 'before', true);

			// prevent input submission
			this.el.dom.removeAttribute('name');
		}
		if (Ext.isGecko) {
			this.el.dom.setAttribute('autocomplete', 'off');
		}

		if (!this.lazyInit) {
			this.initList();
		} else {
			this.on('focus', this.initList, this, {
						single : true
					});
		}
	}
});  

 

4、解决Grid中文排序混乱--客户端排序

		//解决中文排序--客户端排序
		Ext.data.Store.prototype.applySort = function() {
		    if (this.sortInfo && !this.remoteSort) {
		        var s = this.sortInfo, f = s.field;
		        var st = this.fields.get(f).sortType;
		        var fn = function(r1, r2) {
		            var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
		            if (typeof(v1) == "string") {
		                return v1.localeCompare(v2);
		            }
		            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
		        };
        		
		        this.data.sort(s.direction, fn);
		        if(this.snapshot && this.snapshot != this.data) {
		            this.snapshot.sort(s.direction, fn);
		        }
        
		        for(var i=0;i<tempArray.length;i++){
		        		this.data.add(tempArray[i]);
		        }
		        if(this.snapshot&&tempArray.length>0){
		        	for(var i=0;i<tempArray.length;i++){
		        		this.data.add(tempArray[i]);
		        		this.snapshot.add(tempArray[i]);
		        	}
		        }
			}
		};

 

5、处理加合计行后分页工具栏的计数错误

Ext.PagingToolbar.prototype.updateInfo=function(){
 if(this.displayItem){
	 var count = this.store.getCount();
	 if(this.store.sumcol){
	 	if(this.cursor+count==this.store.getTotalCount()+2){
	 		count-=2;
	 	}else{
	 		count-=1;
	 	}
	 }
	 var msg = count == 0 ?
	 this.emptyMsg :
	 String.format(
		 this.displayMsg,
		 this.cursor+1, this.cursor+count, this.store.getTotalCount()
	 );
	 this.displayItem.setText(msg);
 }
};

 6、设置ajax请求时间默认600秒

Ext.data.Connection.prototype.timeout='600000';

 

7、重写onFocus方法,当TextFieldreadOnly为 true时,实现TextField不获取焦点

Ext.override(Ext.form.TextField, {
	onFocus : function(){
	Ext.form.TextField.superclass.onFocus.call(this);
		if(this.readOnly){
				this.blur();
		}
	}
});

 

8、解决Ajax请求session超时

Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);   
function checkUserSessionStatus(conn,response,options){
	var h=response.getAllResponseHeaders();
    if(h.indexOf("reload")!=-1){//窗口标题我写在ExtJS的国际化配置文件中,这里是引用的
    	Ext.MessageBox.alert(Ext.MessageBox.buttonMsg.t,Ext.MessageBox.buttonMsg.s,function(){
    	var plocation=parent.window.location;
			parent.window.location.href=location.protocol+"//"+location.host+plocation.pathname.match(/\/[a-z_0-9A-Z]{1,}\//g)[0];		    		
    	});
    }
}

 其中在Action中有,最好是写在一个覆盖所有请求的拦截器里面:

if(session.get("user")==null){
	try {
		response.setHeader("reload", "timeout");
	} catch (Exception e) { 
		e.printStackTrace();
	}
}

 

 

 9、重写Ext的grid行选中样式Selection Styles,使当前行看起来更清晰

.x-grid3-row-selected .x-grid3-cell-inner {
	/*border:1px dotted;*/
	font-weight: bold;
	color:'<%=lineColor%>'
}

 

 

 

 待续......

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1
1
分享到:
评论

相关推荐

    Extjs项目之个人理财项目源码

    Extjs项目之个人理财项目源码 Extjs项目实例

    extjs6.6项目示例

    通过研究这个示例项目,开发者可以学习到以下知识点: 1. ExtJS 的基本架构和组件系统。 2. 如何使用Sencha CMD进行项目初始化、构建和部署。 3. SASS 和主题定制,理解`base-color`的概念和使用方法。 4. 如何组织...

    EXTJS讲解个人项目经历

    以下是对EXTJS相关知识点的详细解释: 1. **引入EXTJS库**: 在使用EXTJS开发时,我们需要在HTML页面中引入EXTJS的核心样式表和JavaScript文件。这通常包括`extjs/resources/css/ext-all.css`,`extjs/adapter/ext...

    extjs6.6框架的web项目(登录+首页)

    以下是关于EXTJS 6.6框架以及该项目的关键知识点: 1. **EXTJS 6.6框架**:EXTJS 是由Sencha公司开发的一个JavaScript库,用于构建富客户端的Web应用。EXTJS 6.6版本引入了许多新特性,如响应式布局、新的图表组件...

    Extjs大型项目实例

    Extjs大型项目

    ExtJS项目后台模板

    已经整理,能直接看效果的哦,用着不错,要使用的拿走吧

    ExtJs的项目源码

    这个项目的源码包含了实现ExtJs应用的各种组件、布局、事件处理等核心元素。通过加入特定的jar包,我们可以将这个项目运行起来,进一步了解和学习ExtJs的使用。 在深入探讨之前,首先需要理解什么是jar包。JAR ...

    ExtJS项目 一个博客系统

    ExtJS项目 一个博客系统 ExtJS项目 一个博客系统

    Spring+Hibernate+Extjs项目实例

    **Spring+Hibernate+Extjs项目实例详解** 在Java企业级应用开发中,Spring、Hibernate和Extjs这三种技术的组合非常常见,形成了所谓的"SSH+Extjs4"框架。这个项目实例是基于这些技术实现的一个典型应用,展示了如何...

    ExtJs 示例项目 源码加数据库

    一个完整的ExtJs 项目 ,写的详细,数据库齐全。 因为公司要用ExtJs 本人也是那他作为自己的学习例子。项目也是从网上找的,数据库是自己后写的。错误代码基本调试完毕。用的MySql数据库,改一下配置文件即可运行。

    spring+extjs项目文件

    《Spring与ExtJS结合开发人力...提供的教程文档如"EXT 中文手册.pdf"和"Spring+EXT"将帮助你深入理解这两个技术的结合点,加速你的项目开发进程。而"ExtJS.chm"则包含了ExtJS的详细参考信息,是你快速上手的宝贵资料。

    EXTJS 项目图标

    1. 图标类(Icon Classes):EXTJS提供了一系列预定义的CSS类,可以直接应用到组件上,例如`x-fa fa-home`引用了Font Awesome库中的“home”图标。 2. 图标URL:可以直接设置组件的`icon`属性为图标文件的URL,适用...

    extjs4 项目例子

    这个项目里面包含了本人从开始初学EXTJS4的全部事例:grid、tree、chart图表、文件上传、mvc、还有用户信息注册。里面的一些难点、要点都加了注释,还有一个file.txt文件是本人的小小总结,还没完整。我也是一个第一...

    Extjs完整大型项目.rar

    1、采用ExtJS 4.2.1.883无限制版本,放心用于网站开发。 2、ExtJS富文本编辑器增加修改信息。 3、ExtJS的HtmlEditor的图片文件上传插件。 4、Grid列表和表单,包含添加、删除、批量删除、修改、查看、图片...

    ExtJs4.2实战项目

    整个项目是作者本人在实际工作中完成的项目部分功能,项目中设计的的技术:...1.ExtJs 常用控件使用 2.ExtJs 日期控件的重写与列表表头菜单控件的重写 3.ExtJs 结合Jquery修改样式和自定义样式 4.JavaScript 伪继承的实现

    extjs 项目

    extjs 项目样例 extjs 模板式代码 结构清晰

    extJS4 MVC demo项目入门

    在了解这些知识点前,我们需要清楚几个相关技术基础。 首先,extJS是一个基于JavaScript的开源框架,广泛用于开发富互联网应用程序(RIA),它允许开发者快速构建跨平台的交互式Web应用。extJS4版本是该框架的一个...

    extjs2.2开发实战项目 已经发布运行

    1. **EXTJS2.2核心概念**:EXTJS2.2提供了丰富的UI组件,如表格、面板、表单、菜单、树形结构等,以及强大的数据绑定和布局管理。其基于MVC(Model-View-Controller)架构,使得代码组织清晰,易于维护。此项目充分...

    自己动手的EXTJS项目

    EXTJS项目“自己动手的EXTJS项目”是一个示例项目,旨在帮助开发者动手实践EXTJS的使用,通过动态的例子来学习EXTJS的各种功能和组件。 EXTJS的核心特性包括: 1. **组件化**:EXTJS采用组件化的思想构建用户界面,...

Global site tag (gtag.js) - Google Analytics