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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar