var Record = Ext.data.Record.create([  
	{name: 'idGrupo'},
    {name: 'nombreGrupo', allowBlank: false},
	{name: 'cantidadUsuarios'}
]);
var reader = new Ext.data.JsonReader(
	{
    totalProperty: 'total',
    idProperty: 'idGrupo',
    root: 'datos'
	},Record);
var writer = new Ext.data.JsonWriter({
	encode: true,
	writeAllFields: false
});
var store = new Ext.data.Store({
	id		: 'grupos-store',
	autoLoad : false,
	autoSave : true,
	restful : true,
	proxy	: new Ext.data.HttpProxy({
		url			:'index.php/grupos_rest/grupos/format/json',
	
		}),
	reader	: reader,
	writer	: writer,
	listeners	: {
		add		: function(store,record,index){
			
		},
		write : function(store, action, result, response, rs) {
            alert(response.message);
			
        }
	}
});
var grid = new Ext.grid.EditorGridPanel({
	id			: 'grupos-grid',
	store		: store,
	viewConfig	: {forceFit: true},
	columns 	: [	
				new Ext.grid.RowNumberer(),  
				{header: 'Nombre del Grupo',dataIndex:'nombreGrupo'},
				{header: 'Cantidad de Usuarios',dataIndex:'cantidadUsuarios'}
				],
	height		: 300,
	sm			: new Ext.grid.RowSelectionModel({singleSelect:true}),
	tbar		: [{
		text	: 'Agregar Grupo',
		iconCls	: 'silk-group-add',
		scope	: this,
		handler	: function(){
			Ext.Msg.prompt('Grupo','Ingrese el nombre del nuevo grupo:',function(btn,texto){
				if (btn=="ok"){
					if (Ext.util.Format.trim(texto) == ""){
						alert("no puede estar vacio.")
					} else {
						//CREATE RECORD
						var grid = Ext.getCmp('grupos-grid');
						var g = new Record({"nombreGrupo" : texto});
						grid.store.add(g);
						
					}
				}
			})
		}
	},'-',{
		text	: 'Eliminar Grupo',
		iconCls	: 'silk-group-delete',
		scope	: this,
		handler	: function(){
			var grid = Ext.getCmp('grupos-grid');
			var rec = grid.getSelectionModel().getSelected();
			if (!rec) {
	            return false;
	        }
	        grid.store.remove(rec);
			
		}
	},'-',{
		text	: 'Refrescar Datos',
		iconCls	: 'silk-arrow-refresh',
		scope	: this,
		handler	: function(){
			Ext.getCmp('grupos-grid').store.reload();
		}
	},],
	bbar	: [{
		text: 'autoGuardar',
        enableToggle: true,
        pressed	: true,
		scope	: this,
        tooltip: 'Cuando esta habilitado, los cambios se guardaran automaticamente.',
        toggleHandler: function(btn, pressed) {
            this.store.autoSave = pressed;
			if (pressed == true){
				Ext.getCmp('boton-guardar').disable();
			} else {
				Ext.getCmp('boton-guardar').enable();
			}
			
        }
	},'-',{
		id		: 'boton-guardar',
		text	: 'Guardar',
		scope	: this,
		disabled: true,
		iconCls	: 'icon-save',
		handler	: function(){
			this.store.save();
		}
	}]
});
grid.relayEvents(this.store, ['destroy', 'save', 'update']);