Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    3
    Vote Rating
    0
    _guest is on a distinguished road

      0  

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

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


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

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

    よろしくお願いします。

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Posts
    34
    Vote Rating
    0
    shobuno is on a distinguished road

      0  

    Default


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

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

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    3
    Vote Rating
    0
    _guest is on a distinguished road

      0  

    Default


    失礼しました。

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

    コードは下記のようになります。
    Code:
    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;
        }
    });

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    34
    Vote Rating
    0
    shobuno is on a distinguished road

      0  

    Default


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

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

    PHP Code:
    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行目付近)

    編集前
    PHP Code:
    itemTpl'<div class="contact2"><strong>{firstName}</strong> {lastName}</div>'
    編集後
    PHP Code:
    itemTpl'<div class="contact2" style="height:300px"><strong>{firstName}</strong> {lastName}</div>'
    コレでサンプルはうまく行きました。



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

    PHP Code:
    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( fileNamewidthheight ){
        
    // width と height で画像の高さ・幅 がわかるので
        // ここで MyApp.view.ImageSelect に独自プロパティで高さと幅を追加して、
        // 設定してやれば良いと思う。
    }; 

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

    がんばってください。
    Last edited by shobuno; 29 Nov 2012 at 6:28 PM. Reason: サンプルソースの行数を追加

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    3
    Vote Rating
    0
    _guest is on a distinguished road

      0  

    Default


    shobunoさん


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


    最終的には下記のようなコードになりました。
    Code:
    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の設定を無くして、ご教示いただいた方法で高さ等を設定していこうと思います。


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

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi