最近的一个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%>'
}
待续......
分享到:
相关推荐
Extjs项目之个人理财项目源码 Extjs项目实例
Extjs大型项目
自己才刚刚学习了extjs近1个月有余,边总结边学习,这些应该对初学者比较适用,自己总结的
已经整理,能直接看效果的哦,用着不错,要使用的拿走吧
ExtJS项目 一个博客系统 ExtJS项目 一个博客系统
ssh_extjs项目实例 三大框架 和extjs4
ext学习中很好的资料和总结,包含了ext的主要内容部分。
一个ExtJs的项目,可通过加入jar包来启用
原生态extjs框架的web项目,用senchacmd成功发布,通过改变base-color改变主题风格,见代码及文档
个人开发的记录,希望能有帮助,互相学习技术
一个完整的ExtJs 项目 ,写的详细,数据库齐全。 因为公司要用ExtJs 本人也是那他作为自己的学习例子。项目也是从网上找的,数据库是自己后写的。错误代码基本调试完毕。用的MySql数据库,改一下配置文件即可运行。
SpringMVCHibernate+Extjs项目实例是j2ee比较常见的企业级网站开发框架,里面代码需要配置一定环境在Myeclipse下,要下载extjs自己的库,保证可以运行
北风网--Extjs项目之个人理财项目(Extjs+S2SH+Mysql) 真正的完整版源代码
这个项目里面包含了本人从开始初学EXTJS4的全部事例:grid、tree、chart图表、文件上传、mvc、还有用户信息注册。里面的一些难点、要点都加了注释,还有一个file.txt文件是本人的小小总结,还没完整。我也是一个第一...
1、采用ExtJS 4.2.1.883无限制版本,放心用于网站开发。 2、ExtJS富文本编辑器增加修改信息。 3、ExtJS的HtmlEditor的图片文件上传插件。 4、Grid列表和表单,包含添加、删除、批量删除、修改、查看、图片...
整个项目是作者本人在实际工作中完成的项目部分功能,项目中设计的的技术:...1.ExtJs 常用控件使用 2.ExtJs 日期控件的重写与列表表头菜单控件的重写 3.ExtJs 结合Jquery修改样式和自定义样式 4.JavaScript 伪继承的实现
extjs 项目样例 extjs 模板式代码 结构清晰
ExtJS4 MVC演示项目
extjs6.6框架的web项目,此资源是上一个资源的更新版。 用senchacmd成功发布,通过改变base-color改变主题风格,功能包含登录页、首页左菜单和列表,详见代码及部署说明文档。
这里囊括了extjs里所有的案例,且已经完全配置好了环境,可直接在java ee上直接打开。项目实例直观便于练习,不必再一点点的打代码了。