PDA

View Full Version : 【プラグイン版】編集不可能時のComboBoxカーソル対応 for FireFox


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を読み込んでくださいね。