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

**shobuno** · 13 Feb 2012 6:15 PM

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

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

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

現象の手順：
１．コンボボックスの値を変更すると、Ajaxでデータを取得する。(多い)
２．取得したデータをGridに表示する。(ここではスクロールバーが機能する)
３．コンボボックスで、別のデータを選択し、Ajaxでデータを取得する。(少ない)
４．取得したデータをGridに表示する。(スクロールバーが出ていない)
５．コンボボックスで「１．」で選択した値に変更し、Ajaxでデータを取得する。
６．取得したデータをGridに表示する。(スクロールバーが表示されるが、Gridのデータが動かない)

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

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

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

解決策などございましたらご教授願います。
よろしくお願いいたします。

**mashiki** · 14 Feb 2012 4:16 AM

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

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

**shobuno** · 14 Feb 2012 6:12 PM

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

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

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

C. １の件数が多いとは具体的には何件くらいでしょう？
　→　具体的には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') グリッド

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

**mashiki** · 15 Feb 2012 3:58 PM

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

**shobuno** · 15 Feb 2012 6:36 PM

仰られるとおり、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});
};

**shobuno** · 21 Mar 2012 2:21 AM

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

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

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

本現象の詳細な再現方法：
１．Ajaxでデータを取得し、Gridに表示する。(スクロールバーが出るぐらい)
２．Ajaxで"１．"とは別のデータを取得する。(スクロールバーが出ない)
３．スクロールバーが出ていない状態で、20秒～30秒以上放置する。
４．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

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

Thread Tools

Search Thread

Display