<head>
<link rel="stylesheet" type="text/css"
href="js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/extjs/ext-all.js"></script>
<script>
Ext.ns("sistema");
sistema.LinkedComboBoxTutorial = {
init: function(){
var empresasStore = this.getStore();
var municipiosStore = new Ext.data.JsonStore({
autoLoad: true,
url: 'datosEmpresas.php',
baseParams:{ accion: 2 },
root: 'datos',
totalProperty: 'total',
fields: [
{name:'value', type: 'string'},
{name:'label', type: 'string'},
]
});
var comboMunicipio =new Ext.form.ComboBox({
fieldLabel: 'Municipio',
name: 'comboMunicipio',
forceSelection: true,
store: municipiosStore,
emptyText: 'Selecciona un Municipio...',
triggerAction: 'all',
displayField: 'label',
valueField: 'value',
mode: 'local',
//hideTrigger:true,
editable: false
//minChars:3
});
var comboEmpresas = new Ext.form.ComboBox({
fieldLabel: 'Empresas',
name: 'comboEmpresas',
forceSelection: true,
store : empresasStore,
emptyText: 'Seleccionar una empresa',
triggerAction: 'all',
editable: false,
displayField: 'EMPRESA',
valueField: 'CVE_EMPRESA',
width: 500,
disabled: true,
mode: 'local'
});
comboMunicipio.on('select',function(cmb,record,index){
comboEmpresas.clearValue();
comboEmpresas.enable();
empresasStore.load({
params:{
accion: 1,
municipio:record.get('value')
}
});
},this);
var panel1 = new Ext.FormPanel({
url: 'datosEmpresas.php',
title: 'Seleccione Filtros',
items: [comboMunicipio, comboEmpresas],
region: 'south',
//layout: 'form',
height: 150,
buttons: [ {text: 'Buscar',
handler: function(){
panel1.getForm().submit();
}
} ]
//iconCls: 'users'
});
var panel2 = new Ext.Panel({
region: 'center'
});
/**
* PANEL PRINCIPAL
*/
var main = new Ext.Panel({
title: 'Banco de Datos',
height:600,
layout: 'border',
defaults: {
//collapsible:true,
border: true,
bodyStyle: 'padding:10px;',
//titleCollapse: true,
},
items: [panel1,panel2]//,panel3]
});
main.render('panel');
/*
panel1.load({
url: 'panel.php',
method: 'GET',
params: {data:'users'}
});
panel2.load({
url: 'panel.php',
method: 'GET',
params: {data:'report'}
});
panel3.load({
url: 'panel.php',
method: 'GET',
params: {data:'documents'}
});
*/
//creamos una instancia del textfield
var name = new Ext.form.TextField({
fieldLabel:'Name',
name:'txt-name',
emptyText:'Your name...',
id:"id-name"
});
//creamos un grupo de checkboxes
var checkboxes = new Ext.form.CheckboxGroup({
fieldLabel:'Interests',
columns:2,//mostrar dos columnas de checkboxes
items:[
{boxLabel: 'JavaScript', name: 'cb-js', checked: true}, //campo marcado desde el principio
{boxLabel: 'HTML', name: 'cb-html'},
{boxLabel: 'CSS', name: 'cb-css'},
{boxLabel: 'Otros', name: 'cb-otros'}
]
});
//creamos un formulario
this.form= new Ext.FormPanel({
title:'New Developer',
//renderTo: 'frame',
defaults:{xtype:'textfield'}, //componente por defecto del formulario
bodyStyle:'padding: 10px', //alejamos los componentes del formulario de los bordes
items:[
name, // le asignamos la instancia que creamos anteriormente
{
fieldLabel:'Email', // creamos un campo
name:'txt-email', // a partir de una
value:'default@quizzpot.com', //configuración
id:"id-email"
},
{
xtype: 'checkbox', //definimos el tipo de componente
fieldLabel: 'Active',// le asignamos un label
name: 'chk-active', //y un "name" para que lo recojamos en el servidor...
id: 'id-active'// ...cuando el formulario sea enviado
},
checkboxes
]
});
},
getStore: function(){
var store = new Ext.data.JsonStore({
url:'datosEmpresas.php',
root:'datos',
fields: ['CVE_EMPRESA','EMPRESA']
});
return store;
}
}
Ext.onReady(sistema.LinkedComboBoxTutorial.init,
sistema.LinkedComboBoxTutorial);
</script>
</head>
<body>
<div id="panel"></div>
<div id="frame"></div>
</body>
