PDA

View Full Version : combobox not rendering



rich_montana
10 Oct 2009, 4:02 PM
Hi I am having issues w/ my combo box not rendering.

The prototype form is at:

http://www.inspiredware.com/~rich/NewKiosk/HTML/KntOnlineApp.html

If you notice the state doesn't look like a combo box til you start to type of select the input field and press any key. I have my own styling to add padding to the field. Even removing that styling doesn't fix this problem. To me this is something that should just 'happen'. Maybe that is a bad assumption. Anyways any and all help will be very appreciated.

Thanks,
--RICH

rich_montana
10 Oct 2009, 5:03 PM
furthermore as a test i removed every other item from the form and the problem still persisted (and this was w/ deleting my custom css file)

my thoughts:

1) i dont think its related to the css file
2) i wonder if its how the combo behaves within a form panel?

ideas?

THANKS!

10 Oct 2009, 5:04 PM
You're posting in 3.0, this is a 2.x issue.

10 Oct 2009, 5:06 PM
It's so hard to read your code. can you reproduce this in a vanilla page?

rich_montana
10 Oct 2009, 5:13 PM
this page i removed everything but the a combobox: http://www.inspiredware.com/~rich/NewKiosk/HTML/ComboBoxTest.html


here is the code for ComboBoxTest.js:


Ext.onReady(function(){

Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();

bd.createChild({tag: 'h2', html: 'Volunteer Application'});

var form = new Ext.FormPanel({
id: 'form',
labelWidth: 75,
border:false,
width: 650,
items: {
xtype:'tabpanel',
activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:[{
title:'Person Info',
layout:'column',
border:'false',
columnWidth:.5,
defaults: {width: 130},
defaultType: 'textfield',

items: [{
cls: 'online-app-combo',
xtype: 'combo',
store: state_store,
displayField:'state',
id:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true
}]
},{
title:'Facilites',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}, {
title:'Department',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}
]
},
});

var submit = form.addButton({
text: 'Submit',
type: 'submit',
handler: function(){
if(form.form.isValid()){
form.form.submit({
url: applicantSubmitURL,
method: 'POST',
params: {data: getOnlineAppPostXML()},
waitMsg: 'Saving...',
reset: false,
success: function(form,action){ alert('success'); },
failure: function(form,action){ alert('failure'); }
});
} else {
Ext.MessageBox.alert('Errors','Please fix errors noted.');
}
}
});

/* unlink submit so can use form.Action */
form.un("submit", form.onSubmit, form);

/* must call render after buttons are added, ie not in config */
form.render(document.body);
Ext.QuickTips.init();


Ext.form.Action.XMLSubmit = function(form, options){
Ext.form.Action.XMLSubmit.superclass.constructor.call(this,form,options);
};

Ext.extend(Ext.form.Action.XMLSubmit, Ext.form.Action, {
type : 'XMLXubmit',

run : function(){
var o = this.options;
var method = 'GET';
if(o.clientValidation === false || this.form.isValid()){
Ext.Ajax.request(Ext.apply(this.createCallback(), {
url: applicantSubmitURL,
method: method,
waitMsg: 'Saving...',
params: getOnlineAppPostXML()
}));
}else if (o.clientValidation !== false){
this.failureType = Ext.form.Action.CLIENT_INVALID;
this.form.afterAction(this, false);
}
}


});
Ext.form.Action.ACTION_TYPES.XMLSubmit = Ext.form.Action.XMLSubmit;

function getOnlineAppPostXML() {
var sorXML = "<?xml version='1.0' encoding='UTF-8'?>";
// sorXML += "<Name_First>" + Ext.get('firstname') + "</Name_First>";
sorXML += "<Name_First>" + form.getForm().findField('firstname').value + "</Name_First>";
sorXML += "<Name_Last>" + form.getForm().findField('lastname').value + "</Name_Last>";
sorXML += "<Name_Prefix>" + form.getForm().findField('prefix').value + "</Name_Prefix>";
sorXML += "<Name_Suffix>" + form.getForm().findField('suffix').value + "</Name_Suffix>";
sorXML += "<HomePhone>" + form.getForm().findField('home_phone').value + "</HomePhone>";
sorXML += "<WorkPhone>" + form.getForm().findField('work_phone').value + "</WorkPhone>";
sorXML += "<MobilePhone>" + form.getForm().findField('mobile_phone').value + "</MobilePhone>";
sorXML += "<BirthDate>" + form.getForm().findField('birthdate').value + "</BirthDate>";
sorXML += "<EmailAddress>" + form.getForm().findField('email').value + "</EmailAddress>";
sorXML += "<ConfirmationEmail>" + form.getForm().findField('email_verification').value + "</ConfirmationEmail>";
sorXML += "<SocialSecurityNumber>" + form.getForm().findField('ssn').value + "</SocialSecurityNumber>";
sorXML += "<Gender>" + form.getForm().findField('gender').value + "</Gender>";
sorXML += "<DriverLicenseState>" + form.getForm().findField('dl_state').value + "</DriverLicenseState>";
sorXML += "<DriverLicenseNumber>" + form.getForm().findField('dl_number').value + "</DriverLicenseNumber>";
sorXML += "<CriminalConviction>" + form.getForm().findField('criminal').value + "</CriminalConviction>";
sorXML += "<VolunteerType>" + form.getForm().findField('volunteer_type').value + "</VolunteerType>";
alert(sorXML);
return sorXML;
}

});

footballermahesh
13 Oct 2009, 3:32 AM
Please Try This


items: [{
cls: 'online-app-combo',
xtype: 'combo',
store: state_store,
displayField:'state',
id:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true
}]
//THE ABOVE CODE I REARRANGED IN TO:-

var mystate = new Ext.form.ComboBox({

store: state_store,
fieldLabel:'state',
displayField:'state',
forceSelection:true,
valueField:'state',
typeAhead: true,
anchor:'90%',
mode: 'local',
minChars:0,
triggerAction: 'all',
emptyText:'Purpose'
});

items: [mystate]

Try like this i think it will WORK....

13 Oct 2009, 3:39 AM
All that matters is the anchor:'90%', change.

rich_montana
13 Oct 2009, 7:05 AM
i made the changes in my comboboxtest js file and this had no affect.

i first juct added the anchor: '90%' change... and when that didn't work created a variable that was a Ext.form.Combobox and set that in the items. neither had affect.

could it be some styling stuff inherited from the tabs panel (taking a shot in the dark) ? Also note i removed the styling from the comboboxtest and this too had no affect.

rich_montana
14 Oct 2009, 8:49 PM
what's interesting is that if you look at the source in firebug. you can see the image. and it will lighten up in the screen but its like its hidden for some reason. also too the offset of the states is odd to me too.

thoughts?