「変更」イベントのリスナーがあるコンボボックスで問題が発生しています。イベントが発生すると、2 番目のコンボボックスで使用可能な値をフィルター処理するために別のコンボボックスを強化するストアをフィルター処理する関数が実行されます。
アイデアは、最初のコンボボックスの短いリストから選択すると、2 番目のコンボボックスの選択肢が絞り込まれるというものです。
フォームが読み込まれると、2 番目のコンボボックスをクリックしてすべての選択肢を表示できます。これはうまく機能します。次に、最初のコンボボックスで何かを選択してから、2 番目のコンボボックスをもう一度クリックすると、適切な短縮リストが表示されますが、グレー表示され、「読み込み中...」が回転するだけで消えません。
フォームをロードして最初のコンボボックスで何かを選択してから 2 番目のコンボボックスをクリックすると、フィルタリングされて正常に表示されますが、最初のボックスで選択内容を変更してクリックすると、上記で説明したロードの問題が発生します。 2 番目のコンボボックスをもう一度。
以下のコードを参照してください。別の画面でこの設定を行っていますが、この問題はないようです。
次のように作成された ext ストアがあります。
var comboBreaker = Ext.create('Ext.data.Store', {
autoLoad: false,
remoteSort: true,
remoteFilter: true,
fields: [{
name: 'id',
mapping: 'item_id',
type: 'int',
useNull: false},
'item_display_number','item_name', 'line_item_type_id', 'item_description'
],
proxy:{
type:'ajax',
url: '/invoicer/data/getlineitems',
reader: {
type: 'json',
successProperty: 'success',
root: 'results',
totalProperty: 'totalCount'
},
sorters:[{
property:'item_display_number',
direction:'ASC'
}]
}
});
このストアは、次のようにコンボボックスを強化します。
Ext.define('Writer.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.writerform',
requires: ['Ext.form.field.Text'],
initComponent: function(){
this.addEvents('create');
Ext.apply(this, {
activeRecord: null,
frame: true,
title: 'Line Item',
id: 'writerform',
fieldDefaults: {
anchor: '100%',
labelAlign: 'right'
},
items: [{
xtype: 'combobox',
fieldLabel: 'Item #',
name: 'item_number',
store: comboBreaker,
displayField: 'item_display_number',
valueField: 'id',
allowBlank: false,
forceSelection: true
},{
xtype: 'combobox',
fieldLabel: 'Item Type',
name: 'item_type',
id: 'item_type',
displayField: 'line_item_type',
valueField: 'id',
store: invoicer_lineItemTypeStore,
forceSelection: true,
labelWidth: 75,
width: 200,
listeners: {
change: {
fn: function() {
itemNumberFilter(comboBreaker);
}
}
}
}]
});
itemNumberFilter() 関数はストアを受け取り、それに対してフィルタリングを行います。そのコードは次のとおりです。
function itemNumberFilter( store ) {
var id = Ext.getCmp('item_type').getValue();
store.remoteFilter = false;
store.clearFilter();
if ( id ) {
store.filter('line_item_type_id', id);
}
store.remoteFilter = true;
store.removeAll();
store.load({
scope: this,
callback: function( records ) {
console.log('Loaded records!');
console.log(records);
}
});
}
最初のコンボボックスで選択を変更するたびにログアウトされたレコードが表示され、2 番目のコンボボックスで結果を「見る」ことができますが、「ロード中..」GIF が表示されて常にグレー表示されます。
編集: ビデオの例: http://screencast.com/t/cUSHyFE6FIV
編集：これが解決策だと思います：
lastQuery: '',
listeners: {
beforequery: {
fn: function(query) {
delete this.lastQuery;
}
}
}
これをコンボボックス構成に追加すると、問題が修正されます。
Edit2:これによって導入された2番目のバグに遭遇しました。追加することで修正されました:
this.clearValue();
beforequery 関数 (上記で this.lastQuery を削除) に追加します。これにより、ドロップダウン矢印がクリックされるたびにコンボボックスの値がクリアされます。