PDA

View Full Version : Problem with Database driven Combobox



stardust2k
16 Jun 2009, 8:01 AM
hey folks,

i trying around with extjs the last time. now as the application become bigger i started to put some things in seperated files and use customized components. in the following i have a form panel with 4 fieldsets and within 2 comboboxes which "should" load data from a database. in my first version i defined the stores seperatly from the form. and now i tryied to write it into the components config.

unfortunatly now doesn't work anymore. the arrow of the combox where shown on the left side of the field and not on the right where it should be. autocomplet doesn't work anymore and when i write in the form field and clicking with the mouse in it a strange list with my data occures. the store loads correct and the data is well formed json.

maybe someone has the time to look over my code. i appreciate any kind of tips hints and critics

thx


PhotographerForm = Ext.extend(Ext.form.FormPanel, {
url: 'form_insert.php',
frame: true,
border: false,
width: 300,
buttonAlign: 'right',
initComponent:function(){
var config = {
items:[{
xtype: 'fieldset',
id: 'persondata',
collapsible: true,
title: 'Personendaten',
items:[{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
allowBlank: false,
vtype: 'alpha'
},{
xtype: 'textfield',
fieldLabel: 'Vorname',
name: 'prename',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'Firma',
name: 'company',
allowBlank: true
},{
xtype: 'textfield',
fieldLabel: 'Benutzernamer',
name: 'username',
allowBlank: false
}]
},{
xtype: 'fieldset',
id: 'adressdata',
collapsible: true,
collapsed: true,
title: 'Adressdaten',
items: [{
xtype: 'textfield',
fieldLabel: 'Strasse, Nr',
name: 'adr_street',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'Ort',
name: 'adr_town',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'PLZ',
name: 'adr_zip',
allowBlank: false
},{
xtype: 'combo',
id: 'country',
fieldLabel: 'Land',
name: 'adr_country',
mode: 'local',
store: new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['country_id','country_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'reader/simple-stores-reader.php'
}),
baseParams:{datasource: 'countries'}
}),
displayField: 'country_name',
width: 120,
allowBlank: false
}]
},{
xtype: 'fieldset',
collapsible: true,
collapsed: true,
title: 'Kontaktdaten',
id: 'contactdata',
items: [{
xtype: 'textfield',
fieldLabel: 'Telefon',
name: 'contact_fon',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'Telefax',
name: 'contact_fax',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'Mobiltelefon',
name: 'contact_mobil',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'email',
name: 'contact_email',
allowBlank: false
}]
},{
xtype: 'fieldset',
collapsible: true,
collapsed: true,
title: 'Benutzerdaten',
id: 'userdata',
items: [{
xtype: 'checkbox',
fieldLabel: 'aktiv',
name: 'usr_activ'
},{
xtype: 'datefield',
fieldLabel: 'gültig von',
id: 'from_date',
name: 'from_date',
vtype: 'daterange',
format: 'Y-m-d',
endDateField: 'to_date'
},{
xtype: 'datefield',
fieldLabel: 'gültig bis',
id: 'to_date',
name: 'to_date',
vtype: 'daterange',
format: 'Y-m-d',
startDateField: 'from_date'
},{
xtype: 'combo',
id: 'channel',
fieldLabel: 'Kanal',
name: 'channel',
store: new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['channel_id','channel_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'reader/simple-stores-reader.php',
}),
baseParams:{datasource: 'channels'}
}),
displayField: 'channel_name',
width: 120,
allowBlank: false

}]
}]
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

PhotographerForm.superclass.initComponent.apply(this, arguments);
}, // eo function initComponent

onRender:function() {
this.items.get('userdata').items.get('channel').store.load();
this.items.get('adressdata').items.get('country').store.load();

this.items.get('persondata').addListener('expand', function() {
this.items.get('contactdata').collapse();
this.items.get('adressdata').collapse();
this.items.get('userdata').collapse();
}, this)
this.items.get('contactdata').addListener('expand', function() {
this.items.get('persondata').collapse();
this.items.get('adressdata').collapse();
this.items.get('userdata').collapse();
}, this)
this.items.get('adressdata').addListener('expand', function() {
this.items.get('persondata').collapse();
this.items.get('contactdata').collapse();
this.items.get('userdata').collapse();
}, this)
this.items.get('userdata').addListener('expand', function() {
this.items.get('persondata').collapse();
this.items.get('contactdata').collapse();
this.items.get('adressdata').collapse();
}, this)
PhotographerForm.superclass.onRender.apply(this, arguments);
} // eo function onRender
});

Ext.reg('photographerForm', PhotographerForm);

stardust2k
18 Jun 2009, 2:06 AM
am i that wrong that noone wants to help me?? i added a small screen to illustrate my problem thanks guys

conorarmstrong
18 Jun 2009, 2:12 AM
Why are you extending a FormPanel? Completely unnecessary in my opinion unless you were adding some additional functionality which you are not.

The button on the left of the combo box was an issue with an earlier RC of v3.0 I believe it in now fixed in the latest version. What version are you using?

stardust2k
18 Jun 2009, 2:55 AM
im using ext 3.0 dont really know what subversion if there is any. the problem is that using the same code in the main application works perfectly fine, at least the way it is dsiplayed.

yeah i think to that extending is not the proper way to do it, cause im just looking for a possibility the brake the application in logical parts for multiple reuse.

is there another way to split an application? can i just copie parts of the code to other files an include them in the html header?

thanks for your answer

conorarmstrong
18 Jun 2009, 3:30 AM
try rc2 and see if the problem persists.

although there's more than one way to do it you could create a file containing the following:



photographerForm=function(){
var private1=......
var private2=......

var form=new Ext.FormPanel({
url: 'form_insert.php',
frame: true,
border: false,
width: 300,
// etc....
//......
});

return form;

}


then include that file in your html and whenever you need it just make a call to photographerForm()

All the extend stuff creates a massive overhead and is unnecessary.

stardust2k
18 Jun 2009, 3:40 AM
do i have to call it with new photographerForm or can i use photgrapherForm directly?

conorarmstrong
18 Jun 2009, 4:26 AM
no its just a normal function - not a class. call it without the new keyword.

you could for example include the function call in the items config object of it's container as follows:



abc=new Ext.xyz({
config1: value1
,config2: value2
,// etc
,items: [{
xtype: 'component1'
,config3: value3
},
photographerForm()
,{
xtype: 'component2'
,config4: value4
}]
});


If you need to pass parameters into it that's okay too.

stardust2k
18 Jun 2009, 4:48 AM
thank you so much. lot to learn i think.