Kazuhiro Kotsutsumi
05-06-2009, 07:59 PM
前に、オーバーライドする形で提供していましたが、プラグイン形式にしました。
これで、バージョンによる差が吸収できるかな?
FFCombo.js
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
// {{{ Ext.plugin.FFCombo
/**
* Ext.plugin.FFCombo
*
* コンボボックス編集不可能時にFireFoxでカーソルが表示される現象を回避する
* プラグイン
*
* @author Kazuhiro Kotsutsumi <kotsutsumi@xenophy.com>
*/
Ext.ns( 'Ext.plugin' );
Ext.plugin.FFCombo = Ext.extend( Ext.util.Observable, {
// {{{ init
init: function( combo ){
combo.onRender = combo.onRender.createSequence( this.onCustomRender );
},
// }}}
// {{{ onCustomRender
onCustomRender: function( ct, position ) {
// FireFoxの場合で、かつ編集できないときにカーソル非表示対応
if( !this.editable && Ext.isGecko ) {
this.mon(this.el, 'focus', function(){
this.blur()
}, this );
}
}
// }}}
});
// }}}
/*
* Local variables:
* tab-width: 4
* c-basic-offset: 4
* c-hanging-comment-ender-p: nil
* End:
*/
使い方は、下記の通りです。
new Ext.Panel({
// タイトル設定
title: 'Ext.plugin.FFCombo',
// アイテム設定
items: [{
xtype: "combo",
typeAhead: true,
editable: false,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [[1, 'item1'], [2, 'item2']]
}),
valueField: 'myId',
displayField: 'displayText',
plugins: new Ext.plugin.FFCombo()
}],
// サイズ設定
width: 300,
height: 200,
// レンダリング先設定
renderTo: 'sandbox'
});
コンボボックスのコンフィグオプションに
plugins: new Ext.plugin.FFCombo()
を指定することで、有効になります。
もちろん、FFCombo.jsを読み込んでくださいね。
これで、バージョンによる差が吸収できるかな?
FFCombo.js
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
// {{{ Ext.plugin.FFCombo
/**
* Ext.plugin.FFCombo
*
* コンボボックス編集不可能時にFireFoxでカーソルが表示される現象を回避する
* プラグイン
*
* @author Kazuhiro Kotsutsumi <kotsutsumi@xenophy.com>
*/
Ext.ns( 'Ext.plugin' );
Ext.plugin.FFCombo = Ext.extend( Ext.util.Observable, {
// {{{ init
init: function( combo ){
combo.onRender = combo.onRender.createSequence( this.onCustomRender );
},
// }}}
// {{{ onCustomRender
onCustomRender: function( ct, position ) {
// FireFoxの場合で、かつ編集できないときにカーソル非表示対応
if( !this.editable && Ext.isGecko ) {
this.mon(this.el, 'focus', function(){
this.blur()
}, this );
}
}
// }}}
});
// }}}
/*
* Local variables:
* tab-width: 4
* c-basic-offset: 4
* c-hanging-comment-ender-p: nil
* End:
*/
使い方は、下記の通りです。
new Ext.Panel({
// タイトル設定
title: 'Ext.plugin.FFCombo',
// アイテム設定
items: [{
xtype: "combo",
typeAhead: true,
editable: false,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [[1, 'item1'], [2, 'item2']]
}),
valueField: 'myId',
displayField: 'displayText',
plugins: new Ext.plugin.FFCombo()
}],
// サイズ設定
width: 300,
height: 200,
// レンダリング先設定
renderTo: 'sandbox'
});
コンボボックスのコンフィグオプションに
plugins: new Ext.plugin.FFCombo()
を指定することで、有効になります。
もちろん、FFCombo.jsを読み込んでくださいね。