ExtJS 4: Distintas formas de cargar un formulario

el JS:

var myFormPanel;
            
            Ext.onReady(function() {
                myFormPanel = Ext.create('Ext.form.Panel', {
                    title: 'Simple Form',
                    bodyPadding: 5,
                    width: 350,
                    url: 'save-form.php',
//h
                    layout: 'anchor',
                    defaults: {
                        anchor: '100%'
                    },

                    // The fields
                    defaultType: 'textfield',
                    items: [{
                            fieldLabel: 'First Name',
                            name: 'user_nombre',
                            allowBlank: false
                        },{
                            fieldLabel: 'Last Name',
                            name: 'user_apellido',
                            allowBlank: false
                        }],

                    renderTo: Ext.getBody()
                });
            });

            function cargarDatos(){
                            
                //myFormPanel.load({ //es lo mismo
                myFormPanel.getForm().load({
                    url: 'test_extj4_llenar_formulario.php',
                    //params: {
                    //  consignmentRef: myConsignmentRef
                    //},
                    failure: function(form, action) {
                        Ext.Msg.alert("Load failed", action.result.errorMessage);
                    }
                });
            }

            function cargarDatosDesdeDM(){                

                Ext.define('User', {
                    extend: 'Ext.data.Model',
                    fields: [
                        {name: 'user_nombre',  type: 'string'},
                        {name: 'user_apellido',  type: 'string'},
                        {name: 'useSDF',   type: 'int', convert: null},
                        {name: 'phone', type: 'string'},
                        {name: 'alive', type: 'boolean', defaultValue: true, convert: null}
                    ],

                    changeName: function() {
                        var oldName = this.get('user_nombre'),
                        newName = oldName + " The Barbarian";

                        this.set('user_nombre', newName);
                    }
                });
                
                var unUsuario = Ext.create('User',{
                    user_nombre : 'arturo',
                    user_apellido : 'malon'
                });
            
                unUsuario.changeName();
                console.log(unUsuario);
            
                myFormPanel.loadRecord(unUsuario);
            }

            function cargarDatosDesdeJson(){                
                var otroUser = {data:{
                        user_nombre : 'pepe',
                        user_apellido : 'soler'
                    }};                
                myFormPanel.loadRecord(otroUser);
            }

el PHP:

<?php 
echo '{
    success: true,
    data: {
        user_nombre: "Elias Josue",
        user_apellido: "Le Sar"        
    }
}'; 

?>

ExtJs 4: contextmenu

var menu = new Ext.menu.Menu( {

    margin: '0 0 10 0',
    //defaults:{  
      //  iconAlign: 'top' // <--- we change the icon position  
    //},
    floating: true, 
    items: [{                        
        text: 'buscar amigos',
        iconCls:'back',
        handler: function(){
                alert('me apretaron'); 
        }      
    },{
        text: 'regular item 2'
    },{
        text: 'regular item 3'  
    }]
}); 

Ext.get("black_square").on("contextmenu",function(e,t) {
                    e.stopEvent();
                    menu.showBy(t);
                    return false;
                })
​

test Online:

http://jsfiddle.net/qGcHV/2/

test Online 2 (pasando Datos):

http://jsfiddle.net/qGcHV/5/

con jQuery:

http://jsfiddle.net/ric47121/GX7Yc/

http://scriptinside.blogspot.com.ar/2011/02/capturar-click-derecho-con-jquery.html

ExtJS 4: Test Date Picker form

Ext.create('Ext.panel.Panel', {
    title: 'Choose a future date:',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
                name : 'fecha',
                xtype: 'datefield',
                fieldLabel: 'Fecha',
                id: 'fechaReserva',
                inputId : 'fechaReserva_inputId',
                format : 'd/m/Y',
                value: '11/09/2001',        
                submitFormat:'Y-m-d' 
    }]
});

var fecha = Ext.Date.parse('1986-09-05 15:20:05', "Y-m-d H:i:s");   
//Ext.getCmp('fechaReserva').setValue(new Date())
Ext.getCmp('fechaReserva').setValue(fecha)
console.log(Ext.getCmp('fechaReserva').getValue())    
console.log(Ext.getCmp('fechaReserva').getSubmitValue())

​

Test Online

http://jsfiddle.net/YMxND/3/

ExtJS 4: Test time picker

Ext.create('Ext.form.Panel', {
    title: 'Time Card',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'timefield',
        id: 'mytimefieldId',
        name: 'in',
        fieldLabel: 'Time In',
        minValue: '00:00 AM',
        maxValue: '11:59 PM',
        increment: 30,
        submitFormat : 'H:i',
        //format: 'H:i',
        value: new Date(),
        anchor: '80%'
    }]
});

Ext.getCmp('mytimefieldId').setValue(new Date())
console.log(Ext.getCmp('mytimefieldId').getSubmitValue())
//console.log(Ext.getCmp('mytimefieldId').value)    

Test Online

http://jsfiddle.net/JAAx7/2/​

ExtJs 4: Cambiar Store de un combobox

var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});

var paises = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"alemani"},
        {"abbr":"RU", "name":"Rusia"},
        {"abbr":"JA", "name":"Japon"}
        //...
    ]
});


var combo = Ext.create('Ext.form.ComboBox', {
    id:'combiId',
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    renderTo: Ext.getBody()
});

states.removeAll();
states.add({"abbr":"P", "name":"Peru"},{"abbr":"Ec", "name":"Ecuador"});

combo.store = paises; //Cambio el estore rck

ExtJS 4: Actualizar combobox dinamicamente

lo hacemos desde su data store:

var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});

var combo = Ext.create('Ext.form.ComboBox', {
    id:'combiId',
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    renderTo: Ext.getBody()
});

states.removeAll();
states.add({"abbr":"P", "name":"Peru"},{"abbr":"Ec", "name":"Ecuador"});

combo.setValue("lalalala");
console.log(combo.getSubmitData()) //object
console.log(combo.getSubmitValue()) //lalalala
    

http://jsfiddle.net/bXTpt/6/