Java堂  


2010年07月8日

ExtJS中调用focus方法无效的解决方法

Filed under: DynamicLanguage — Jet @ 10:49 上午
Tags:
原文出处: ExtJS中调用focus方法无效的解决方法
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明！

在ExtJS中用于盒型控件的BoxComponent（TextField、TextArea、CheckBox、ComboBox等的父类）提供了一个focus方法，用于控制光标的焦点。但是在调用该方法的时候往往会发现达不到预期的效果，很多时候根本没有办法来控制光标的焦点。

在BoxComponent文档中对focus方法的说明如下：

focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.

可以看到这个方法有两个可选的参数，第一个的含义是是否全选中所在的文本内容（默认为false），第二个是设置一个延迟的时间，单位是毫秒（默认为0，不延迟）。下面是两种调用的方法：

  1. var textField = new Ext.form.TextField({
  2. // 属性就省略了 ....
  3. });
  4. // 默认的调用
  5. textField.focus();
  6. // 设置延迟的调用
  7. textField.focus(false, 100);
  8. // 等同于上面的方式
  9. textField.focus.defer(100, textField);

如果做一个测试的话可以发现使用后面两种方式之后就会达到预期的效果了，这是因为所有的可视控件需要一个渲染的时间的，如果不设置focus的延迟时间，则再调用focus方法的时候该控件还没有渲染完成，当时是不会成功了。

参考资料：关于window的中field的focus问题

2010年07月7日

ExtJS中TextField或TextArea支持按键事件的条件

Filed under: DynamicLanguage — Jet @ 11:56 上午
Tags:
原文出处: ExtJS中TextField或TextArea支持按键事件的条件
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明！

在ExtJS中，对事件进行捕获有两种方式：一种是设置listeners属性，另外一种就是使用on方法，代码如下：

  1. var textArea = new Ext.form.TextArea({
  2.   listeners: {
  3.     'keyup': {
  4.       fn: function(o, evt) {},
  5.       scope: this
  6.     }
  7.   }
  8. });
  9.  
  10. // 也可以使用on方法
  11. textArea.on('keypress', function(o, evt), this);

但是如果这样的话还是无法捕获按键事件，原来除了增加监听之外，还要设置一个enableKeyEvents属性，该属性的作用是是否处理按键事件，默认是false。

参考资料： 不显示删除回复显示所有回复显示星级回复显示得分回复 Extjs中textarea不支持keyup事件？

2010年03月21日

ExtJS hack: Add multiple toolbars to a Panel

Filed under: DynamicLanguage — Jet @ 10:15 上午
Tags:
原文出处: ExtJS hack: Add multiple toolbars to a Panel
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明！

在ExtJS中实现多行工具栏的效果

hack code:

  1. /**
  2. * ExtJS hack: Add multiple toolbars to a Panel
  3. *
  4. * @author Jet Ma (jetmah(at)gmail(dot)com)
  5. */
  6. // 将原来的onRender方法进行重定义，以免造成递归调用！
  7. // rename the original onRender method to avoid call itself
  8. Ext.Panel.prototype.originalonRender = Ext.Panel.prototype.onRender;
  9. // 扩展onRender方法，实现在Toolbar中增加多行
  10. // override onRender method
  11. Ext.Panel.prototype.onRender = function(ct, position) {
  12.     this.originalonRender(ct, position);
  13.    
  14.     // 增加使用rowtbar添加换行的Toolbar
  15.     // use the custom rowtbar argument to add it to this TopToolbar
  16.     if(this.tbar && this.rowtbar){
  17.         var rowtbar = this.rowtbar;
  18.         if(!Ext.isArray(rowtbar))
  19.             return;
  20.        
  21.         for(var i = 0; i < rowtbar.length; i ++) {
  22.             new Ext.Toolbar(rowtbar[i]).render(this.tbar);
  23.         }
  24.     }
  25.    
  26.     // 增加使用rowbbar添加换行的Bottombar
  27.     // use the custom rowbbar argument to add it to this BottomToolbar
  28.     if(this.bbar && this.rowbbar) {
  29.         var rowbbar = this.rowbbar;
  30.         if(!Ext.isArray(rowbbar))
  31.             return;
  32.            
  33.         for(var i = 0; i < rowbbar.length; i ++) {
  34.             new Ext.Toolbar(rowbbar[i]).render(this.bbar);
  35.         }
  36.     }
  37. }

usage:

  1. var panel = new Ext.Panel({
  2.     //...   
  3.     tbar: [{text: 'button one'}, {text: 'button two'}],   
  4.     rowtbar: [       
  5.         [{text: 'row1 buttone 1'}, {text: 'row1 button2'}],      
  6.         [{text: 'row2 buttone 1'}, {text: 'row2 button2'}]   
  7.     ],   
  8.     bbar:  [{text: 'button one'}, {text: 'button two'}],   
  9.     rowbbar: [       
  10.         [{text: 'row1 buttone 1'}, {text: 'row1 button2'}],       
  11.         [{text: 'row2 buttone 1'}, {text: 'row2 button2'}]   
  12.     ]
  13. });

screenshot:

more discussion: http://www.extjs.com/forum/showthread.php?t=94762