<?
//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({
             x: 60,// POSISION X
             y: 0,// POSISION X
             tpl: '<tpl for="."><div ext:qtip="{tip}" class="x-combo-list-item">{eti}</div></tpl>',
            store: store,//LOS DATOS
            valueField:'val',
            displayField:'eti',
            typeAhead: true,
            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,.....} */
        {
            x: 0,
            y: 5,
            xtype:'label', // ETIQUETA DE UN OBJETO DE FORMULARIO
            text: 'UNA CAJA:'
        }, combo,
        {
            x: 0,
            y: 35,
            xtype:'label',
            text: 'VVVVVV:'
        },{
            x: 60,
            y: 30,
            name: 'NNNN',
            id: 'NNNN',
            anchor:'100%'  // anchor width by percentage
        },{
            x: 0,
            y: 65,
            xtype:'label',
            text: 'Contraseña:'
        },{
            x: 60,
            y: 60,
            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({
        store: store,
        columns: [
                  {id:'id',header:'titulo';dataIndex:'id_columna1',width:20 },
                  .
                  .
                  .
                  
                  ],
        stripeRows: true,
        height: 350,
        width: 600,
        title: 'Array Grid',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'        
    });
    
    
    
    
/////////////////////////////////////////////////////7///
//un grid editable


var fm = Ext.form;
var cm = new Ext.grid.ColumnModel(
    {defaults: {sortable: true // columnas pueden ordenarse        
                },
     columns: [
                {  id: 'id',  header: 'Id', dataIndex: 'id', width: 40    },
                {  id: 'desc',header: 'Descripcion', dataIndex: 'descripcion',width: 120,
                   editor: new fm.TextArea({allowBlank: false})
                   },
                {  id: 'mod', header: 'Módulo',    dataIndex: 'modulo',width: 40,
                    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({allowBlank: false,format:'Y-m-d'})    },
                {  id: 'q', header: 'SQL',    dataIndex: 'sql',    
                    editor:  new fm.TextArea({allowBlank: false})}
            ]
    });    
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({
                        encode: false,
                        writeAllFields: false
                    });
var store = new Ext.data.Store({
                        // destroy the store if the grid is destroyed
                        autoDestroy: true,
                        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'}
                            }
                        }),    
                        autoSave: false,
                        reader: reader,
                        writer:writer
                        
                    });                        
                            
 var paginador=getPaginador(50,store);
  var grid = new Ext.grid.EditorGridPanel({
                        id:'grid_comp_11',
                        store: store,
                        cm: cm,
                        width: 600,
                        frame: true,
                        // 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 p = new Prop({
                                    descripcion: 'Aqui la descripcion',
                                    sqlq: 'Aqui la SQL',
                                    modulo: 'Aqui aqui el modulo/opcion.php donde se utiliza'
                                });
                                grid.stopEditing();
                                store.insert(0, p);
                                grid.startEditing(0, 0);
                            }
                        },{
                            text: 'Eliminar ',
                            iconCls: 'icon-delete',
                            handler : function(btn, ev) {
                                    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(btn, ev) {
                                        grid.store.save();
                                    }
                            
                        },{
                            text: 'Ejecutar',
                            iconCls: 'icon-script_go',
                            handler: function(btn, ev) {
                                        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.success) crearMsg(json.message,'Exito');
                                                            else crearMsg(json.message,'falla');    
                                                        }
                                                    },
                                           failure: function(result) {
                                                    crearMsg(result.responseText+' '+this.status,'Falla');    
                                                    }
                                        });
                                    }
                            
                        }
                        ],
                        bbar: paginador
                    
                    });
        store.load({   params:{start:0,accion:'lista',limit:50}  });