PDA

View Full Version : How to Reload the store in Ext js 3.2



askarkhan
28 Oct 2013, 4:41 AM
Hi

I am Unable to load the store outside of Ext.onReady(function(){}); using store.load() function.

need your opinion and suggestion or you can suggest someone for help

thanks

Colin Alworth
28 Oct 2013, 10:39 AM
Moved to Ext JS 3 help forums.

slemmon
29 Oct 2013, 9:28 PM
What do you mean by "loading the store outside of onReady?" How are you trying to load the store currently?

askarkhan
30 Oct 2013, 2:04 AM
46628

Below is my code

function filterData(){

$('form').unbind('submit');
var options = {
target: '',
beforeSubmit: show_filterData_Request,
success: show_filterData_Response,
url: 'ajax/test.php?task=LISTING'
};

// bind to the form's submit event
$('form').submit(function() {
$(this).ajaxSubmit(options);
return false;
});




}
function show_filterData_Request(formData, jqForm, options)
{
var queryString = $.param(formData);

return true;
}

function show_filterData_Response(responseText, statusText)
{


// I want to load the grid here,after filtering out the grid


}

Ext.onReady(function () {
//Ext.QuickTips.init();

var med_proxy = new Ext.data.HttpProxy({
api: {
read: 'ajax/test1.php?task=LISTING',
create: 'ajax/test1.php?task=CREATE',
update: 'ajax/test1.php?task=UPDATE',
destroy: 'ajax/test1.php?task=DELETE'
}
});

var flowMonitor_reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'af_nr',
baseParams: {
'origid': origid
},


root: 'results',
fields: ['af_nr',{name: 'date', type: 'date', dateFormat: 'Y-m-d'},'af_flow', 'af_baseline_flow', 'af_urr', 'af_kt_v', 'af_venous_pressure', 'af_arterial_pressure', 'af_clinical_problems', 'af_notes_assessment']
});

var flowMonitor_writer = new Ext.data.JsonWriter({
encode: true,
writeAllFields: true,
batch: true
});


var storeFlowMonitor = new Ext.data.Store({
root: 'results',
method: 'POST',
proxy: med_proxy,
writer: flowMonitor_writer,
reader: flowMonitor_reader,
autoSave: false,
batch: true,
baseParams: {
'origid': origid
},
listeners: {
write: function (store, action, result, res, rs) {
//alert('Woo')
},
exception: function (proxy, type, action, options, res, arg) {
if (res.responseText != null) {
Ext.Msg.show({
title: 'REMOTE EXCEPTION',
msg: res.responseText,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});

storeFlowMonitor.on('save', function (record) {
Ext.getCmp('medSave').enable();
Ext.getCmp('medRefresh').enable();
});

storeFlowMonitor.on('beforesave', function (record) {
flowMonitorGridPanel.getView().focusEl.focus();
Ext.getCmp('medSave').disable();
Ext.getCmp('medRefresh').disable();
});

function onAdd() {
var now = new Date();

var rec = new flowMonitorGridPanel.store.recordType( {af_date:now,
af_flow:'', af_baseline_flow:'',af_urr:'', af_kt_v:'', af_venous_pressure:'', af_arterial_pressure:'', af_clinical_problems:'', af_notes_assessment:''} );
flowMonitorGridPanel.store.insert(0, rec);
flowMonitorGridPanel.startEditing(0, 3);
flowMonitorGridPanel.getSelectionModel().selectFirstRow();
}



function onDelete() {
var selectedRows = flowMonitorGridPanel.getSelectionModel().getSelections();
for (var i = 0; i < selectedRows.length; i++) {
storeFlowMonitor.remove(selectedRows[i]);
}
}



function onSave() {
flowMonitorGridPanel.stopEditing(false);
storeFlowMonitor.save();
}


function onRefresh() {
flowMonitorGridPanel.stopEditing(false);
var rs = storeFlowMonitor.getModifiedRecords();
if (rs.length > 0) {
var status = window.confirm("Some data modified on grid, do you want to save grid data before loading latest data ?");
if (status){
storeFlowMonitor.save();
}
}
storeFlowMonitor.load();
}

var flowMonitorGridPanel = new Ext.grid.EditorGridPanel({
store: storeFlowMonitor,
id: 'flowMonitorGridPanel',
renderTo: 'Flow-Monitor-grid',
frame: true,
title: 'Flow Monitor',
autoScroll: true,
width : 1094,
height: 200,
clicksToEdit: 2,
columnLines: true,
columns: flowColumns,

loadMask: {
msg: 'Please wait...'
},
sm: new Ext.grid.RowSelectionModel(),
collapsible: true,
bbar: [{
text: 'Save',
iconCls: 'icon-save',
handler: onSave,
id:'medSave',
disabled: !editDataMode
},
'-', {
text: 'Add',
iconCls: 'icon-add',
handler: onAdd,
disabled: !editDataMode
},
'-', {
text: 'Delete',
iconCls: 'icon-delete',
handler: onDelete,
disabled: !editDataMode
},
'-', {
text: 'Refresh',
id:'medRefresh',
iconCls: 'icon-table_refresh',
handler: onRefresh
}]
});
if(!editDataMode){
flowMonitorGridPanel.on('beforeedit', isGridReadOnly, this);
}
storeFlowMonitor.load();

});

askarkhan
30 Oct 2013, 2:14 AM
can i use the below code to solve this problem

var monitorStore = Ext.getCmp('flowMonitorGridPanel').getStore();
monitorStore.loadData(responseText);

askarkhan
30 Oct 2013, 2:16 AM
46629

askarkhan
30 Oct 2013, 2:18 AM
I am using the below code for filtering the data
function filterData(){

$('form').unbind('submit');
var options = {
target: '',
beforeSubmit: show_filterData_Request,
success: show_filterData_Response,
url: 'ajax/test.php?task=LISTING'
};

// bind to the form's submit event
$('form').submit(function() {
$(this).ajaxSubmit(options);
return false;
});




}
function show_filterData_Request(formData, jqForm, options)
{
var queryString = $.param(formData);

return true;
}

function show_filterData_Response(responseText, statusText)
{


// I want to load the grid here,after filtering out the grid


}

slemmon
30 Oct 2013, 1:53 PM
So, all of the filtering is happening on the server, correct? You're not wanting to load all data into the store and then use the store's filter methods?
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.Store-method-filter
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.Store-method-findBy

askarkhan
31 Oct 2013, 12:12 AM
Thanks @slemmon, I find a simple answer to my thread.


I got all the filter fields using jquery.
second I load the store by passing the filters a base parameters
below is my code

flow_filter = $('#flow_filter').val();
flow_value_1 = $('#flow_value_1').val();
arterial_p_filter = $('#arterial_p_filter').val();
arterial_p_value_1 = $('#arterial_p_value_1').val();
base_filter = $('#base_filter').val();
base_value_1 = $('#base_value_1').val();
flow_change_filter = $('#flow_change_filter').val();
flow_change_value_1 = $('#flow_change_value_1').val();
ktv_filter = $('#ktv_filter').val();
ktv_value_1 = $('#ktv_value_1').val();
urr_filter = $('#urr_filter').val();
urr_value_1 = $('#urr_value_1').val();
venus_p_filter = $('#venus_p_filter').val();
venus_p_value_1 = $('#venus_p_value_1').val();

monitorStore = Ext.getCmp('flowMonitorGridPanel').getStore();
monitorStore.reload({
params: { flow_filter: flow_filter,flow_value_1:flow_value_1,
arterial_p_filter: arterial_p_filter,arterial_p_value_1:arterial_p_value_1,
base_filter: base_filter,base_value_1:base_value_1,
flow_change_filter: flow_change_filter,flow_change_value_1:flow_change_value_1,
ktv_filter: ktv_filter,ktv_value_1:ktv_value_1,
urr_filter: urr_filter,urr_value_1:urr_value_1,
venus_p_filter: venus_p_filter,venus_p_value_1:venus_p_value_1


}

}); :)