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

      0  

    Default Ext.grid.Panel のスクロールバーが動かなくなる。

    Ext.grid.Panel のスクロールバーが動かなくなる。


    いつもお世話になっております。
    どなたかお知恵を貸してください。

    Gridのデータを再取得・描画すると、縦スクロールバーが機能しなくなります。

    画面構成:
    1.layout:'border' で、パネルを用意。
    2.'north'にパネルを設定し、コンボボックスを指定。
    3.'center'にExt.grid.Panel を指定。

    現象の手順:
    1.コンボボックスの値を変更すると、Ajaxでデータを取得する。(多い)
    2.取得したデータをGridに表示する。(ここではスクロールバーが機能する)
    3.コンボボックスで、別のデータを選択し、Ajaxでデータを取得する。(少ない)
    4. 取得したデータをGridに表示する。(スクロールバーが出ていない)
    5.コンボボックスで「1.」 で選択した値に変更し、Ajaxでデータを取得する。
    6. 取得したデータをGridに表示する。(スクロールバーが表示されるが、Gridのデータが動かない)


    上記手順を行い、Gridのデータを再取得・表示を行った場合、
    縦スクロールバーが表示され、縦スクロールバーの上下の移動は出来るのですが、
    Gridのデータが上下に移動しません。

    (ブラウザを小さくし、横スクロールバーを表示・移動すると、Gridも横移動してくれます。縦移動は出来ません。)


    このような現象になった方は居られますでしょうか。

    解決策などございましたらご教授願います。
    よろしくお願いいたします。
    Last edited by shobuno; 13 Feb 2012 at 6:16 PM. Reason: 表現があいまいだったので修正

  2. #2
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
    mashiki is on a distinguished road

      0  

    Default


    ごく普通のアプリケーションですね。
    普通なら問題なく動くと思いますので、解決にはもっと情報が必要でしょう。

    A. ExtJSのバージョンのバージョンは?
    B. 最新のstable4.0.7で再現しますか?
    C. 1の件数が多いとは具体的には何件くらいでしょう?
    D. GridPanelの設定と、2,4,6のstoreにセットしているロジックはどのような物でしょうか?
    E. IE、FireFox、Chromeでも同様な現象でしょうか?
    E. 再現可能なサンプルソースを提示できますか?

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

      0  

    Default


    バージョンを書き忘れるとは…申し訳ありません。


    A. ExtJSのバージョンのバージョンは?
     → 「Ver 4.0.7」 です。


    B. 最新のstable4.0.7で再現しますか?
     → 申し訳ありません。
        "stable"が何を指しているか判りませんでしたが、下記URLからDLしたものです。
        http://www.sencha.com/products/extjs/download?page=a


    C. 1の件数が多いとは具体的には何件くらいでしょう?
     → 具体的には20件ですが、ウィンドウを小さくしてスクロールバーが出れば、2件でも発生します。


    D. GridPanelの設定と、2,4,6のstoreにセットしているロジックはどのような物でしょうか?
     → 
    モデルの指定
    Code:
    Ext.define( 'CompareModel', {
            extend : 'Ext.data.Model',
            fields : [
                {name : 'ID',             type : 'string'},
                {name : 'No',             type : 'string'},
                {name : 'Name',           type : 'string'},
                {name : 'NameFlag',       type : 'int'},
                {name : 'NewFlag',        type : 'int'},
                {name : 'NonExistigFlag', type : 'int'},
                {name : 'RecursiveFlag',  type : 'int'}
            ]
        }
    );
    ストアの指定
    Code:
    InfoStore = Ext.create('Ext.data.Store', {
        autoLoad: false,
        autoSync: false,
        model: 'CompareModel',
        proxy: {
            type: 'ajax',
            url : 'GetInfo.php',
            timeout : 10 * 1000,
            reader: {
                type: 'json',
                root: 'data'
            },
            actionMethods : {
                create: 'POST'
            },
            listeners : {
                exception : exceptionAlert
            }
        }
    });
    カラムの指定
    Code:
    var myColumns001 = [
        {
            header : 'あいうえお',
            dataIndex : 'No',
            resizable : false,
            renderer : renderList,
            width : 40
        },
        {
            header : 'かきくけこ',
            dataIndex : 'Name',
            resizable : false,
            renderer : renderList,
            width : 171
        },
        ……
    }
    グリッドの指定
    Code:
    grid001 = Ext.widget('grid', {
        store : InfoStore,
        columns : myColumns001,
        region : 'center',
        border : 0,
        width : 922
    });
    GetInfo.php … PHPでデータを設定(Oracleから取得した値を設定)
    PHP Code:
    for($i 0$i $nrows$i++)
    {

        
    $data[$i] = array(
        
    'ID'             => $results['ID'][$i],
        
    'No'             => substr($results['No'][$i], -2),
        
    'Name'           => $results['Name'][$i],
        
    'NameFlag'       => $results['NameFlag'][$i],
        
    'NewFlag'        => $results['NewFlag'][$i],
        
    'NonExistigFlag' => $results['NonExistigFlag'][$i],
        
    'RecursiveFlag'  => $results['RecursiveFlag'][$i]
        );
    }

    $success true;

    echo 
    json_encode(
    array(
            
    "success" => $success,
            
    "results" => $nrows,
            
    "data"    => $data,
    )
    ); 

    E. IE、FireFox、Chromeでも同様な現象でしょうか?
     → IE8、FireFox10(9)、Chrome16、Opera11 すべてのバージョンにて発生しております。


    F. 再現可能なサンプルソースを提示できますか?
     → 申し訳ありません。開発終盤の為、膨大な量になっており、
       提示できる量まで削るのに時間がかかります。または提示できないかもしれません。
       削除して動作するように努力します。



    私が気になっているのは、Panel を3段階ぐらい入れ子にした上に、GridPanelを設定しています。
    シンプルな構造で試してないので判りませんが、「Panelの入れ子が多くなるとまずいのかも?」とか考えてます。
    ぜんぜん見当違いかもしれませんが、一応現在の構造も記述しておきます。

    1. Ext.Viewport (layout : 'border')

    1.1. Ext.panel.Panel (layout : 'border', region : 'center')

    1.1.1 Ext.panel.Panel (layout : 指定なし, region : 'north') ここにコンボボックスやラベルのアイテムが乗る
    1.1.2 Ext.panel.Panel (layout : 'border', region : 'center') ここにグリッドやラベルのアイテムが乗る

    1.1.2.1 Ext.container.Container (layout: { type: 'table' }, region : 'north') タイトルの為、パネルを3つ載せてます
    1.1.2.2 Ext.grid.Panel (layout : 指定なし, region : 'center') グリッド


    不明点、問題点などございましたら、ご指摘のほどお願いいたします。

  4. #4
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
    mashiki is on a distinguished road

      0  

    Default


    gridのwidthの設定は疑問ですが特に変わったことはしていないですねえ。
    2、4、6でのstoreへのデータのセットはパラメータをセットして、loadメソッドを呼んでるだけでしょうか?

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

      0  

    Default


    仰られるとおり、load を呼び出しているだけです。
    やっぱりシンプルな再現できるコードをupするのが一番ですよね…

    一応ソースを載せておきます。
    Code:
    createNorthPanel = function() {
        // コンボボックス
        Ext.define( 'MonitoringModel', {
                    extend : 'Ext.data.Model',
                    fields : [
                        {name : 'CtrID',        type : 'auto'},
                        {name : 'CtrNm',        type : 'string'}
                        ]
                }
        );
        getMonitoringStore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            autoSync: true,
            model: 'MonitoringModel',
            proxy: {
                type: 'rest',
                url : 'GetMonitoring.php',
                timeout : 10 * 1000,
                reader: {
                    type: 'json',
                    root: 'data'
                },
                writer: { type: 'json' },
                actionMethods : { create: 'POST' }
            }
        });
        cmb001 = new Ext.form.field.ComboBox({
            store        : getMonitoringStore,
            displayField : 'CtrNm',
            valueField   : 'CtrID',
            fieldLabel   : 'あいうえお',
            labelWidth   : 120,
            labelAlign   : 'right',
            queryMode    : 'local',
            editable     : false,
            listeners    : { select : cmb001Selected }
        });
    };
    cmb001Selected = function(combo, records, eOpts)
    {
        var params ={ID : records[0].data.ID };
        InfoStore.load({params : params});
    };

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

      0  

    Default


    問題解決したのでご報告です。

    本現象は、「Extjs4.0.7」の不具合だったようです。
    「Ext JS 4.1 RC1」において、問題は解消しています。



    再現方法・解決方法を下記します。
    Extjs4.0.7 を使用される方で、本現象が発生した方は、ご参照ください。


    本現象の詳細な再現方法:
    1.Ajaxでデータを取得し、Gridに表示する。(スクロールバーが出るぐらい)
    2.Ajaxで"1."とは別のデータを取得する。(スクロールバーが出ない)
    3.スクロールバーが出ていない状態で、20秒~30秒以上放置する。
    4.Ajaxでデータを取得Gridに表示する。(スクロールバーが表示されるが、Gridのデータが動かない)


    「スクロールバーが出ていない状態で、20秒~30秒以上放置する。」というのが味噌です。
    (10秒程度では発生しません。コーディング内容によっては、さらに待つ必要があるかもしれません)
    ()


    本現象の解決方法:
    下記コードをExtjsを読み込んだ後に読み込ませる。
    Code:
    Ext.require('Ext.grid.Panel', function() {
        Ext.grid.Panel.override({
            initComponent : function() {
                var me = this;
    
                if (me.columnLines) {
                    me.setColumnLines(me.columnLines);
                }
    
                me.callParent();
    
                me.on('scrollershow', function(scroller) {
                    if (scroller && scroller.scrollEl) {
                        scroller.clearManagedListeners();
                        scroller.mon(scroller.scrollEl,
                                     'scroll',
                                     scroller.onElScroll,
                                     scroller);
                    }
                });
            }
        });
    });

    私は、CR1に変更した所、画面レイアウトが大幅に崩れてしまった為、諦めました。orz

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