PDA

View Full Version : Combo Box, remote - What did i miss



trasherdk
28 Sep 2009, 5:13 AM
Hi all

I'm stuck (again). This time on a form combo box loading items from server.

Load event fires, and returned data look correct to me, but nothing show
in the combo box. Typing some chars in the box fires load again, as expected,
and again the returned data seem to be OK.

I just can't figure out what it is i'm missing.

Any clues, anybody?


Here's the data returned from server:



{
success: true
, total: 2
, results: [
{"prodid":"2","short":"L\u00e6rling","data":"L\u00e6rling v\u00e6rksteds timer","price":"250.00"}
,{"prodid":"1","short":"Mekaniker","data":"Mekaniker v\u00e6rksteds timer","price":"450.00"}
]
, errors: { reason: 'Data Retrieved OK'}
}


And definition of combo box:



Ext.ux.ProdStore = Ext.extend( Ext.data.JsonStore, {

constructor: function(config){

Ext.ux.ProdStore.superclass.constructor.call(this, Ext.apply({
id: 'prodstore1'
,url: 'php/product.php'
,baseParams: {
datatype: 'product'
,task: 'product-list'
}
,reader : new Ext.data.JsonReader(
{
root:'results'
,totalProperty:'total'
,successProperty:'success'
}
,[
{name: 'prodid', type:'int', mapping: 'prodid'}
,{name: 'short', type:'string', mapping: 'short'}
,{name: 'detail', type:'string', mapping: 'data'}
,{name: 'price', type:'float', mapping: 'price'}
]
)
}, config ));
}
});

Ext.ux.ProdCombo = Ext.extend( Ext.form.ComboBox, {

constructor: function(config){

Ext.ux.ProdCombo.superclass.constructor.call(this, Ext.apply({
id: 'prodcombo'
,typeAhead: true
,triggerAction: 'all'
,lazyRender:true
,mode: 'remote'
,store: new Ext.ux.ProdStore
,valueField: 'prodid'
,displayField: 'short'
,emptyText: 'Select product'
,minChars: 2
}, config));
}
});


And the form:



Ext.ux.wsCustForm = Ext.extend( Ext.FormPanel, {

constructor: function(config){

Ext.ux.wsCustForm.superclass.constructor.call(this, Ext.apply({
id: 'worksheet-customer'
,title: 'Customer'
// ,x: 10
// ,y: 10
,width: 300
,height: 150
,frame: true
,border: false
,url:'php/worksheet.php'
,baseParams: {
task: 'ws-customer-get'
,datatype: 'customer'
}
,reader : new Ext.data.JsonReader({
root:'results',
totalProperty:'total',
successProperty:'success'
}, [
{name: 'id', type:'int', mapping: 'id'}
,{name: 'name', type:'string', mapping: 'name'}
,{name: 'phone', type:'string', mapping: 'phone'}
,{name: 'mobile', type:'string', mapping: 'mobile'}
,{name: 'email', type:'string', mapping: 'email'}
,{name: 'prodid', type:'int', mapping: 'prodid'}
])
,labelWidth: 75
,defaults: {width: 200, readOnly: true}
,defaultType: 'textfield'
,items: [{
fieldLabel: 'Customer ID'
,name: 'id'
,type: 'int'
,hidden: true
,hideLabel: true
},{
fieldLabel: 'Navn'
,name: 'name'
,maxLength: 45
},{
fieldLabel: 'Telefon'
,name: 'phone'
,maxLength: 45
},{
fieldLabel: 'Mobil'
,name: 'mobile'
,maxLength: 45
},{
fieldLabel: 'E-mail'
,name: 'email'
,vtype: 'email'
,maxLength: 45
}, new Ext.ux.ProdCombo({
fieldLabel: 'Produkt'
,name: 'prodid'
})
]
}, config ));
}
});


And last, relevant code from the panel it's used in:



,items: [
new Ext.ux.wsCustForm({x:10, y:10, height: 200, defaults:{width: '95%', readOnly: false}})
,new Ext.ux.wsCarForm({x:320, y:10, defaults:{width: '95%', readOnly: true}})
]


Regards
Mogens

28 Sep 2009, 5:26 AM
Why are you applying a static ID to classes that are designed to have more than once instance of created? If you do not plan on instantiating more than one instance, then create a factory method to produce the combo for you.

28 Sep 2009, 5:27 AM
this line:

,store: new Ext.ux.ProdStore

needs to be:

,store: new Ext.ux.ProdStore()

trasherdk
28 Sep 2009, 6:17 AM
I know, you are right about the id.

Under normal circumstances i would instantiate it by issuing a:



new Ext.ux.wsCustForm({id:'worksheet-custform-number', x:10, y:10, height: 200, defaults:{width: '95%', readOnly: false}})


Where number is the record id identifying form data,
and giving it a unique id, describing the context it used in.

But in this case i'm just trying top get the component to work in a test :)

Thanks

Mogens

trasherdk
28 Sep 2009, 6:24 AM
Hmm, that's not it.



this line:

,store: new Ext.ux.ProdStore

needs to be:

,store: new Ext.ux.ProdStore()


Changing to:



,store: new Ext.ux.ProdStore()


or



,store: new Ext.ux.ProdStore({id: 'ws-custform-product'})


Didn't change anything.

Do i need a renderer, or something like that?

Regards
Mogens