PDA

View Full Version : Problems with multiselect and ajax on a tabbed form



juicymedia
1 Oct 2009, 12:58 AM
Hi,

I'm having problems with a multiselect and a formpanel inside a tabbed layout.

The multiselect loads correctly from the database from the json store and i have an ajax listener that's working but the 2 problems I have are

1) I can't seem to make the getValue() function of the multiselect to return anything eg it loads a company name in to the multiselect and i want to use the value shown as an sql query to populate the form on the right hand side.

2) My ajax call works correctly and loads the right data but it isn't setting the value correctly on clicking. Am i using setvalue incorrectly ?

Heres my code anyhow...

<code>
MyDesktop.UserWindow = Ext.extend(Ext.app.Module, {
id:'user-window',
init : function(){
this.launcher = {
text: 'User Window',
iconCls:'',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('user-window');
if(!win){






var client_store = new Ext.data.Store({
autoLoad: true
, proxy: new Ext.data.HttpProxy( { url: AJAX_URL, method: 'post' } )
, reader: new Ext.data.JsonReader(
{ root: 'results',
totalProperty: 'total'
},
[ { name: 'company_name' } ]
)
, baseParams: { f: 'get_company_name' }
});



var userwin_clientselect = new Ext.ux.form.MultiSelect ({
title: 'Multiselect',
width: 200,
id: 'userwinclientselect',
height: 480,
allowBlank:false,
store: client_store,
displayField: 'company_name'


});


// Panel for the west
var nav = new Ext.Panel({
title: 'Client List',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3',
items:[
userwin_clientselect
//combobox
],

});

var tabs = new Ext.TabPanel({
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
defaults:{autoScroll:true},
deferredRender:false,
layoutOnTabChange:true
});


var clientinfo = new Ext.FormPanel({
labelWidth: 75,
title: 'Contact Info',
frame:true,
//renderTo: tabs,
bodyStyle: 'padding: 5px 5px 0',
defaultType: 'textfield',


items: [
{
fieldLabel:'Client Name',
id: 'company_name'
}
]
});
tabs.add(clientinfo);
tabs.doLayout();


//clientinfo.render(Ext.getCmp('tabs'));


userwin_clientselect.on('click',
function(p)
{
p.disable();
//var selected = Ext.getCmp('userwinclientselect').value ;
//var selected1 = 'spiffy';
//Ext.Msg.alert(selected);
//selected = array.join();
Ext.Ajax.request({
url: AJAX_URL
, params:
{
f: 'get_company_details',
company_name: 'Masterlease'
}
, success: function(r)
{
var hResponse = Ext.util.JSON.decode(r.responseText);
if ( hResponse.success == true )
{
var m = hResponse.results;
//clientinfo.getForm().setValues({comapny_name: 'name'});
Ext.getCmp('company_name').setValue(m.company_name);
//Ext.getCmp('company_number').setValue( m.company_number );
//Ext.getCmp('company_email').setValue( m.company_email );
}
else
{
Ext.Msg.alert( "ERROR: " + hResponse.error ).setIcon( Ext.MessageBox.ERROR );
}
p.enable();
}
, failure: function(r)
{
alert('failed to retrieve vehicle variant details');
}
});

});








win = desktop.createWindow({
id: 'user-window',
title:'User Window',
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
plain:true,
constrainHeader:true,
layout: 'border',
items:
[nav,
tabs
]

});
}
win.show();
}
});
</code>