HTML 5: Test localStorage

var amigos = [{name: 'pepe',edad: 52},{name: 'ruben',edad: 22}];

if(!localStorage.amigos){
    localStorage.amigos = JSON.stringify(amigos);
    console.log("no estaba")
}else{console.log("ya estaba")}

var friends = JSON.parse(localStorage.amigos);

console.log(friends)
​

http://jsfiddle.net/8DL5f/1/

javascript: eliminar elementos de un array

Array.prototype.remove=function(s){
    for(i=0;i<this.length;i++) if(s==this[i]) this.splice(i, 1);
}

var list = [4,5,6,"hola","chau"];

list.remove(5)
list.remove("hola")
console.log(list)                
                
​

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"        
    }
}'; 

?>

jQuery: DataTables test edicion dinamica

var giCount = 1;
var  oTable;

$(document).ready(function() {
    oTable = $('#example').dataTable({
        "aaData": [
            [ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
            [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
        ]
    
    });
  
 console.log(oTable);
} );
 
function fnClickAddRow() {
    oTable.fnAddData( [
        giCount+".1",
        giCount+".2",
        giCount+".3",
        giCount+".4",
        giCount+".5" ] );
     
    giCount++;
}


 function redibujarTabla(){
   var arrDatos = [
               [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
            [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ]
        ];
   
   console.log(arrDatos);
   oTable.fnClearTable();   
   
   
   for(var i=0;i<arrDatos.length;i++){
      console.log(arrDatos[i]);
     oTable.fnAddData(arrDatos[i]);
   }     
  
 }  


function vaciarTabla(){
     oTable.fnClearTable();   
  }

function cambiarDatos(){
     oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], 1, 0 ); // Row
   
  }

function recargarDatos(){
   // fnReloadAjax()
 }

Test Online:

http://live.datatables.net/ikoxog/6/edit

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

JavaScript: detectar cerrar ventana

window.onbeforeunload = function (evt) {  
  var message = 'Seguro de cerrar la aplicacion?';  
  if (typeof evt == 'undefined') {  
    evt = window.event;  
  }  
  
  console.log(evt);
  
  if (evt) {  
    evt.returnValue = message;  
  }  
  return message;  
}

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/​

jQuery: para Pablon de dgn con cariño - detectar cambio en select con jQuery

    
    $("#miSelect").change(function(){
        //console.log($(this));        
        if($(this).val() == "volvo"){
            $("#miInput").show()       
        }           
    })

Test Online:

http://jsfiddle.net/t5TMQ/

jQuery: ver eventos asignados a un elemento

los eventos se van agregando..

$("#miBoton").click(function(){
    console.log("me tocaron 1 evento")
});
    
$("#miBoton").click(function(){
    console.log("me tocaron 2 evento")
});

$("#miBoton").unbind('click') //saca los clicks
    
$("#miBoton").click(function(){
    console.log("me tocaron 3 evento")
});
    
console.log($("#miBoton").data("events"))    //Object
console.log($("#miBoton").data("events").click.length)​ //1

http://jsfiddle.net/svUFb/5/

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/