Extjs - 无法使用更新的数据库数据重新加载存储
Extjs - Unable to reload store with updated DB data
我添加了如下代码，
我在此代码中添加了一个下拉列表，
根据所选下拉选项的值，应填充网格数据。
我已将下拉数据传递给 php 代码并得到数据库的响应，
数据库的结果应该在同一个网格中重新加载，
我是 ExtJS 的新手，所以请帮助我，
下面是我的网格的样子，选择的下拉菜单是我遇到问题的地方。
Ext.onReady( function() {
var required = '<span style="color:black;font-weight:bold" data-qtip="Required">*</span>';
var win;
var dropdownboxdisplay = Ext.create('Ext.form.field.ComboBox', {
name : 'ichannel',
store: [['B', 'Brochure'],
['D', 'Direct Mail'],
['L', 'Direct Mail LVIS'],
['K', 'EEU'],
['E', 'Email'],
['O', 'LOB Transfers'],
['N', 'No IVR Treatment'],
['C', 'Outward Callbacks'],
['T', 'Text']],
listeners : {
change: {
fn: function () {
var rolename = this.value;
Ext.Ajax.request({
url: 'getStratToggles.php',
method: 'GET',
params: {
"rolename" : rolename
},
success: function (response) {
// this.grid.getView().refresh(true);
// var jsonResp = Ext.decode(response.responseText);
// Ext.Msg.alert("Info","UserName from Server : "+jsonResp.messages[1].strategy_label);
Ext.Msg.alert("im here");
var gData = Ext.JSON.decode(response.responseText);
var aArray = new Array();
// alert(gData.messages.length);
for(var i=0;i<2;i++){
//alert(gData.messages[i].strategy_label+','+gData.messages[i].delinq_code+','+gData.messages[i].account_status+','+gData.messages[i].reason_code+','+gData.messages[i].balance_low+','+gData.messages[i].balance_high+','+gData.messages[i].ventile_low+','+gData.messages[i].ventile_high+','+gData.messages[i].dlq_history+','+gData.messages[i].slot_number+','+gData.messages[i].transfer_key+','+gData.messages[i].default_transfer);
aArray[i] = "NA8725,90,,,NA8725,,1,6,,90,CARD_CA_CIB_MID,8889989149";//gData.messages[i].strategy_label+','+gData.messages[i].delinq_code+','+gData.messages[i].account_status+','+gData.messages[i].reason_code+','+gData.messages[i].balance_low+','+gData.messages[i].balance_high+','+gData.messages[i].ventile_low+','+gData.messages[i].ventile_high+','+gData.messages[i].dlq_history+','+gData.messages[i].slot_number+','+gData.messages[i].transfer_key+','+gData.messages[i].default_transfer;
}
//Ext.getCmp('toggle_grid').getStore().load(aArray);
var gRecords = gData.records;
Ext.iterate(gRecords, function(item) {
var rec = Store.findExact('strategy_label', "NA8725");
if (rec > -1) {
Store.getAt(rec).set('strategy_label', true);
}
});
//var store = this.grid.getStore();
//grid.getStore().load(aArray);
//grid.refresh();
// this.getInfoGrid().getStore().load(gData);
},
failure: function(){console.log('failure');}
});
}
}
}
});
var win = new Ext.Window({
id:'detaileduser-win',
border: 5,
layout:'fit',
width:400,
height:500,
plain: true,
modal: true,
draggable: false,
resizable:false,
labelWidth: 150, // label settings here cascade unless overridden
frame:true,
bodyPadding: '5 5 0',
bodyStyle:'padding:5px 5px 0',
items: form,
buttons: [
{
text:'Save',
handler: function(){
var basicForm = form.getForm();
var valArr = basicForm.getValues(false);
var dda = valArr.dda_code;
var ls = valArr.last_slot;
var ventile = valArr.ventile;
var lac = valArr.last_code;
var del = valArr.delinq_code;
var low = valArr.current_balance_low;
var high = valArr.current_balance_high;
if ( dda == "" && ls == "" && ventile == "" && lac == "" && del == "" && low == "" && high == "" ) {
alert ( "Must fill out at least one more from group (DDA Code, Last Slot, Ventile, Last Action Code, Delinquency Code, Low Balance or High Balance) to submit form" );
return;
}
form.onSubmit();
}
},{
text: 'Close',
handler: function(){
win.close();
}
}]
});
return { 'winObj':win, 'formObj':form };
}
store1 = Ext.create('Ext.data.Store', {
fields: [
'strategy_label',
'default_transfer'
],
proxy: {
type: 'ajax',
url: 'getStratToggles.php',
reader: {
root: 'messages',
totalProperty: 'messageCount'
}
},
autoLoad: true
})
store = Ext.create('Ext.data.Store', {
fields: [
'strategy_label',
'delinq_code',
'account_status',
'reason_code',
'balance_low',
'balance_high',
'ventile_low',
'ventile_high',
'dlq_history',
'slot_number',
'transfer_key',
'default_transfer'
],
proxy: {
type: 'ajax',
url: 'getStratToggles.php',
reader: {
root: 'messages',
totalProperty: 'messageCount'
}
},
autoLoad: true
})
searchText.storeRef = store
var grid = Ext.create('Ext.grid.Panel', {
columns: [
{hideable:false,header: "Strategy Label", width: 80, sortable: true, dataIndex: 'strategy_label', align: 'center'},
{header: "Stage of Delinquency", width: 110, sortable: true, dataIndex: 'delinq_code', align: 'center'},
{header: "Account Status", width: 110, sortable: true, dataIndex: 'account_status', align: 'center'},
{header: "Reason Code", width: 80, sortable: true, dataIndex: 'reason_code', align: 'center'},
{header: "Balance Low", width: 70, sortable: true, dataIndex: 'balance_low', align: 'center'},
{header: "Balance High", width: 70, sortable: true, dataIndex: 'balance_high', align: 'center'},
{header: "Ventile Low", width: 70, sortable: true, dataIndex: 'ventile_low', align: 'center'},
{header: "Ventile High", width: 70, sortable: true, dataIndex: 'ventile_high', align: 'center'},
{header: "DLQ History", width: 80, sortable: true, dataIndex: 'dlq_history', align: 'center'},
{header: "Slot Number", width: 80, sortable: true, dataIndex: 'slot_number', align: 'center'},
{header: "Transfer Key", width: 150, sortable: true, dataIndex: 'transfer_key' ,sortable: false, align: 'center'},
{header: "Default Transfer", width: 90, sortable: true, dataIndex: 'default_transfer',align: 'center'}
],
store: store,
id: 'toggle_grid',
multiSelect: true,
autoRender: true,
title: 'Strategy Admin',
width:1070,
tbar: [
{
text: 'Add',
iconCls:'add',
tooltip:'Create a new strategy',
disabled: hidden,
handler : function() { addGroupHandler(); }
},
'-',
{
text: ' Edit',
iconCls:'option',
tooltip:'Change the highlighted strategy settings',
disabled: hidden,
handler : function() { editGroupHandler(); }
},
'-',
{
text: ' Delete',
iconCls:'remove',
tooltip:'Delete the highlighted strategy',
disabled: hidden,
handler : function() {
var record = grid.getSelectionModel().getSelection()
if (record != "") {
Ext.Msg.show({
title:'Delete Group?',
msg: 'Are you sure you wish to permanently delete the selected stragegy?',
buttons: Ext.Msg.YESNOCANCEL,
fn: function(btn) {
if (btn == 'yes') {
var strat_lables = "";
var newChannel = "";
var tempChannel = "";
for (var i = 0; i < record.length; i++) {
var Selected = record[i]
var rec = Selected.data.strategy_label
var newChannel = rec[0];
if (( i == 0) || (newChannel == tempChannel )) {
strat_lables = strat_lables.concat( rec + ",");
} else {
alert ( "Cannot delete from multiple channels!");
return;
}
tempChannel = rec[0];
}
DoStrategyDelete(strat_lables);
}
},
icon: Ext.MessageBox.WARNING
});
} else {
Ext.MessageBox.alert( 'Error', 'Please select a row first.' );
}
}
},
'-',
{
text: ' Rollback',
iconCls:'option',
tooltip:'Rollback the highlighted strategy settings',
disabled: hidden,
handler : function() { RollbackGroupHandler(); }
},
'-',
searchText,
'-',
dropdownboxdisplay
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragText: 'Drag and drop to reorganize',
enableDrag: !viewOnly,
enableDrop: !viewOnly
},
listeners: {
beforedrop: function(node, data,overModel, dropPosition, dropFunction) {
var groupPattern = /^[a-zA-Z]+/
var indexPattern = /[0-9]+$/
var currRecord = data.records[0].data
var currRecord_start_label = currRecord.strategy_label
localStorage.currRecord_start_label=currRecord_start_label;
var currStratGroup = groupPattern.exec(currRecord.strategy_label)
var currStratIndex = indexPattern.exec(currRecord.strategy_label)
var overRecord = overModel.data
var overStratGroup = groupPattern.exec(overRecord.strategy_label)
var overStratIndex = indexPattern.exec(overRecord.strategy_label)
var updatedStratLabel = ""
if (overStratGroup[0] != currStratGroup[0]) {
alert('Cannot move strategies between different channels')
return false;
}
},
drop: function(node, data, overModel, dropPosition) {
var start = localStorage.currRecord_start_label
var groupPattern = /^[a-zA-Z]+/
var indexPattern = /[0-9]+$/
var currRecord = data.records[0].data
var currStratGroup = groupPattern.exec(currRecord.strategy_label)
var currStratIndex = indexPattern.exec(currRecord.strategy_label)
var overRecord = overModel.data
var overStratGroup = groupPattern.exec(overRecord.strategy_label)
var overStratIndex = indexPattern.exec(overRecord.strategy_label)
/* Complicated Logic
*
* If groups are the same:
* If the record was dropped after (below a record)
* then we need to add 1 to the index. If it is less
* than 10 we prepend the 0.
*
* If the record was dropped before (above a record)
* then it will take on that label
*/
var updatedStratLabel = ""
if (overStratGroup[0] != currStratGroup[0]) {
//this should be caught in the before drop listener
} else {
if (dropPosition == 'after') {
if (overStratIndex[0].substring(0,0) == 0) {
overStratIndex = parseInt(overStratIndex[0])
} else {
overStratIndex = parseInt(overStratIndex)
}
updatedStratLabel = currStratGroup + overStratIndex
} else if (dropPosition == 'before') {
updatedStratLabel = currStratGroup + overStratIndex
}
}
sortGroupHandler( start, updatedStratLabel );
//console.log( start + "-->" + updatedStratLabel );
}
}
},
//height: 500,
renderTo: 'tableHolder'
});
});
绝对没有必要在 dropdownboxdisplay 的 change 事件侦听器中调用 AJAX。相反，您只需将选定的 rolename 参数应用到 store 的代理并重新加载商店：
store.getProxy().setExtraParam('rolename', rolename);
store.load();
我添加了如下代码， 我在此代码中添加了一个下拉列表， 根据所选下拉选项的值，应填充网格数据。
我已将下拉数据传递给 php 代码并得到数据库的响应，
数据库的结果应该在同一个网格中重新加载，
我是 ExtJS 的新手，所以请帮助我，
下面是我的网格的样子，选择的下拉菜单是我遇到问题的地方。
Ext.onReady( function() {
var required = '<span style="color:black;font-weight:bold" data-qtip="Required">*</span>';
var win;
var dropdownboxdisplay = Ext.create('Ext.form.field.ComboBox', {
name : 'ichannel',
store: [['B', 'Brochure'],
['D', 'Direct Mail'],
['L', 'Direct Mail LVIS'],
['K', 'EEU'],
['E', 'Email'],
['O', 'LOB Transfers'],
['N', 'No IVR Treatment'],
['C', 'Outward Callbacks'],
['T', 'Text']],
listeners : {
change: {
fn: function () {
var rolename = this.value;
Ext.Ajax.request({
url: 'getStratToggles.php',
method: 'GET',
params: {
"rolename" : rolename
},
success: function (response) {
// this.grid.getView().refresh(true);
// var jsonResp = Ext.decode(response.responseText);
// Ext.Msg.alert("Info","UserName from Server : "+jsonResp.messages[1].strategy_label);
Ext.Msg.alert("im here");
var gData = Ext.JSON.decode(response.responseText);
var aArray = new Array();
// alert(gData.messages.length);
for(var i=0;i<2;i++){
//alert(gData.messages[i].strategy_label+','+gData.messages[i].delinq_code+','+gData.messages[i].account_status+','+gData.messages[i].reason_code+','+gData.messages[i].balance_low+','+gData.messages[i].balance_high+','+gData.messages[i].ventile_low+','+gData.messages[i].ventile_high+','+gData.messages[i].dlq_history+','+gData.messages[i].slot_number+','+gData.messages[i].transfer_key+','+gData.messages[i].default_transfer);
aArray[i] = "NA8725,90,,,NA8725,,1,6,,90,CARD_CA_CIB_MID,8889989149";//gData.messages[i].strategy_label+','+gData.messages[i].delinq_code+','+gData.messages[i].account_status+','+gData.messages[i].reason_code+','+gData.messages[i].balance_low+','+gData.messages[i].balance_high+','+gData.messages[i].ventile_low+','+gData.messages[i].ventile_high+','+gData.messages[i].dlq_history+','+gData.messages[i].slot_number+','+gData.messages[i].transfer_key+','+gData.messages[i].default_transfer;
}
//Ext.getCmp('toggle_grid').getStore().load(aArray);
var gRecords = gData.records;
Ext.iterate(gRecords, function(item) {
var rec = Store.findExact('strategy_label', "NA8725");
if (rec > -1) {
Store.getAt(rec).set('strategy_label', true);
}
});
//var store = this.grid.getStore();
//grid.getStore().load(aArray);
//grid.refresh();
// this.getInfoGrid().getStore().load(gData);
},
failure: function(){console.log('failure');}
});
}
}
}
});
var win = new Ext.Window({
id:'detaileduser-win',
border: 5,
layout:'fit',
width:400,
height:500,
plain: true,
modal: true,
draggable: false,
resizable:false,
labelWidth: 150, // label settings here cascade unless overridden
frame:true,
bodyPadding: '5 5 0',
bodyStyle:'padding:5px 5px 0',
items: form,
buttons: [
{
text:'Save',
handler: function(){
var basicForm = form.getForm();
var valArr = basicForm.getValues(false);
var dda = valArr.dda_code;
var ls = valArr.last_slot;
var ventile = valArr.ventile;
var lac = valArr.last_code;
var del = valArr.delinq_code;
var low = valArr.current_balance_low;
var high = valArr.current_balance_high;
if ( dda == "" && ls == "" && ventile == "" && lac == "" && del == "" && low == "" && high == "" ) {
alert ( "Must fill out at least one more from group (DDA Code, Last Slot, Ventile, Last Action Code, Delinquency Code, Low Balance or High Balance) to submit form" );
return;
}
form.onSubmit();
}
},{
text: 'Close',
handler: function(){
win.close();
}
}]
});
return { 'winObj':win, 'formObj':form };
}
store1 = Ext.create('Ext.data.Store', {
fields: [
'strategy_label',
'default_transfer'
],
proxy: {
type: 'ajax',
url: 'getStratToggles.php',
reader: {
root: 'messages',
totalProperty: 'messageCount'
}
},
autoLoad: true
})
store = Ext.create('Ext.data.Store', {
fields: [
'strategy_label',
'delinq_code',
'account_status',
'reason_code',
'balance_low',
'balance_high',
'ventile_low',
'ventile_high',
'dlq_history',
'slot_number',
'transfer_key',
'default_transfer'
],
proxy: {
type: 'ajax',
url: 'getStratToggles.php',
reader: {
root: 'messages',
totalProperty: 'messageCount'
}
},
autoLoad: true
})
searchText.storeRef = store
var grid = Ext.create('Ext.grid.Panel', {
columns: [
{hideable:false,header: "Strategy Label", width: 80, sortable: true, dataIndex: 'strategy_label', align: 'center'},
{header: "Stage of Delinquency", width: 110, sortable: true, dataIndex: 'delinq_code', align: 'center'},
{header: "Account Status", width: 110, sortable: true, dataIndex: 'account_status', align: 'center'},
{header: "Reason Code", width: 80, sortable: true, dataIndex: 'reason_code', align: 'center'},
{header: "Balance Low", width: 70, sortable: true, dataIndex: 'balance_low', align: 'center'},
{header: "Balance High", width: 70, sortable: true, dataIndex: 'balance_high', align: 'center'},
{header: "Ventile Low", width: 70, sortable: true, dataIndex: 'ventile_low', align: 'center'},
{header: "Ventile High", width: 70, sortable: true, dataIndex: 'ventile_high', align: 'center'},
{header: "DLQ History", width: 80, sortable: true, dataIndex: 'dlq_history', align: 'center'},
{header: "Slot Number", width: 80, sortable: true, dataIndex: 'slot_number', align: 'center'},
{header: "Transfer Key", width: 150, sortable: true, dataIndex: 'transfer_key' ,sortable: false, align: 'center'},
{header: "Default Transfer", width: 90, sortable: true, dataIndex: 'default_transfer',align: 'center'}
],
store: store,
id: 'toggle_grid',
multiSelect: true,
autoRender: true,
title: 'Strategy Admin',
width:1070,
tbar: [
{
text: 'Add',
iconCls:'add',
tooltip:'Create a new strategy',
disabled: hidden,
handler : function() { addGroupHandler(); }
},
'-',
{
text: ' Edit',
iconCls:'option',
tooltip:'Change the highlighted strategy settings',
disabled: hidden,
handler : function() { editGroupHandler(); }
},
'-',
{
text: ' Delete',
iconCls:'remove',
tooltip:'Delete the highlighted strategy',
disabled: hidden,
handler : function() {
var record = grid.getSelectionModel().getSelection()
if (record != "") {
Ext.Msg.show({
title:'Delete Group?',
msg: 'Are you sure you wish to permanently delete the selected stragegy?',
buttons: Ext.Msg.YESNOCANCEL,
fn: function(btn) {
if (btn == 'yes') {
var strat_lables = "";
var newChannel = "";
var tempChannel = "";
for (var i = 0; i < record.length; i++) {
var Selected = record[i]
var rec = Selected.data.strategy_label
var newChannel = rec[0];
if (( i == 0) || (newChannel == tempChannel )) {
strat_lables = strat_lables.concat( rec + ",");
} else {
alert ( "Cannot delete from multiple channels!");
return;
}
tempChannel = rec[0];
}
DoStrategyDelete(strat_lables);
}
},
icon: Ext.MessageBox.WARNING
});
} else {
Ext.MessageBox.alert( 'Error', 'Please select a row first.' );
}
}
},
'-',
{
text: ' Rollback',
iconCls:'option',
tooltip:'Rollback the highlighted strategy settings',
disabled: hidden,
handler : function() { RollbackGroupHandler(); }
},
'-',
searchText,
'-',
dropdownboxdisplay
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragText: 'Drag and drop to reorganize',
enableDrag: !viewOnly,
enableDrop: !viewOnly
},
listeners: {
beforedrop: function(node, data,overModel, dropPosition, dropFunction) {
var groupPattern = /^[a-zA-Z]+/
var indexPattern = /[0-9]+$/
var currRecord = data.records[0].data
var currRecord_start_label = currRecord.strategy_label
localStorage.currRecord_start_label=currRecord_start_label;
var currStratGroup = groupPattern.exec(currRecord.strategy_label)
var currStratIndex = indexPattern.exec(currRecord.strategy_label)
var overRecord = overModel.data
var overStratGroup = groupPattern.exec(overRecord.strategy_label)
var overStratIndex = indexPattern.exec(overRecord.strategy_label)
var updatedStratLabel = ""
if (overStratGroup[0] != currStratGroup[0]) {
alert('Cannot move strategies between different channels')
return false;
}
},
drop: function(node, data, overModel, dropPosition) {
var start = localStorage.currRecord_start_label
var groupPattern = /^[a-zA-Z]+/
var indexPattern = /[0-9]+$/
var currRecord = data.records[0].data
var currStratGroup = groupPattern.exec(currRecord.strategy_label)
var currStratIndex = indexPattern.exec(currRecord.strategy_label)
var overRecord = overModel.data
var overStratGroup = groupPattern.exec(overRecord.strategy_label)
var overStratIndex = indexPattern.exec(overRecord.strategy_label)
/* Complicated Logic
*
* If groups are the same:
* If the record was dropped after (below a record)
* then we need to add 1 to the index. If it is less
* than 10 we prepend the 0.
*
* If the record was dropped before (above a record)
* then it will take on that label
*/
var updatedStratLabel = ""
if (overStratGroup[0] != currStratGroup[0]) {
//this should be caught in the before drop listener
} else {
if (dropPosition == 'after') {
if (overStratIndex[0].substring(0,0) == 0) {
overStratIndex = parseInt(overStratIndex[0])
} else {
overStratIndex = parseInt(overStratIndex)
}
updatedStratLabel = currStratGroup + overStratIndex
} else if (dropPosition == 'before') {
updatedStratLabel = currStratGroup + overStratIndex
}
}
sortGroupHandler( start, updatedStratLabel );
//console.log( start + "-->" + updatedStratLabel );
}
}
},
//height: 500,
renderTo: 'tableHolder'
});
});
绝对没有必要在 dropdownboxdisplay 的 change 事件侦听器中调用 AJAX。相反，您只需将选定的 rolename 参数应用到 store 的代理并重新加载商店：
store.getProxy().setExtraParam('rolename', rolename);
store.load();