PDA

View Full Version : [2.0b1][CLOSED] checkbox json style definition different



cutigersfan
27 Oct 2007, 4:56 PM
Here are the exact same definition for a checkbox. However they are declared differently. Shouldn't they have the same result though?

You'll notice, 1) position of the checkbox, 2) check listener doesn't fire on one.


EditDialog = function(config){
Ext.MessageBox.wait('Opening dialog...');
var chk2 = new Ext.form.Checkbox ({
boxLabel:' '
,dataIndex: 'lead2'
,fieldLabel:'Lead2'
,id: 'chkLead2'
,inputType: 'checkbox'
,listeners:{
check:this.onLeadClicked,
scope:this
}
,name: 'lead2'
});
/////////////////////////////////////////
// Define form ////
/////////////////////////////////////////
this.form = new Ext.FormPanel({
labelWidth: 75,
border:false,
width: 350,
buttonAlign:'right',
items: {
xtype:'tabpanel',
activeTab: 0,
border:false,
// deferredRender:false,
defaults:{autoHeight:true,
bodyStyle:'padding:10px',
deferredRender:false,
labelWidth:85,
labelAlign:'right',
layout: 'form'},
listeners: {
'tabchange': this.onTabChange,
scope:this
},
items:[{
title:'Contact',
defaults: {allowBlank:false,
width: 230,
validateOnBlur:true,
readOnly:false},
defaultType: 'textfield',
items: [{ // fields
fieldLabel: 'First Name',
inputType: 'text',
minLength: 2,
name: 'firstName',
selectOnFocus:true
}, {
fieldLabel: 'Last Name',
inputType: 'text',
minLength: 2,
name: 'lastName'
}]
},{
title:'Class',
defaults: {width: 230,
readOnly:false},
defaultType: 'textfield',
items: [{
boxLabel:' '
,dataIndex: 'lead'
,fieldLabel:'Lead'
,id: 'chkLead'
,inputType: 'checkbox'
,listeners:{
check:this.onLeadClicked,
scope:this
}
,name: 'lead'
},chk2
]
}]
},

buttons: [{
handler: function (){
// submit now... all the form information are submit to the server
// handle response after that...

if (this.form.form.isDirty()){
if (this.form.form.isValid()) {
Ext.MessageBox.alert('Submit', 'This will eventually submit');
this.hide();
}else{
Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
}else{
this.hide();
}
},
text: 'Save',
scope:this
},{
text: 'Cancel',
handler: function () {this.hide();},
scope: this
}]
});


/////////////////////////////////////////
// Set config defaults ////
/////////////////////////////////////////
config.items = [this.form];
config.height = 355;
config.width = 380;
config.resizable = false;
config.closable = true;
config.closeAction = 'hide';
config.layout = 'fit';
config.modal = true;
EditDialog.superclass.constructor.call(this, config);

Ext.MessageBox.hide();

}

Ext.extend(EditDialog, Ext.Window, {
onLeadClicked:function(){
Ext.MessageBox.alert('Alert', 'Lead Checkbox checked');
},
onTabChange:function(tp, tab){
// Ext.MessageBox.alert('Alert', 'Tabs were changed');

}
});


Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new EditDialog({});
}
win.show(this);
});
});

Animal
27 Oct 2007, 11:37 PM
The second one will just create a TextField because it doesn't have an explicit xtype.

Then because you have specified the inputType config, its adds that type.

The object instantiated is still a TextField though, and does not have a check event.

cutigersfan
29 Oct 2007, 10:38 AM
The xtype config did it. I'd been pulling my hair out on this for 3 days....