- 浏览: 188112 次
- 性别:
- 来自: 北京
最新评论
-
WH_LPWH:
哥呀 牛逼 大赞一个
使用JAVA写出DBF出现乱码和数据错位 -
z390174504:
不错啊...ID和hide不能一样,多谢
后台取不到extJs2.3的comboBox手写输入的值 -
三里小龙:
linwei_211 写道三里小龙 写道mysql也会出现类似 ...
java.sql.SQLException: 无法从套接字读取更多的数据 -
linwei_211:
三里小龙 写道mysql也会出现类似的情况,但这个理由有点牵强 ...
java.sql.SQLException: 无法从套接字读取更多的数据 -
三里小龙:
mysql也会出现类似的情况,但这个理由有点牵强附会
java.sql.SQLException: 无法从套接字读取更多的数据
1.把一个汉字转成两个字符计数
Ext.getCmp('searchKeyWord').getValue().trim().replace(/[^\x00-\xff]/g, '**').length
项目开发中遇到的extjs常见问题
事件触发机制
l 给某一个控件添加事件。
obj.addEvents( {search : true });
l 给某一个事件添加处理函数
n 给一个对象或变量添加监听及对应得处理,可以在创建时,通过属性listener添加。
n 或者通过 obj.on(‘event’,function(){})
n 或者通过obj.addListener(“event”,function)
l 出发一个事件,params是要传给事件对应的处理函数的参数
Obj.fireEvent(‘eventName’,params)
工具栏
获取工具栏元素方法
var items = this.preview.topToolbar.items;
items.get('tab').enable();
items.get('win').enable();
Panel及子类
ViewPort
Viewpor代表整个浏览器的显示区域,会被渲染到html body中,并会随着浏览器显示区域大小自动改变。
Window
1. 创建属性一般设置
{ width : 500,
height : 300,
layout : 'fit',
constrain : true, 把窗口的显示位置限制在viewport中
constrainHeader : true,
items : this.form,
plain : true,
closeAction:’hide’
frame : true,
modal : true, 窗口显示时,把窗口以外的元素用一个样式遮盖
buttonAlign : 'center' 按钮居中
}
2. Beforeclose事件
当窗口关闭以前可以做一些操作,如检查窗口内部表单数据的改变与否
winObj.on('beforeclose', this.checkDirty, this);
3. 按钮的获取
要获取window的按钮
winObj.buttons
disableButton:function(){
for(i=0;i<this.buttons.length;i++)
this.buttons[i].disable();//hide()
},
enableButton:function(){
for(i=0;i<this.buttons.length;i++)
this.buttons[i].enable()//show();
}
MessageBox
1. 点击确认/取消后执行function
Ext.MessageBox.alert/confirm ("信息",msg,
function(button, text) {
//当confirm时 判断按钮
if (button == "yes")
//TODO something
}, this);
TabPanel
当页签改变的时候出一个处理函数
Ext.getCmp('tabpanel').on('tabchange',this.tabChange,this);
获取某一个页签,在页签中的给id 属性,通过id获取
Ext.getCmp('tabpanel').getItem('id');
gridPanel
l gridPanel 中gridView是控制grid的展现,通过viewConfig用来配置属性,其中
autoFill : true,forceFit : true 比较重要
l 控制列菜单的显示与否
enableHdMenu:false
l 对具有翻页功能的grid,当通过某一个参数获取store数据时,传输参数的方法必须是通过get方式,即在url后面追加或许通过baseParams传递。不能通过params传参。
l Store.reload 方法用于加载当前页的数据 store.load重新加载数据返回第一页。
l 点击翻页按钮时,会调用store.load方法,并传把start和limit封装作为参数传进去,因此如果对查询结果集进行翻页得时候,要把查询条件要写到baseParams或追加到url中,以使翻页后的数据也是符合查询条件的。
l 当store的加载路径变了,要通过以下方式设置新的url
this.store.proxy =new Ext.data.HttpProxy( {url : newURL } );
FormPanel
数据加载和提交注意事项
l 数据加载时,首先要配置reader,并且从后台返回的数据符合解析器的结构,一般跟后台的封装有关。目前所有数据均已list 或 page 形式返回。
l form.load()方法,当数据加载成功或者失败的时候,都会调用reader解析结果json数据,因此json数据中必须有root(一般为result)指定的结果集。属性successProperty:"success" 用来指定form执行load 成功后要回掉的函数名,默认情况下没有指定。
l 数据加载或提交后,form将回掉success failure函数,submit 和load方法在回掉的处理稍微不同。
Success/failure: function(form, action) {
var jsonData = Ext.util.JSON.decode(action.response.responseText);
if (jsonData) //dosomething}
}
检查是否有脏数据
formPanel.form. isDirty()
一些重要的事件
当表单提交或加载成功(失败)后,触发以下事件
form.form.on('actioncomplete', handler, this);
form.form.on('actionfailed', handler, this);
Combo控件
Combo控件通过store加载数据时会出现的问题
1. 当设emtyText时,如果没有选中选项则会把“请选择…”保存到数据库中
2. 当设readOnly:true 时,一旦选择了某一个选项,则会不到空值,即不选任何值
3. 但是当不只读时,用户又可以自己随便输入值,这时这些值没有对应得key值在数据库中
4. 输入“中”时,下拉框中出现以“中”打头的选项
5. 往数据库传送key而不传value ,即下拉框中显示“中国”,并选中时,提交表单传送“中国”对应得key值 而不是“中国”
下面为解决方法
{
xtype : 'combo',
name : 'clearingid',
fieldLabel : '付款类型',
hiddenName : 'clearingid', //隐藏字段,即往后台传输对应得字段,combo会把
valueField的值存到这个隐藏字段中
store : pay_type_store,// 所要显示的下拉列表的数据对象
valueField : "codeVal1", //store的值域
displayField : "codeName", //store显示域 “中国”
anchor : '100%',
emptyText : '请选择...',
forceSelection : true, //强制只能选择列表中的值 ,解决3
mode : 'local', //从客户端加载数据
typeAhead : true, //解决4
listeners : {
expand : function(combo) {
combo.reset();
}
}
}
有两个trigger的控件
自定义这类控件的方法
NewTrigger=Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function() {
NewAddTriggerField.superclass.initComponent.call(this);
},
trigger1Class : 'x-form-add-trigger', //第一个trigger的样式
trigger2Class : 'x-form-list-trigger',//第二个trigger的样式
onTrigger1Click : function() { //处理函数},
onTrigger2Click function() {//处理函数 }
//要重写这两个方法以便于后台交互,可以采用combo的处理机制
setValue : function(),
getValue : function()
}
);
Radio控件
Radio控件的布局
1. 方法一:
先在form里add一个
new Ext.form.Radio({
fieldLabel : 'Radio',
name : 'sex',
boxLabel : 'boy',
id : 'sex-boy',
allowBlank : false,
value : 'boy'
})
然后在当前form render()后添加下面代码
Ext.DomHelper.insertAfter(Ext.DomQuery.selectNode('label:contains(boy)'), {
tag: 'input',
id: 'sex-girl',
type: 'radio',
name: 'sex',
'class': 'x-form-radio x-form-field'
}, false);
Ext.DomHelper.insertAfter(Ext.get('sex-girl'), {
tag: 'label',
'class': 'x-form-cb-label',
'for': 'sex2',
html: 'girl'
}, false);
2. 方法二:
var radioPanel = new Ext.form.FormPanel({
labelWidth : 60,
labelAlign : 'right',
frame : true,
maskDisabled : false,
waitMsgTarget : true,
autoScroll : true,
bodyStyle : 'padding:5px 5px 5px',
buttonAlign : 'center',
width: 400,
buttons : [
{
text : 'save',
scope : this,
handler : save
} ],
items : [{
layout : 'column',
defaults:{autoWidth:true},
items : [
{
layout : 'form',
items : [{
fieldLabel : '单选框',
xtype : 'radio',
name : '1',
boxLabel : '-优惠卡支付',
inputValue : '1',
checked : true
}]
},
{
xtype : 'radio',
hideLabel : true,
name : '1',
boxLabel : '-优惠卡支付',
inputValue : '2',
checked : false
}, {
xtype : 'radio',
hideLabel : true,
name : '1',
boxLabel : '-优惠卡支付',
inputValue : '3',
checked : false
}
]
}
]
});
隐藏fieldLabel的两种方法:hideLable:true和不给fieldLabel属性并设labelSeparator:''
Radio控件传输数据
往后台提交数据前,首先通过getGroupValue获取单选框的值,这时创建的radio必须有inputValue值。
var v = radioPanel.form.findField('1').getGroupValue();
radioPanel.form.findField('1').setValue(v);
form.form.on('beforeaction', handler, this);
Ext的一些常用函数
l Ext.getCmp(‘cmpid’) 获取某一个控件,首先必须指定控件的id
l Ext.get(‘id’) 获取某一个dom控件,该方法在fireFox里不支持 该方法等同于document.get()
l Ext.apply(config1,config2)把后config2的数据覆盖到config1中,并覆盖原有数据。
l Ext.applyIf(config1,config2)也是拷贝但是不覆盖原有数据。
IE7中formpanel串位问题
这个问题是由控件的布局引起。当formpanel加载完数据后,将重新局部。由于重新布局的时候采用的绝对位置,因此导致串位。解决方式重写 Element的mask方法。
Ext.override( Ext.Element, {
mask: function( msg, msgCls )
{ //元素overflow 和 position
if(Ext.isIE7 && this.getStyle("position") == "static"){
this.setStyle("overflow", "auto");
this.setStyle("position", "relative");
}
if(!this._mask){
this._mask = Ext.DomHelper.append(this.dom,{cls:"ext-el-mask"}, true); }
this.addClass("x-masked");
this._mask.setDisplayed(true);
if(typeof msg == 'string'){
if(!this._maskMsg){
this._maskMsg = Ext.DomHelper.append(this.dom,
cls:"ext-el-mask-msg",
cn:{tag:'div'}}, true);
}
var mm = this._maskMsg;
mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
mm.dom.firstChild.innerHTML = msg;
mm.setDisplayed(true);
mm.center(this);
}
if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') ==
'auto'){
this._mask.setHeight(this.getHeight());
}
return this._mask;
}
});
Ext.getCmp('searchKeyWord').getValue().trim().replace(/[^\x00-\xff]/g, '**').length
项目开发中遇到的extjs常见问题
事件触发机制
l 给某一个控件添加事件。
obj.addEvents( {search : true });
l 给某一个事件添加处理函数
n 给一个对象或变量添加监听及对应得处理,可以在创建时,通过属性listener添加。
n 或者通过 obj.on(‘event’,function(){})
n 或者通过obj.addListener(“event”,function)
l 出发一个事件,params是要传给事件对应的处理函数的参数
Obj.fireEvent(‘eventName’,params)
工具栏
获取工具栏元素方法
var items = this.preview.topToolbar.items;
items.get('tab').enable();
items.get('win').enable();
Panel及子类
ViewPort
Viewpor代表整个浏览器的显示区域,会被渲染到html body中,并会随着浏览器显示区域大小自动改变。
Window
1. 创建属性一般设置
{ width : 500,
height : 300,
layout : 'fit',
constrain : true, 把窗口的显示位置限制在viewport中
constrainHeader : true,
items : this.form,
plain : true,
closeAction:’hide’
frame : true,
modal : true, 窗口显示时,把窗口以外的元素用一个样式遮盖
buttonAlign : 'center' 按钮居中
}
2. Beforeclose事件
当窗口关闭以前可以做一些操作,如检查窗口内部表单数据的改变与否
winObj.on('beforeclose', this.checkDirty, this);
3. 按钮的获取
要获取window的按钮
winObj.buttons
disableButton:function(){
for(i=0;i<this.buttons.length;i++)
this.buttons[i].disable();//hide()
},
enableButton:function(){
for(i=0;i<this.buttons.length;i++)
this.buttons[i].enable()//show();
}
MessageBox
1. 点击确认/取消后执行function
Ext.MessageBox.alert/confirm ("信息",msg,
function(button, text) {
//当confirm时 判断按钮
if (button == "yes")
//TODO something
}, this);
TabPanel
当页签改变的时候出一个处理函数
Ext.getCmp('tabpanel').on('tabchange',this.tabChange,this);
获取某一个页签,在页签中的给id 属性,通过id获取
Ext.getCmp('tabpanel').getItem('id');
gridPanel
l gridPanel 中gridView是控制grid的展现,通过viewConfig用来配置属性,其中
autoFill : true,forceFit : true 比较重要
l 控制列菜单的显示与否
enableHdMenu:false
l 对具有翻页功能的grid,当通过某一个参数获取store数据时,传输参数的方法必须是通过get方式,即在url后面追加或许通过baseParams传递。不能通过params传参。
l Store.reload 方法用于加载当前页的数据 store.load重新加载数据返回第一页。
l 点击翻页按钮时,会调用store.load方法,并传把start和limit封装作为参数传进去,因此如果对查询结果集进行翻页得时候,要把查询条件要写到baseParams或追加到url中,以使翻页后的数据也是符合查询条件的。
l 当store的加载路径变了,要通过以下方式设置新的url
this.store.proxy =new Ext.data.HttpProxy( {url : newURL } );
FormPanel
数据加载和提交注意事项
l 数据加载时,首先要配置reader,并且从后台返回的数据符合解析器的结构,一般跟后台的封装有关。目前所有数据均已list 或 page 形式返回。
l form.load()方法,当数据加载成功或者失败的时候,都会调用reader解析结果json数据,因此json数据中必须有root(一般为result)指定的结果集。属性successProperty:"success" 用来指定form执行load 成功后要回掉的函数名,默认情况下没有指定。
l 数据加载或提交后,form将回掉success failure函数,submit 和load方法在回掉的处理稍微不同。
Success/failure: function(form, action) {
var jsonData = Ext.util.JSON.decode(action.response.responseText);
if (jsonData) //dosomething}
}
检查是否有脏数据
formPanel.form. isDirty()
一些重要的事件
当表单提交或加载成功(失败)后,触发以下事件
form.form.on('actioncomplete', handler, this);
form.form.on('actionfailed', handler, this);
Combo控件
Combo控件通过store加载数据时会出现的问题
1. 当设emtyText时,如果没有选中选项则会把“请选择…”保存到数据库中
2. 当设readOnly:true 时,一旦选择了某一个选项,则会不到空值,即不选任何值
3. 但是当不只读时,用户又可以自己随便输入值,这时这些值没有对应得key值在数据库中
4. 输入“中”时,下拉框中出现以“中”打头的选项
5. 往数据库传送key而不传value ,即下拉框中显示“中国”,并选中时,提交表单传送“中国”对应得key值 而不是“中国”
下面为解决方法
{
xtype : 'combo',
name : 'clearingid',
fieldLabel : '付款类型',
hiddenName : 'clearingid', //隐藏字段,即往后台传输对应得字段,combo会把
valueField的值存到这个隐藏字段中
store : pay_type_store,// 所要显示的下拉列表的数据对象
valueField : "codeVal1", //store的值域
displayField : "codeName", //store显示域 “中国”
anchor : '100%',
emptyText : '请选择...',
forceSelection : true, //强制只能选择列表中的值 ,解决3
mode : 'local', //从客户端加载数据
typeAhead : true, //解决4
listeners : {
expand : function(combo) {
combo.reset();
}
}
}
有两个trigger的控件
自定义这类控件的方法
NewTrigger=Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function() {
NewAddTriggerField.superclass.initComponent.call(this);
},
trigger1Class : 'x-form-add-trigger', //第一个trigger的样式
trigger2Class : 'x-form-list-trigger',//第二个trigger的样式
onTrigger1Click : function() { //处理函数},
onTrigger2Click function() {//处理函数 }
//要重写这两个方法以便于后台交互,可以采用combo的处理机制
setValue : function(),
getValue : function()
}
);
Radio控件
Radio控件的布局
1. 方法一:
先在form里add一个
new Ext.form.Radio({
fieldLabel : 'Radio',
name : 'sex',
boxLabel : 'boy',
id : 'sex-boy',
allowBlank : false,
value : 'boy'
})
然后在当前form render()后添加下面代码
Ext.DomHelper.insertAfter(Ext.DomQuery.selectNode('label:contains(boy)'), {
tag: 'input',
id: 'sex-girl',
type: 'radio',
name: 'sex',
'class': 'x-form-radio x-form-field'
}, false);
Ext.DomHelper.insertAfter(Ext.get('sex-girl'), {
tag: 'label',
'class': 'x-form-cb-label',
'for': 'sex2',
html: 'girl'
}, false);
2. 方法二:
var radioPanel = new Ext.form.FormPanel({
labelWidth : 60,
labelAlign : 'right',
frame : true,
maskDisabled : false,
waitMsgTarget : true,
autoScroll : true,
bodyStyle : 'padding:5px 5px 5px',
buttonAlign : 'center',
width: 400,
buttons : [
{
text : 'save',
scope : this,
handler : save
} ],
items : [{
layout : 'column',
defaults:{autoWidth:true},
items : [
{
layout : 'form',
items : [{
fieldLabel : '单选框',
xtype : 'radio',
name : '1',
boxLabel : '-优惠卡支付',
inputValue : '1',
checked : true
}]
},
{
xtype : 'radio',
hideLabel : true,
name : '1',
boxLabel : '-优惠卡支付',
inputValue : '2',
checked : false
}, {
xtype : 'radio',
hideLabel : true,
name : '1',
boxLabel : '-优惠卡支付',
inputValue : '3',
checked : false
}
]
}
]
});
隐藏fieldLabel的两种方法:hideLable:true和不给fieldLabel属性并设labelSeparator:''
Radio控件传输数据
往后台提交数据前,首先通过getGroupValue获取单选框的值,这时创建的radio必须有inputValue值。
var v = radioPanel.form.findField('1').getGroupValue();
radioPanel.form.findField('1').setValue(v);
form.form.on('beforeaction', handler, this);
Ext的一些常用函数
l Ext.getCmp(‘cmpid’) 获取某一个控件,首先必须指定控件的id
l Ext.get(‘id’) 获取某一个dom控件,该方法在fireFox里不支持 该方法等同于document.get()
l Ext.apply(config1,config2)把后config2的数据覆盖到config1中,并覆盖原有数据。
l Ext.applyIf(config1,config2)也是拷贝但是不覆盖原有数据。
IE7中formpanel串位问题
这个问题是由控件的布局引起。当formpanel加载完数据后,将重新局部。由于重新布局的时候采用的绝对位置,因此导致串位。解决方式重写 Element的mask方法。
Ext.override( Ext.Element, {
mask: function( msg, msgCls )
{ //元素overflow 和 position
if(Ext.isIE7 && this.getStyle("position") == "static"){
this.setStyle("overflow", "auto");
this.setStyle("position", "relative");
}
if(!this._mask){
this._mask = Ext.DomHelper.append(this.dom,{cls:"ext-el-mask"}, true); }
this.addClass("x-masked");
this._mask.setDisplayed(true);
if(typeof msg == 'string'){
if(!this._maskMsg){
this._maskMsg = Ext.DomHelper.append(this.dom,
cls:"ext-el-mask-msg",
cn:{tag:'div'}}, true);
}
var mm = this._maskMsg;
mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
mm.dom.firstChild.innerHTML = msg;
mm.setDisplayed(true);
mm.center(this);
}
if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') ==
'auto'){
this._mask.setHeight(this.getHeight());
}
return this._mask;
}
});
发表评论
-
后台取不到extJs2.3的comboBox手写输入的值
2012-08-29 18:32 2802在用extJs2.3做页面的时候发现将comboB ... -
关于extjs(2.3) treepanel一点技巧
2012-08-01 16:02 11351.在做树的拖动的时候,遇到一个问题。树叶子节点无法进行app ... -
Ext.Ajax.request2.x实现同步请求
2012-06-25 11:08 3760Ext.Ajax.request在2.x是异步请求的 ... -
setAttribute()的使用方法与ie不兼容onclick事件解决方法
2011-12-31 13:12 2314setAttribute()的使用方法与ie不兼容onclic ... -
【仿IE顶部弹出提示】可用来设置公告可关闭
2011-12-31 13:11 1363第一种方式:基础写法 ... -
js 常用正则表达式表单验证代码
2011-08-19 11:20 1126js 常用正则表达式表单 ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2011-08-19 11:11 1212Ext中的get、getDom、getCmp ... -
EXT JS 常见问题FAQ
2011-08-19 10:50 1036EXT JS 常见问题FAQ 收藏 1) 如果组件之 ... -
js技巧
2011-08-19 10:47 1010javascript中几个有意思的 ... -
Combox下拉GridPanel菜单
2011-08-19 10:42 2578extjs Combox下拉GridPanel菜单 Ext ... -
重写时间控件,只有选择年月的界面
2011-08-19 10:39 5850下面是在ext官方网站上down的一个函数只显示年和月,不显示 ... -
修改ext中拖拽和CheckboxSelectionModel冲突的问题
2011-08-19 10:36 1707因为gridpanel定义了拖拽 所以致使选中gridpane ... -
浏览器窗口关闭事件的监听搜集
2011-08-19 10:16 1738方式一:(适用与IE浏览器,而且刷新不提示,只在点击浏览器关闭 ... -
GRID拖拽行的例子
2011-08-19 10:15 2853---------------------GRID拖拽 ... -
去掉gridPanel表头的全选框
2011-08-19 10:14 2237给gridpanel 加上listener即可 ,liste ... -
动态加载表单数据的例子
2011-08-19 10:11 1121<script type="text/java ... -
treepanel动态加载数据的例子
2011-08-19 10:10 1965var tree = new Ext.tree.TreePan ... -
gridpanel动态加载数据的例子
2011-08-19 10:07 1735<script type='text/javascrip ... -
combox带treepanel的例子
2011-08-19 10:06 1993new Ext.form.ComboBox({ id: '& ... -
event.keycode值大全
2011-08-19 10:02 834keycode 8 = BackSpace BackSpace ...
相关推荐
extjs常见问题http://www.jb51.net/list/list_217_1.htm
ExtJS与.NET结合开发实例ExtJS与.NET结合开发实例
extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料
Extjs大型项目
ExtJS6.2中文开发指南
1采用ExtJS 4.2.1.883无限制版本,放心用于网站开发。 2ExtJS富文本编辑器增加修改信息。 3ExtJS的HtmlEditor的图片文件上传插件。 4Grid列表和表单,包含添加、删除、批量删除、修改、查看、图片查看和按条件查询...
ExtJS3.0 源码分析与开发实例宝典
Extjs项目之个人理财项目源码 Extjs项目实例
EXTJS4开发的图片文章管理项目实例,后台使用JAVA+MYSQL,建表语句位于DB文件夹下,使用Myeclipse导入项目即可
个人开发的记录,希望能有帮助,互相学习技术
extjs2.0版本的开发包,包括开发手册,手册提供了extjs的大部门功能的使用,对初级开发者尤其有用
公司开发的实战项目,历时4个月,基本使用了extjs2.2的所以控件,希望对中级的extjs开发人员有所提高,版权所以,不得商用!
Extjs 2.2 中文开发文档 , 很少有错误。 我现在做开发,用的就是2.2版本的。
extjs插件开发教程
关于ExtJS内存泄漏问题,一直是ExtJS开发人员困扰的问题,这篇文档很好地解释了什么是内存泄漏,为什么会产生内存泄漏。能够帮助程序员使用ExtJS开发出更高效安全的代码。
开始ExtJS之旅的第一步是要获得开发包,可以从官方网站www.ExtJS.com下载,以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download,下载成功后的开发包是...ExtJS的API,这是开发ExtJS程序过程中的法宝。
主要是一些我遇到过的小错误bug,包括Python django Extjs;还有实现一些新功能时的小记
extjs 开发工具
extjs开发实例 extjs教程 extjs开发实例 extjs教程