PDA

View Full Version : [SOLVED] baseParams not passed when paging



mjhaston
16 Nov 2010, 11:08 AM
I've seen many posts talking about this issue, but I still don't get it. I put a few dummy params out there. "dummy1" is never passed.

What I'm trying to accomplish is sending "recordID" when I try and page through my grid. I think my code in red below is where my issue is.






Ext.ns('Example');

Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';

var ds = new Ext.data.JsonStore({
storeId: 'MyStore1',
url: '/cgidev2p/jsonStore1.pgm',
root: 'data',
autoLoad: false,
totalProperty: 'results',
remoteSort: true,
sortField: 'date',
sortDir: 'DESC',
paramNames: {
start: "start",
limit: "limit"
},
fields: [{
name: 'date',
dateFormat: '',
type: 'date'
}, {
name: 'code'
}, {
name: 'description'
}, {
name: 'userid'
}]
});

// example grid pre-configured class
Example.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function(){
Ext.apply(this, {
xtype: 'editorgrid',
title: 'Account Activity',
store: 'MyStore1',
width: 660,
height: 422,
stripeRows: true,
columns: [{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Date',
sortable: true,
width: 100,
tooltip: 'This is a date field.',
editor: {
xtype: 'datefield'
}
}, {
xtype: 'gridcolumn',
header: 'Code',
sortable: true,
width: 100,
dataIndex: 'code',
align: 'left',
id: '',
editor: {
xtype: 'textfield'
}
}, {
xtype: 'gridcolumn',
header: 'Description',
sortable: true,
width: 200,
dataIndex: 'description',
editor: {
xtype: 'textfield'
}
}, {
xtype: 'gridcolumn',
header: 'User ID',
sortable: true,
width: 100,
editable: false,
dataIndex: 'userid',
editor: {
xtype: 'textfield'
}
}],
bbar: {
xtype: 'paging',
store: 'MyStore1',
autoScroll: true,
pageSize: 100,
displayInfo: true,

baseParams: {
recordID: Ext.getCmp('combo-ssn').getValue(),
start: 0,
limit: 100,
dummy: 'dummy1'
}

}
});

// call parent
Example.Grid.superclass.initComponent.apply(this, arguments);

}
});

Ext.reg('examplegrid', Example.Grid);

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.override(Ext.form.Field, {
afterRender: Ext.form.Field.prototype.afterRender.createSequence(function(){
var qt = this.qtip;
if (qt) {
Ext.QuickTips.register({
target: this,
title: '',
text: qt,
enabled: true,
showDelay: 20
});
}
})

});

var detailEl;
var message;

var customerStore = new Ext.data.JsonStore({
storeId: 'MyStore',
root: 'data',
url: '/cgidev2p/jsonStore2.pgm',
fields: [{
name: 'name'
}, {
name: 'ssn'
}]
});

var comboList = new Ext.form.ComboBox({
xtype: 'combo',
store: 'MyStore',
displayField: 'name',
width: 300,
fieldLabel: 'Member Name',
valueField: 'ssn',
name: 'combo-ssn',
allowBlank: false,
id: 'combo-ssn',
emptyText: 'Start typing member ssn or name',
qtip: 'Start typing member ssn or name'

});

var addressTab = {
id: 'address-tab',
layout: 'form',
title: 'Member Details',
defaults: {
width: 250
},
bodyStyle: 'padding:10px',
defaultType: 'textfield',
items: [comboList, {
xtype: 'textfield',
fieldLabel: 'SSN',
name: 'essn',
width: 100,
disabled: true
}, {
xtype: 'datefield',
fieldLabel: 'DOB',
width: 100,
name: 'dob'
}, {
xtype: 'textfield',
fieldLabel: 'Address',
name: 'addr1'
}, {
xtype: 'textfield',
name: 'addr2'
}, {
xtype: 'textfield',
fieldLabel: 'City, State Zip ',
name: 'city-state-zip'
}, {
xtype: 'textfield',
fieldLabel: 'Country ',
name: 'country'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email'
}]
};

var phoneTab = {
id: 'phone-tab',
disabled: true,
layout: 'form',
title: 'Phone Numbers',
defaults: {
width: 250
},
bodyStyle: 'padding:10px',
defaultType: 'textfield',
items: [{
fieldLabel: 'Creation Date',
name: 'nacrdt'
}, {
fieldLabel: 'Home',
name: 'home'
}, {
fieldLabel: 'Business',
name: 'business'
}, {
fieldLabel: 'Mobile',
name: 'mobile'
}, {
fieldLabel: 'Fax',
name: 'fax'
}]
};

var customerNotes = {
title: 'Member Notes',
layout: 'fit',
id: 'customer-notes',
disabled: true,
items: [{
xtype: 'htmleditor',
hideLabel: true,
name: 'bio',
id: 'bio',
bodyStyle: 'padding:10px;'
}]
};

var customerTab = new Ext.FormPanel({
title: 'Member Activity |main_app2|',
bodyStyle: 'padding:10px',
labelWidth: 100,
layout: 'fit',
border: false,
frame: true,
waitMsgTarget: true,
baseParams: {
recordID: Ext.getCmp('combo-ssn').getValue(),
start: 0,
limit: 100,
dummy: 'dummy2'
},
items: [{
xtype: 'tabpanel',
deferredRender: false,
layoutOnTabChange: true,
plain: true,
defaults: {
layout: 'fit'
},
activeItem: 0,
items: [addressTab, phoneTab, customerNotes, {
title: 'xxxx',
id: 'gridtab',
disabled: true,
xtype: 'examplegrid',
autoScroll: true,
listeners: {
scope: this,
activate: function(panel){
this.Ext.StoreMgr.get('MyStore1').load({
params: {
recordID: Ext.getCmp('combo-ssn').getValue(),
start: 0,
limit: 100,
dummy: 'dummy3'
}
});
}
}
}]
}],

bbar: [{
text: 'Load',
id: 'load',
iconCls: 'add',
handler: function(){
var idFld = getRecordID();
Ext.apply(customerTab.form.baseParams, {
recordID: idFld
});
customerTab.form.load({
url: '/cgidev2p/jsonStore3.pgm',
method: 'GET',
waitMsg: 'Loading',
success: function(form, action){
Ext.getCmp('save').enable();
Ext.getCmp('gridtab').enable();
Ext.getCmp('phone-tab').enable();
Ext.getCmp('customer-notes').enable();
message = '<span style="color:green;">Load successful!</span>';
Ext.getCmp('details-panel').body.update(message);
},

failure: function(form, action){
message = '<span style="color:red;">Load failed!</span>';
Ext.getCmp('details-panel').body.update(message);
}
});
}
}, {
text: 'Save',
id: 'save',
iconCls: 'save',
disabled: true,
handler: function(){
customerTab.form.submit({
url: '/cgidev2p/form_send.pgm',
waitMsg: 'Saving Data...',
success: function(form, action){
message = '<span style="color:green;">Save successful!</span>';
Ext.getCmp('details-panel').body.update(message);
},
failure: function(form, action){
message = '<span style="color:red;">Save failed!</span>';
Ext.getCmp('details-panel').body.update(message);
}
});
}
}, '-', {
text: 'Reset',
id: 'reset',
iconCls: 'reset',
handler: function(){
customerTab.form.reset();
Ext.getCmp('save').disable();
Ext.getCmp('save').disable();
Ext.getCmp('gridtab').disable();
Ext.getCmp('phone-tab').disable();
Ext.getCmp('customer-notes').disable();
message = '<span style="color:green;">Form reset successfully! Tabs disabled again.</span>';
Ext.getCmp('details-panel').body.update(message);
}
}]
});

function getRecordID(){
var recid = Ext.getCmp('combo-ssn').getValue();
if (!recid)
recid = 1;
return recid;
}

var viewport = new Ext.Viewport({
layout: 'border',
frame: true,
renderTo: Ext.getBody(),
items: [{
region: 'center',
xtype: 'tabpanel',
id: 'content-panel',
activeTab: 0,
items: [customerTab]
}, {
xtype: 'treepanel',
title: 'West Region',
width: 200,
region: 'west',
collapsible: true,
autoScroll: true,
footer: true,
padding: 5,
shadow: 'frame',
useArrows: true,
singleExpand: true,
split: true,
collapseFirst: false,
collapseMode: 'standard',
root: {
text: 'GOTO Options',
editable: false,
qtip: 'Click to view options',
allowDrag: false,
allowDrop: false,
isTarget: false,
id: 'gotoMenu'
},
loader: {
url: '/cgidev2p/jsonTree1.pgm'
}
}, {
region: 'south',
id: 'details-panel',
// split: true,
height: 80,
minSize: 80,
maxSize: 200,
padding: 10,
collapsible: true,
autoScroll: true,
title: 'Info Center',
margins: '2 0 0 0',
bodyStyle: {
fontSize: '12px;',
fontFace: 'Verdana',
padding: '10px;',
background: '#eee;'
},
html: 'Informational messages to appear here.'
}]
});

viewport.show();

});

laurentParis
17 Nov 2010, 8:26 AM
set baseParams on store and use listeners beforeload to add params on your ajax request


var ds = new Ext.data.JsonStore({
storeId: 'MyStore1',
url: '/cgidev2p/jsonStore1.pgm',
root: 'data',
autoLoad: false,
totalProperty: 'results',
remoteSort: true,
sortField: 'date',
sortDir: 'DESC',
paramNames: {
start: "start",
limit: "limit"
},
baseParams: {
//recordID: Ext.getCmp('combo-ssn').getValue(),
start: 0,
limit: 100,
dummy: 'dummy1'
},
listeners: {
beforeload: function (store, meta) {
meta.params.recordID = 'test'; //Ext.getCmp('combo-ssn').getValue()
meta.params.start = 0;
}
},...

mjhaston
17 Nov 2010, 9:41 AM
Works perfectly. Thanks so much.