Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  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