0

extjs グリッド パネルの問題を解決するためのヒントを探しています。私が直面している状況は次のとおりです。

私はいくつかの列で構成されたグリッド パネルを持っています。そのようなグリッドには日付ストアが入力されます。以下に、グリッドのデータ ストアとそれに関連するデータ モデルを示します。

Ext.define('branch', {
    extend: 'Ext.data.Model',
    fields: [{
        type: 'int',
        name: 'id'
    }, {
        type: 'int',
        name: 'customer_id'
    }, {
        type: 'int',
        name: 'city_id'
    }, {
        type: 'string',
        name: 'address'
    }, {
        type: 'string',
        name: 'phone'
    }, {
        type: 'string',
        name: 'fax'
    }, {
        type: 'string',
        name: 'email'
    }]
});

var branch_store = Ext.create('Ext.data.Store', {
    autoDestroy: true,
    model: 'branch',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'controller/loader.php?item=branch',
        reader: {
            type: 'json',
            successProperty: 'success',
            root: 'data'
        }
    }
});

列のリストを含む gridpanel の定義は次のとおりです。

rowHeight: 0.15,
xtype: 'gridpanel',
id: 'branch_grid',
store: branch_store,
height: 400,
title:'Branch list',
columns: [{
    text   : 'id',
width    : 30,
sortable : true,
dataIndex: 'id'
},{
    text   : 'Company',
width  :   200,
sortable : true,
dataIndex: 'customer_id',
renderer: get_company
},{
    text   : 'City',
width    : 100,
sortable : true,
dataIndex: 'city_id'
//renderer: city_from_id
},{
    text   : 'Address',
width    : 100,
sortable : true,
dataIndex: 'address'
},{
text   : 'Phone',
width    : 100,
sortable : true,
dataIndex: 'phone'
},{
text   : 'Fax',
width    : 100,
sortable : true,
dataIndex: 'fax'
},{
text   : 'Email',
width    : 100,
sortable : true,
dataIndex: 'email'
}

「Company」列にレンダラーを使用しなかった場合、extjs は顧客の ID である整数を含む列を表示します。私はそれが気に入らないので、顧客 ID を知ることで顧客名を取得する get_company という名前の単純なレンダラーを書きました。そのために、渡された ID を持つレコードを探して顧客のデータ ストアをスキャンし、そのレコードが見つかると、顧客の名前を含む「会社」と呼ばれるレコードのフィールドを返します。レンダラーのコードは次のとおりです。

function get_company(val) {
    if(customer_store.count()>0) {
    console.log('Val: '+ val + ', Stuff: ' + customer_store.count());
    company = ' ' + customer_store.getById(val).get('company');
    console.log(typeof company);
    return company;
}
else{
    console.log('customer store is empty');
    return 'test name';
}
}

最後に、customer_store とそれに関連するデータ モデルのコードを次に示します。

Ext.define('customer', {
    extend: 'Ext.data.Model',
    fields: [{
        type: 'int',
        name: 'id'
    }, {
        type: 'string',
        name: 'company'
    }, {
        type: 'string',
        name: 'vat'
    }, {
        type: 'string',
        name: 'ssn'
    }, {
        type: 'int',
        name: 'ref_id'
    }]
});

var customer_store = Ext.create('Ext.data.Store', {
    autoDestroy: true,
    model: 'customer',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'controller/loader.php?item=customer',
        reader: {
            type: 'json',
            successProperty: 'success',
            root: 'data'
        }
    }
});

このコードをテストするたびに、Company 列の各行に「テスト名」が含まれる gridpanel が表示されます。この問題の原因は、customer_store が完全に読み込まれる前にレンダラー関数が動作することだと思います。この問題を解決する方法を知っている人はいますか?

4

1 に答える 1

2

問題を解決する唯一の方法は、 がcustomer_storeより前にロードされるようにすることbranch_storeです。

branch_storeしたがって、自動的にロードしないでください。グリッド パネルのイベントをキャッチする代わりに、次のようafterrenderにストアをロードします。customer_store

customer_store.on('load', function() {
   branch_store.load();
}, this, { single: true });
customer_store.load();
于 2012-06-18T10:32:43.970 に答える