Tabpanel assign item dynamically HELP!

[wilfredor]

My Tab definition

Ext.onReady(function(){
// basic tabs 1, built from existing content
// second tabs built from JS
var tabs2 = new Ext.TabPanel({
renderTo: 'container',
activeTab: 0,
width:'70%',
height:200,
plain:true,
defaults:{autoScroll: true},

enableTabScroll : true,
animScroll: true,
layoutOnTabChange: true,

items:[{
title: 'Tab 1',
html: "Content o my tab"
},{
title: 'Formulario',
nocache: true,
text: "Loading...",
timeout: 10,
autoLoad: {url: 'myform.js',scripts: true}
}
]
});

// If I add "tabs2.get(1).add(formulario);" here, Firebug show :::-formulario is not defined-:::

}); myform.js



<script language="javascript">


/*** parametros para pintar el formulario*************/
var formulario = new Ext.FormPanel({
labelAlign: 'top',
title: 'Datos del Empleado',
bodyStyle:'padding:10px;',
id:'formulario',
layout: 'form',
width: '70%',
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Nombre',
id: 'nombre',
name: 'nombre',
anchor:'95%',
allowBlank:false

}, {
xtype:'textfield',
fieldLabel: 'Direcci&oacute;n',
id: 'direccion',
name: 'direccion',
anchor:'95%',
allowBlank:false

}

]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Ciudad',
id: 'ciudad',
anchor:'95%',
allowBlank:false
},{
xtype:'textfield',
fieldLabel: 'Estado',
id: 'estado',
anchor:'95%',
allowBlank:false
}

]
}]
}],

buttons: [{
text: 'Guardar',
},{
text: 'Cancelar',

}]
});

/********* Render de objetos **********/
tabs2.get(1).add(formulario); // Here's the problem Firebug Show :::-tabs2 is not defined-:::

});
</script>

[Animal]

Why did you use autoLoad to pull in a file instead of just using the code?

[pdegit]

Reason for the error is of course tabs2 is scoped to the anonymous function supplied to Ext.onReady...

[Lukman]

Reason for the error is of course tabs2 is scoped to the anonymous function supplied to Ext.onReady...
Ah you are right. I totally missed that. But surely you should elaborate more on it since I don't think the OP is familiar with the scoping concept in javascript ;)

[wilfredor]

Why did you use autoLoad to pull in a file instead of just using the code?

I only want to load the necessary code for that tab and not all the code for all tabs

[[email protected]]

PLEASE STOP double posting. you already have an active thread

[[email protected]]

Why did you use autoLoad to pull in a file instead of just using the code?

I personally don't know why developers use autoLoad in this way. Out of my years with Ext JS already, i have *never* done this. I don't know why people do... i really don't...

[wilfredor]

I personally don't know why developers use autoLoad in this way. Out of my years with Ext JS already, i have *never* done this. I don't know why people do... i really don't...

Because it is thought to load the necessary javascript only, ie, hope that the javascript is loaded to be used only for this tab

[[email protected]]

did you read the API?

[wilfredor]

I find the Ext.ux.Plugin.RemoteComponent.js for load remote form by json. That work fine, but the fieldtext label show a bad padding 105, like that


<div style="padding-left: 105px;" id="x-form-el-nombre" class="x-form-element">
<input type="text" name="nombre" id="nombre" autocomplete="off" size="20" class=" x-form-text x-form-field" style="width: 159px;"/>
</div>