Ext.field.Select でリストの中にアイコンを表示したい

[_guest]

Ext.field.Select でリストの中にアイコンを表示したいのですが、どのようにしたらよいでしょうか？

Ext.field.Select を継承し、getTabletPicker()メソッドをオーバーライドし、ListのitemTplを修正することで、アイコンの表示まではできているのですが、アイコンの大きさに対し、リストの高さが動的に変わりません。
静的に変更しようとしても、変更の仕方が分かりません。

よろしくお願いします。

[shobuno]

取りあえず、使っているExtjsのバージョンと、確認したブラウザぐらいは書いた方が良いと思います。

あと、作ったソースを書かれると返事がもらえる可能性が高くなりますよ。

[_guest]

失礼しました。

環境は下記になります。
　ライブラリ：Sencha Touch 2.0.1.1　
　ブラウザ：Google Chrome

コードは下記のようになります。

Ext.define('MyApp.view.ImageSelect', {
    extend: 'Ext.field.Select',
    alias: 'widget.imageselect',


    config: {
        options: [
            {text: 'First Option',  value: 'first'},
            {text: 'Second Option', value: 'second'},
            {text: 'Third Option',  value: 'third'}
        ],
    },


    // @Override
    getTabletPicker: function() {
        var config = this.getDefaultTabletPickerConfig();


        if (!this.listPanel) {
            this.listPanel = Ext.create('Ext.Panel', Ext.apply({
                centered: true,
                modal: true,
                cls: Ext.baseCSSPrefix + 'select-overlay',
                layout: 'fit',
                hideOnMaskTap: true,
                items: {
                    xtype: 'list',
                    store: this.getStore(),


                    // 下記1行だけ修正
//                    itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + ':htmlEncode}</span>',
                    itemTpl: '<div style="height=200; padding-left:100px; background:url([ここに画像のURLを指定する]) no-repeat 0 0;">{' + this.getDisplayField() + ':htmlEncode}</div>',


                    listeners: {
                        select : this.onListSelect,
                        itemtap: this.onListTap,
                        scope  : this
                    }
                }
            }, config));
        }


        return this.listPanel;
    }
});

[shobuno]

環境が無いので外してたらごめんなさい。

静的に変更できないっていうのは、コードが間違ってるからでは？？

itemTpl: '<div style="height=200; padding-left:100px; background:url([ここに画像のURLを指定する]) no-repeat 0 0;">{' + this.getDisplayField() + ':htmlEncode}</div>', 

height=200; → height:200;
ですよね？？？


sencha-touch-2.1.0-gpl\examples\list\app.js
の書き箇所を編集してみました。(124行目付近)

編集前

itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>', 

編集後

itemTpl: '<div class="contact2" style="height:300px"><strong>{firstName}</strong> {lastName}</div>', 

コレでサンプルはうまく行きました。



ちなみに、動的に画像の大きさを取得するのは、下記のようなコードを書いて、
1度画像を読み込まないと高さ、幅が取得できません。

sample = function(){
    var imageFileName = './images/aaa.jpg';
    // イメージの読み込み完了後表示する
    var mapImg = new Image();
    mapImg.src = imageFileName;
    // 画像読み込みが正常終了した場合の処理
    mapImg.onload = function() { call : imageReadCallback(imageFileName,
                                                          mapImg.width,
                                                          mapImg.height);
                               };
    // 画像読み込みが失敗した場合の処理
    mapImg.onerror = function() {
    };
    // 画像読み込みをユーザーがCancelした場合の処理
    mapImg.onabort = function() {
    };
};
imageReadCallback = function( fileName, width, height ){
    // width と height で画像の高さ・幅 がわかるので
    // ここで MyApp.view.ImageSelect に独自プロパティで高さと幅を追加して、
    // 設定してやれば良いと思う。
}; 

コレを使えば、アイコンの高さ、幅に合わせて動的に変更できると思います。

がんばってください。

[_guest]

shobunoさん


ありがとうございます！
おかげさまで何とか実現できそうです！


最終的には下記のようなコードになりました。

Ext.define('MyApp.view.ImageSelect', {
 extend: 'Ext.field.Select',
 alias: 'widget.imageselect',




 config: {
   options: [
     {text: 'First Option', value: 'first'},
     {text: 'Second Option', value: 'second'},
     {text: 'Third Option', value: 'third'}
   ],
 },




 // @Override
 getTabletPicker: function() {
   var config = this.getDefaultTabletPickerConfig();




   if (!this.listPanel) {
     this.listPanel = Ext.create('Ext.Panel', Ext.apply({
       centered: true,
       modal: true,
//        cls: Ext.baseCSSPrefix + 'select-overlay',
       height: 500,
       width: 400,
       layout: 'fit',
       hideOnMaskTap: true,
       items: {
         xtype: 'list',
         store: this.getStore(),




         // 下記1行だけ修正
//          itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + ':htmlEncode}</span>',
         itemTpl: '<div style="height:100px; padding-left:100px; background:url([ここに画像のURLを指定する]) no-repeat 0 0;">{' + this.getDisplayField() + ':htmlEncode}</div>',




         listeners: {
           select : this.onListSelect,
           itemtap: this.onListTap,
           scope : this
         }
       }
     }, config));
   }




   return this.listPanel;
 }
});

今回はこのclsの設定を無くして、ご教示いただいた方法で高さ等を設定していこうと思います。


ありがとうございました！