PDA

View Full Version : Data Source Loading Issue



bossong
24 Aug 2009, 9:19 AM
I have a search in one FormPanel ...
var srchDlpForm = new Ext.form.FormPanel({
frame: true,
name: 'srchDlpForm',
id: 'srchDlpForm',
border: false,
autoHeight: true,
labelAlign: 'right',
labelWidth: 90,
items: [{
xtype: "fieldset",
title:'Search Parameters - Deals/Lots/Products',
autoHeight: true,
defaults: { border: false, labelSeparator: ' ' },
items: [{
layout: "form",
defaults: {labelStyle: 'font-weight:bold; font-size:10px'},
items: [
{
xtype: 'radiogroup',
hideLabel: true,
columns: [80,80,80], // can't get auto-width to work
items: [
{boxLabel: 'Deals', name: 'rg-srch', inputValue: 1},
{boxLabel: 'Lots', name: 'rg-srch', inputValue: 2, checked: true},
{boxLabel: 'Products', name: 'rg-srch', inputValue: 3}
]
},{
id: "srchSdfRef",
name: "srchSdfRef",
xtype: "textfield",
fieldLabel: "Reference #"
},{
id: "srchSdfBl",
name: "srchSdfBl",
xtype: "textfield",
fieldLabel: "Bill of Lading #"
},{
id: "srchSdfDateFrom",
name: "srchSdfDateFrom",
xtype: "datefield",
fieldLabel: "From Date"
},{
id: "srchSdfDateTo",
name: "srchSdfDateTo",
xtype: "datefield",
fieldLabel: "To Date"
}
]
}],
buttonAlign: 'center',
buttons: [{
id: 'btnSdfSearch',
name: 'btnSdfSearch',
text: 'Search',
handler:
function() {
Ext.Msg.alert('','Fetching data ...');
var thisForm = srchDlpForm.getForm().getEl().dom;
thisForm.action = contextPath + '/qs?op=getDlpSearchResults';
thisForm.submit({
method: 'POST'
,params: 'srchSdfRef=' + Ext.get('srchSdfRef').getValue()
,success: function (form, action) {
savingMask.hide();
Ext.Msg.alert('SUCCESS');
}
,failure: function (form, action) {
savingMask.hide();
Ext.Msg.alert('FAILED');
}
})
}
}]
}]
});

... with the results in a separate GridPanel ...
var dlpSearchResults = new Ext.grid.GridPanel({
id: 'dlpSearchResults',
border: false,
store: dlpSearchResultsDs,
columns: [{
id: 'dlpResultsLotId',
name: 'dlpResultsLotId',
header: "Lot Id",
width: 75,
sortable: true,
dataIndex: 'lotId'
}, {
header: "Lot Ref #",
width: 75,
sortable: true,
dataIndex: 'lotRefNumber'
}, {
header: "Deal ID",
width: 75,
sortable: true,
dataIndex: 'lotDeaId'
}, {
header: "Supplier",
width: 75,
sortable: true,
dataIndex: 'lotSplId'
}, {
header: "Status",
width: 75,
sortable: true,
dataIndex: 'lotStatus'
}, {
header: "Retail Value",
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'lotEstRetVal'
}, {
header: "Date Created",
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lotCreatedDate'
}],
stripeRows: true
});

... my store is as follows ...
var dlpSearchResultsDs = new Ext.data.Store({
reader: new Ext.data.JsonReader({
root: 'dlpSearchResultsGrid',
id: 'lotId'
}, [
{name: 'lotId', mapping: 'lotId'},
{name: 'lotRefNumber', mapping: 'lotRefNumber'},
{name: 'lotDeaId', mapping: 'lotDeaId'},
{name: 'lotSplId', mapping: 'lotSplId'},
{name: 'lotStatus', mapping: 'lotStatus'},
{name: 'lotEstRetVal', mapping: 'lotEstRetVal'},
{name: 'lotCreatedDate', mapping: 'lotCreatedDate', type: 'date', dateFormat: 'timestamp'},
]
)
});

When I return from my AJAX call to the DB, the JSON string is correct but, instead of loading the data in the dlpSearchResults GridPanel, it displays the JSON string in the browser (like it loads a new page as the previous is gone).

Any ideas as to what it going on? I'm new to ExtJS.

Thanks.

Jack9
24 Aug 2009, 1:28 PM
The reason you're having a problem is that you submit() a form. This is the intended behavior. You specify an action (url) and it goes there upon POST. What you want is


var dlpSearchResultsDs = new Ext.data.Store({
url: contextPath + '/qs?op=getDlpSearchResults', // this is the AJAX action equivalent
reader: new Ext.data.JsonReader(
{
root: 'dlpSearchResultsGrid',
id: 'lotId'
},
[
{name: 'lotId', mapping: 'lotId'},
{name: 'lotRefNumber', mapping: 'lotRefNumber'},
{name: 'lotDeaId', mapping: 'lotDeaId'},
{name: 'lotSplId', mapping: 'lotSplId'},
{name: 'lotStatus', mapping: 'lotStatus'},
{name: 'lotEstRetVal', mapping: 'lotEstRetVal'},
{name: 'lotCreatedDate', mapping: 'lotCreatedDate', type: 'date', dateFormat: 'timestamp'},
]
)
});
dlpSearchResultsDs.load(); // This is how you make your AJAX call
I had to clean up the original code to look through it properly (pasted below)

Ext.onReady(function(){

var contextPath = 'http://127.0.0.1/';
var srchDlpForm = new Ext.form.FormPanel({
frame: true,
name: 'srchDlpForm',
id: 'srchDlpForm',
border: false,
autoHeight: true,
labelAlign: 'right',
labelWidth: 90,
items: [{
xtype: "fieldset",
title:'Search Parameters - Deals/Lots/Products',
autoHeight: true,
defaults: { border: false, labelSeparator: ' ' },
items: [{
layout: "form",
defaults: {labelStyle: 'font-weight:bold; font-size:10px'},
items: [{
xtype: 'radiogroup',
hideLabel: true,
columns: [80,80,80], // can't get auto-width to work
items: [
{boxLabel: 'Deals', name: 'rg-srch', inputValue: 1},
{boxLabel: 'Lots', name: 'rg-srch', inputValue: 2, checked: true},
{boxLabel: 'Products', name: 'rg-srch', inputValue: 3}
]
},{
id: "srchSdfRef",
name: "srchSdfRef",
xtype: "textfield",
fieldLabel: "Reference #"
},{
id: "srchSdfBl",
name: "srchSdfBl",
xtype: "textfield",
fieldLabel: "Bill of Lading #"
},{
id: "srchSdfDateFrom",
name: "srchSdfDateFrom",
xtype: "datefield",
fieldLabel: "From Date"
},{
id: "srchSdfDateTo",
name: "srchSdfDateTo",
xtype: "datefield",
fieldLabel: "To Date"
}]
}],
buttonAlign: 'center',
buttons: [{
id: 'btnSdfSearch',
name: 'btnSdfSearch',
text: 'Search',
handler:function() {
Ext.Msg.alert('','Fetching data ...');
var thisForm = srchDlpForm.getForm().getEl().dom;
thisForm.action = contextPath + '/qs?op=getDlpSearchResults';
thisForm.submit({
method: 'POST'
,params: 'srchSdfRef=' + Ext.get('srchSdfRef').getValue()
,success: function (form, action) {
savingMask.hide();
Ext.Msg.alert('SUCCESS');
}
,failure: function (form, action) {
savingMask.hide();
Ext.Msg.alert('FAILED');
}
})
}
}]
}]
});

var dlpSearchResultsDs = new Ext.data.Store({
reader: new Ext.data.JsonReader(
{
root: 'dlpSearchResultsGrid',
id: 'lotId'
},
[
{name: 'lotId', mapping: 'lotId'},
{name: 'lotRefNumber', mapping: 'lotRefNumber'},
{name: 'lotDeaId', mapping: 'lotDeaId'},
{name: 'lotSplId', mapping: 'lotSplId'},
{name: 'lotStatus', mapping: 'lotStatus'},
{name: 'lotEstRetVal', mapping: 'lotEstRetVal'},
{name: 'lotCreatedDate', mapping: 'lotCreatedDate', type: 'date', dateFormat: 'timestamp'},
]
)
});

var dlpSearchResults = new Ext.grid.GridPanel({
id: 'dlpSearchResults',
border: false,
stripeRows: true,
store: dlpSearchResultsDs,
columns: [{
id: 'dlpResultsLotId',
name: 'dlpResultsLotId',
header: "Lot Id",
width: 75,
sortable: true,
dataIndex: 'lotId'
}, {
header: "Lot Ref #",
width: 75,
sortable: true,
dataIndex: 'lotRefNumber'
}, {
header: "Deal ID",
width: 75,
sortable: true,
dataIndex: 'lotDeaId'
}, {
header: "Supplier",
width: 75,
sortable: true,
dataIndex: 'lotSplId'
}, {
header: "Status",
width: 75,
sortable: true,
dataIndex: 'lotStatus'
}, {
header: "Retail Value",
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'lotEstRetVal'
}, {
header: "Date Created",
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lotCreatedDate'
}]
});

srchDlpForm.render('testDiv');
});

bossong
25 Aug 2009, 8:07 AM
Thank you jack9. Your assistance helped get me past the issue!

postmandev
25 Aug 2009, 11:00 AM
I'm seeing a similar issue calling Ext.Ajax.request() where the success JSON gets inserted into the DOM.

Jack9
25 Aug 2009, 12:06 PM
Without more details, I cannot tell you why.

Your request should have these attributes:

Ext.Ajax.request({
url : 'someurl' , // a valid one
params : { action : 'getDate' },//optional, could also do params: "action=test",
method: 'GET', // or POST
success: function ( result, request ) {
Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', result.responseText);
}
});