Form Field label rendering many times?

[jonnerd154]

Hi guys. I have a problem that has manifested itself twice in my app so far and I can't figure it out. I'm sure it's a simple mistake I've made.

I have this:



clientsLiveGrid.on('rowclick', function(grid, rowIndex, e){
var record = grid.getStore().getAt(rowIndex); // Get the Record
var clientId = record.get("u_id");
var win = null;
var form = null;

// We have a window open...close it, then destroy it.
if(clientsWin){
clientsWin.hide();

clientsWin = null;
}

clientsWin = new Ext.Window({
layout:'fit',
title: 'Client Detail: ' + record.get('first_name') + ' ' + record.get('last_name'),
width:500,
height:300,
closeAction:'hide',
plain: true,
modal: true,
items: new Ext.FormPanel({
labelWidth: 75,
border:false,
width: 350,
id: 'clientEditForm',
url : 'data/commit/clients.php',
items: {
xtype:'tabpanel',
activeTab: 0,
defaults:{bodyStyle:'padding:10px'},
items:[{
height: 202,
title:'General',
layout:'form',
cls: "blackText",
defaults: {width: 230, itemCls: 'form-label'},
defaultType: 'textfield',

items: [{
fieldLabel: 'Prefix',
name: 'title',
value: record.get('title')
},{
fieldLabel: 'First Name',
name: 'first_name',
allowBlank:false,
value: record.get('first_name')
},{
fieldLabel: 'Last Name',
name: 'last_name',
allowBlank:false,
value: record.get('last_name')
},{
fieldLabel: 'Member ?',
xtype: 'checkbox',
boxLabel: '',
name: 'member',
inputValue: 1,
id: 'memberCheck',
itemId: 'memberCheck',
labelSeparator: '',
},{
fieldLabel: 'VIP ?',
xtype: 'checkbox',
boxLabel: '',
name: 'vip',
inputValue: 1,
id: 'vipCheck',
itemId: 'vipCheck',
labelSeparator: '',

},{
xtype:'hidden',
name:'u_id',
value: record.get('u_id')
}]
},{
title:'Contact Info',
layout:'form',
defaults: {width: 230, itemCls: 'form-label'},
defaultType: 'textfield',



{ .... }Some times everything looks great:

19914


BUT sometimes it looks like this:

19913

Any idea what might be causing this? I searched Google and the forum search here to no avail. Thank you to anyone with some insight!

[Gharok]

Try removing these lines:


id: 'memberCheck',


id: 'vipCheck',

Greetings
Gharok

[jonnerd154]

Try removing these lines:


id: 'memberCheck',

id: 'vipCheck',Greetings
Gharok


Thank you! That fixed the original problem!

BUT. I need to set the default state of the checkboxes. (The window in question is an edit window that opens after a row in a Grid is clicked). So far I have been accomplishing that with the code below. How would you suggest I do this without the id attribute defined?

Thanks again!




...

if (record.get('vip') == 1){
Ext.getCmp('vipCheck').checked = true;
}
if (record.get('golf_club') == 1){
Ext.getCmp('memberCheck').checked = true;
}

clientsWin.show(this);

[Gharok]

The itemid is different in usage as id. With itemid you have to use the getComponent Method. You have to read the api in this case.

http://www.extjs.com/deploy/dev/docs/source/Component.html#cfg-Ext.Component-itemId

You can try something like this:

clientsWin = new Ext.Window({
layout:'fit',
title: 'Client Detail: ' + record.get('first_name') + ' ' + record.get('last_name'),
width:500,
height:300,
closeAction:'hide',
plain: true,
modal: true,
items: new Ext.FormPanel({
labelWidth: 75,
border:false,
width: 350,
itemId: 'clientEditForm',
url : 'data/commit/clients.php',
items: {
itemId: 'tabpanel',
xtype:'tabpanel',
activeTab: 0,
defaults:{bodyStyle:'padding:10px'},
items:[{
itemId: 'general',
height: 202,
title:'General',
layout:'form',
cls: "blackText",
defaults: {width: 230, itemCls: 'form-label'},
defaultType: 'textfield',

items: [{
fieldLabel: 'Prefix',
name: 'title',
value: record.get('title')
},{
fieldLabel: 'First Name',
name: 'first_name',
allowBlank:false,
value: record.get('first_name')
},{
fieldLabel: 'Last Name',
name: 'last_name',
allowBlank:false,
value: record.get('last_name')
},{
fieldLabel: 'Member ?',
xtype: 'checkbox',
boxLabel: '',
name: 'member',
inputValue: 1,
id: 'memberCheck',
itemId: 'memberCheck',
labelSeparator: '',
},{
fieldLabel: 'VIP ?',
xtype: 'checkbox',
boxLabel: '',
name: 'vip',
inputValue: 1,
itemId: 'vipCheck',
labelSeparator: '',

},{
xtype:'hidden',
name:'u_id',
value: record.get('u_id')
}]
},{
title:'Contact Info',
layout:'form',
defaults: {width: 230, itemCls: 'form-label'},
defaultType: 'textfield',



{ .... }


if (record.get('vip') == 1){
clientsWin.getComponent('clientEditForm').getComponent('tabpanel).getComponent('general').getComponent('vipCheck').checked = true;
}Greetings
Gharok

[jonnerd154]

AWESOME. That works really well. Thank you!