Académique Documents
Professionnel Documents
Culture Documents
//creamos una instancia del textfield var name = new Ext.form.TextField({ fieldLabel:'Name', name:'txt-name', emptyText:'Your name...', id:"id-name" });
Formulario
//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', //configuracin id:"id-email" } ] });
CheckBox
{
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 }
Grupo de Checkboxes
//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'}
] });
Grupo de Radios
var radios = new Ext.form.RadioGroup({ fieldLabel: 'Favorite Framework', columns: 2, //muestra los radiobuttons en dos columnas items: [ {boxLabel: 'Ext Js', name: 'framework', inputValue: 'Ext js', checked: true}, {boxLabel: 'Dojo', name: 'framework', inputValue: 'Dojo'}, {boxLabel: 'Mootools', name: 'framework', inputValue: 'Mootools'}, {boxLabel: 'jQuery', name: 'framework', inputValue: 'jQUery'}, {boxLabel: 'prototype', name: 'framework', inputValue: 'prototype'}, {boxLabel: 'YIU', name: 'framework', inputValue: 'yui'} ] });
Campo Oculto
{ xtype:'hidden',//<-- campo oculto (hidden) name:'h-type', //el nombre con que se envia al servidor value:'developer'//el valor que contendr }
Ventana
//creamos la ventana que contendr el formulario var win = new Ext.Window({ title: 'New Developer', width:300, height:300, bodyStyle:'background-color:#fff;padding: 10px', items:this.form, //le asignamos el formulario solamente buttonAlign: 'right', //botones alineados a la derecha buttons:[{text:'Save'},{text:'Cancel'}] //botones del formulario }); win.show();
Mensaje
Ext.Msg.show({ title:'Bienvenido', msg: 'Felicidades! Has configurado Ext correctamente! estas emocionado?', buttons: Ext.Msg.YESNOCANCEL, fn: procesarResultado, icon: Ext.MessageBox.QUESTION }); function procesarResultado (btn){ if(btn=='yes'){ Ext.Msg.alert('Resultado','SI estas emocionado!! Excelente!!'); }else{ Ext.Msg.alert('Resultado','NO estas emocionado!! pues nimodos!!'); } }
ToolBar
Ext.onReady(function() { var tbar = { items : [ { text }, '-', { text }, '-', { text }, '->', 'Select one of { xtype width store 'A', 'B', 'C' ] } ] }; new Ext.Window({ width : 500, height : 200, tbar : tbar }).show(); });
: 'Add',
: 'Update',
: 'Delete',
Toolbar
var tb_programacion = new Ext.Toolbar( { renderTo:document.body, items:[ { xtype: 'tbseparator' },{ xtype : 'tbbutton', text : 'Menu Button', menu: [ { text: 'Better'}, { text: 'Good'}, {text: 'Best'} ] },{ xtype : 'buttongroup', columns : 2, title : 'Mantenimiento', items: [ { xtype : 'tbbutton', scale : 'large', text : 'Categoria', iconCls : 'icon_btn_categoria_manto', iconAlign : 'left', tooltip : 'Agregar nueva categoria de mantenimiento', handler : function(){ window.location = "index.php/" + "mant_categ/"; } }, { xtype scale text iconCls 'icon_btn_subcategoria_manto', iconAlign : 'left', tooltip : 'Agregar nueva subcategoria de mantenimiento', handler : function(f){ f.disable(); } } ]},{ xtype },{ xtype: 'tbbutton', text: 'Acerca de' },{ xtype : 'combo', width: 100, store: [ 'A','B','C'] : 'tbfill' : 'tbbutton', : 'large', : 'Sub-Categoria', :
},{ xtype: 'tbseparator' },{ xtype : 'splitbutton', height: 40, scale: 'large', text : 'Reportes', iconCls : 'icon_splitbtn_reportes', iconAlign : 'left', tooltip : 'Generar reportes', menu:{ items:[ { text : 'Reporte del da', iconCls : 'icon_items_menu_reportes', scope : this, //handler : this.Handler_Reportes }, { text : 'Reporte del Mes', iconCls : 'icon_items_menu_reportes', scope : this, handler : function(){ Ext.Msg.Alert('Mensaje','Enviado desde el botn'); } } ] } } ] });
DATA STORE
//De una fuente local var sstoreCombo = new Ext.data.SimpleStore({ fields: ['id', 'amigos'], data : [ ['1','alejandro'], ['2','loko'], ['3','lopez'] ] }); //De una fuente Base de Datos var amigos = new Ext.data.Store({ reader: new Ext.data.JsonReader({ fields: ['id', 'nombre'], root: 'rows' }), proxy: new Ext.data.HttpProxy({ url: 'data/amigos.php' })
}); var categoriesRecord = new Ext.data.Record.create([ {name: 'cad_id', type: 'int'}, {name: 'cad_name', type: 'string'}, {name: 'cad_description', type: 'string'} ]); var categoriesFormReader = new Ext.data.JsonReader( { root : 'data', successProperty : 'success', totalProperty: 'total', id: 'cad_id' },categoriesRecord );