<?
//CREAR fORMULARIO

///CREAR COMBO
///DATOS DEL COMBO
var store = new Ext.data.ArrayStore({
        
fields: ['val''eti','tip'],
        
data : [{'VAL1','ETIQUETA1','TOOLTIP1'},..........]
    });
//EL COMBO
combo=new Ext.form.ComboBox({
             
x60,// POSISION X
             
y0,// POSISION X
             
tpl'<tpl for="."><div ext:qtip="{tip}" class="x-combo-list-item">{eti}</div></tpl>',
            
storestore,//LOS DATOS
            
valueField:'val',
            
displayField:'eti',
            
typeAheadtrue,
            
mode'local',
            
name'entorno',
            
triggerAction'all',
            
emptyText:'SELECCIONE ALGO',//TEXTO AL ESTA VACIO
            
selectOnFocus:true
});
combo.setValue('1');    //VALOR POR DEFECTO

//EL FORMULARIO
    
var form = new Ext.form.FormPanel({
        
baseCls'x-plain',
        
region:'center',//SI VA A ESTAR CONTENIDO EN UN PANEL BORDER
        
margins:'5 5 5 0',
        
layout:'absolute',
        
url:'A UNA PAGINA.PHP',//DONDE VA A MANDAR LOS DATOS
        
defaultType'textfield',//TIPO DE DATO OR DEFECTO
        
standardSubmit:true,// SI NO VA A MANDAR POR AJAX DEBE ESTAR EN TRUE
        /*
        
        XTYPE       OBJETO
        label        etiqueta
        textfield    caja de texto (con inputType:'password' es para los campos de contraseña )
        textarea    textareax
        radiobutton    radio
        chekbox        chekbox
        */
        
items: [
                
/*  { atributo:valor,.....} */
        
{
            
x0,
            
y5,
            
xtype:'label'// ETIQUETA DE UN OBJETO DE FORMULARIO
            
text'UNA CAJA:'
        
}, combo,
        {
            
x0,
            
y35,
            
xtype:'label',
            
text'VVVVVV:'
        
},{
            
x60,
            
y30,
            
name'NNNN',
            
id'NNNN',
            
anchor:'100%'  // anchor width by percentage
        
},{
            
x0,
            
y65,
            
xtype:'label',
            
text'Contraseña:'
        
},{
            
x60,
            
y60,
            
name'con',
            
inputType:'password',
            
anchor'100%'  // anchor width by percentage
        
}
        
        
        ],
        
buttons: [{
            
text'Guardar',
            
handler: function(){
                
form.getForm().submit();
            }
        },{
            
text'Limpiar',
            
handler: function(){
                
form.getForm().reset();
            }
        }]
    });
    
    
    
    
///////////////////////////////////////////////////////
//    un grd de solo lectura
    
     // create the data store
    
    
var store = new Ext.data.ArrayStore({
        
fields: [{name:'id_columa1'},{name:'id_columa2'}........]
    });

    
// manually load local data
    
store.loadData([
                    {
id_columa1:'dato1',id_columa2:'dato2....'},
                    .
                    .
                    .
                    ]);

    
// create the Grid
    
var grid = new Ext.grid.GridPanel({
        
storestore,
        
columns: [
                  {
id:'id',header:'titulo';dataIndex:'id_columna1',width:20 },
                  .
                  .
                  .
                  
                  ],
        
stripeRowstrue,
        
height350,
        
width600,
        
title'Array Grid',
        
// config options for stateful behavior
        
statefultrue,
        
stateId'grid'        
    
});
    
    
    
    
/////////////////////////////////////////////////////7///
//un grid editable


var fm Ext.form;
var 
cm = new Ext.grid.ColumnModel(
    {
defaults: {sortabletrue // columnas pueden ordenarse        
                
},
     
columns: [
                {  
id'id',  header'Id'dataIndex'id'width40    },
                {  
id'desc',header'Descripcion'dataIndex'descripcion',width120,
                   
editor: new fm.TextArea({allowBlankfalse})
                   },
                {  
id'mod'header'Módulo',    dataIndex'modulo',width40,
                    
renderer: function(value){ return value value.dateFormat('M d, Y'); },///formater campos de fecha  !!pasar al general .js
                    ///definir en una variable los formatos
                     
editor: new fm.DAteField({allowBlankfalse,format:'Y-m-d'})    },
                {  
id'q'header'SQL',    dataIndex'sql',    
                    
editor:  new fm.TextArea({allowBlankfalse})}
            ]
    });    
var 
reader = new Ext.data.JsonReader({
                    
totalProperty'total',
                    
successProperty'success',
                    
idProperty'id',
                    
root'data',
                    
messageProperty'message'},
                    
// use an Array of field definition objects to implicitly create a Record constructor
                    
[
                        {
name'id'},
                        {
name'descripcion' },
                        {
name'modulo'},
                        {
name'sql'}
                    ]);
        
var 
writer = new Ext.data.JsonWriter({
                        
encodefalse,
                        
writeAllFieldsfalse
                    
});
var 
store = new Ext.data.Store({
                        
// destroy the store if the grid is destroyed
                        
autoDestroytrue,
                        
proxy:new Ext.data.HttpProxy({
                            
api:{
                                
read:{url:$view_js+'pagina_l?accion=lista'},
                                
create:{url:$view_js+'pagina_l?accion=add'},
                                
update:{url:$view_js+'pagina_l?accion=mod'},
                                
destroy:{url:$view_js+'pagina_l?accion=del'}
                            }
                        }),    
                        
autoSavefalse,
                        
readerreader,
                        
writer:writer
                        
                    
});                        
                            
 var 
paginador=getPaginador(50,store);
  var 
grid = new Ext.grid.EditorGridPanel({
                        
id:'grid_comp_11',
                        
storestore,
                        
cmcm,
                        
width600,
                        
frametrue,
                        
// specify the check column plugin on the grid so the plugin is initialized
                        
loadMask: {msg:'Cargando..'},
                        
autoExpandColumn 'q',
                        
tbar: [{
                            
text'Agregar',
                            
iconCls'icon-add',
                            
handler : function(){
                                
// access the Record constructor through the grid's store
                                
var Prop grid.getStore().recordType;
                                var 
= new Prop({
                                    
descripcion'Aqui la descripcion',
                                    
sqlq'Aqui la SQL',
                                    
modulo'Aqui aqui el modulo/opcion.php donde se utiliza'
                                
});
                                
grid.stopEditing();
                                
store.insert(0p);
                                
grid.startEditing(00);
                            }
                        },{
                            
text'Eliminar ',
                            
iconCls'icon-delete',
                            
handler : function(btnev) {
                                    var 
index grid.getSelectionModel().getSelectedCell();
                                    if (!
index) {
                                        return 
false;
                                    }
                                    var 
rec grid.store.getAt(index[0]);
                                    
grid.store.remove(rec);
                            }
                        },{
                            
text'Guardar',
                            
iconCls'icon-disk',
                            
handler: function(btnev) {
                                        
grid.store.save();
                                    }
                            
                        },{
                            
text'Ejecutar',
                            
iconCls'icon-script_go',
                            
handler: function(btnev) {
                                        var 
index grid.getSelectionModel().getSelectedCell();
                                        if (!
index) {
                                            return 
false;
                                        }
                                        var 
rec grid.store.getAt(index[0]);
                                        
Ext.Ajax.request({
                                           
url$view_js+'admin/sql/sql_l.php',
                                           
params:{accion:'exe',id:rec.id} ,
                                           
success: function(result) {
                                                        
json=doJSON(result.responseText);
                                                        if(
json.data){
                                                            
VentanaResultados(json.data);
                                                        }else{
                                                            if(
json.successcrearMsg(json.message,'Exito');
                                                            else 
crearMsg(json.message,'falla');    
                                                        }
                                                    },
                                           
failure: function(result) {
                                                    
crearMsg(result.responseText+' '+this.status,'Falla');    
                                                    }
                                        });
                                    }
                            
                        }
                        ],
                        
bbarpaginador
                    
                    
});
        
store.load({   params:{start:0,accion:'lista',limit:50}  });