Inserción, edición y eliminación de registros en un Datagrid

// Añadimos el tema de color azul a los componentes
GridClientes.setStyle("themeColor", "haloOrange");
TxtNom.setStyle("themeColor", "haloOrange");
TxtEdad.setStyle("themeColor", "haloOrange");
CmbSexo.setStyle("themeColor", "haloOrange");
BtnNuevo.setStyle("themeColor", "haloOrange");
BtnEditar.setStyle("themeColor", "haloOrange");
BtnEliminar.setStyle("themeColor", "haloOrange");
BtnGuardar.setStyle("themeColor", "haloOrange");
BtnCancelar.setStyle("themeColor", "haloOrange");
// Ponemos no disponibles los sigu. componentes
TxtNom.enabled = false;
TxtEdad.enabled = false;
CmbSexo.enabled = false;
BtnEditar.enabled = false;
BtnEliminar.enabled = false;
// no visibles los sigu. botones
BtnGuardar.visible = false;
BtnCancelar.visible = false;
//Propiedad de la casilla de texto edad para solo numeros
TxtEdad.restrict = "0-9";
TxtEdad.maxChars = 2;
// Creamos propiedades del Datagrid
GridClientes.editable = false;
//Editable o no
GridClientes.headerHeight = 20;
//Tamaño del encbzd
GridClientes.showHeaders = true;
//Mostrar encbzds
GridClientes.sortableColumns = false;
//Ordenar columnas
GridClientes.setStyle("color", "black");
//Color Letra
// Inserta las columnas..
GridClientes.addColumn("Nombre");
GridClientes.addColumn("Edad");
GridClientes.addColumn("Sexo");
// Asigna tamaños de ancho a las columnas..
GridClientes.getColumnAt(0).width = 280;
GridClientes.getColumnAt(1).width = 40;
GridClientes.getColumnAt(2).width = 50;
//Creamos arreglo en donde guardar los datos de los clientes
ArregloClientes = new Array({Nombre:"Tomas", Edad:"35", Sexo:"Masculino"}, {Nombre:"Kitty", Edad:"2", Sexo:"Femenino"});
//Añadimos los campos al Datagrid
GridClientes.dataProvider = ArregloClientes;
stop();

//Añade el evento de click a los botones y llama la funcion
BtnNuevo.addEventListener("click", ActivaCamposNew);
BtnEditar.addEventListener("click", ActivaCamposEdit);
BtnEliminar.addEventListener("click", BorraLinia);
BtnCancelar.addEventListener("click", DesactivaCampos);
BtnGuardar.addEventListener("click", AgregaDatos);
// Variable para detectar si el campo jue editado o no...
Editado = false;
// Añade nueva linea al datagrid 
function AgregaDatos() {
	if (Editado) {
		LiniaGrid = GridClientes.selectedIndex;
		ArregloClientes.editField(LiniaGrid, "Nombre", TxtNom.text);
		ArregloClientes.editField(LiniaGrid, "Edad", TxtEdad.text);
		ArregloClientes.editField(LiniaGrid, "Sexo", CmbSexo.value);
	} else {
		//Inserta los datos capturados al registro que alimenta al Grid..	
		ArregloClientes.addItem({Nombre:TxtNom.text, Edad:TxtEdad.text, Sexo:CmbSexo.value});
		// GridClientes.addItem(ObjNew);	Tambien asi se puede... solo se asignan los valores a la variable
	}
	DesactivaCampos();
}
function BorraLinia() {
	//Obtiene el indice del Grid (Linea seleccionada)...
	LiniaGrid = GridClientes.selectedIndex;
	ArregloClientes.removeItemAt(LiniaGrid);
	// Limpia los campos de captura...
	TxtNom.text = "";
	TxtEdad.text = "";
	CmbSexo.selectedIndex = 0;
}
// Activa los campos de captura para insertar nuevo elemento
function ActivaCamposNew() {
	Editado = false;
	GridClientes.enabled = false;
	TxtNom.enabled = true;
	TxtEdad.enabled = true;
	CmbSexo.enabled = true;
	BtnGuardar.visible = true;
	BtnCancelar.visible = true;
	BtnNuevo.enabled = false;
	BtnEditar.enabled = false;
	BtnEliminar.enabled = false;
	//Limpia los campos de captura
	TxtNom.text = "";
	TxtEdad.text = "";
	CmbSexo.selectedIndex = 0;
}
// Activa los campos de captura para editar los datos..
function ActivaCamposEdit() {
	Editado = true;
	GridClientes.enabled = false;
	TxtNom.enabled = true;
	TxtEdad.enabled = true;
	CmbSexo.enabled = true;
	BtnGuardar.visible = true;
	BtnCancelar.visible = true;
	BtnNuevo.enabled = false;
	BtnEditar.enabled = false;
	BtnEliminar.enabled = false;
}
// Desactiva los campos de captura cuando se cancela la edicion o captura
function DesactivaCampos() {
	GridClientes.enabled = true;
	//Limpia los campos de captura
	TxtNom.text = "";
	TxtEdad.text = "";
	CmbSexo.selectedIndex = 0;
	//Desactiva los campos de captura
	TxtNom.enabled = false;
	TxtEdad.enabled = false;
	CmbSexo.enabled = false;
	BtnGuardar.visible = false;
	BtnCancelar.visible = false;
	//Regresa de nuevo activo del boton nuevo..
	BtnNuevo.enabled = true;
}

/* * * * ----  Añade los eventos del Grid y llama la funcion   ----- * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
GridClientes.addEventListener("change", MeteDatos);
// Anexa datos del grid a los campos de captura para Editar 
function MeteDatos(Obj) {
	ActivaBtns();
	//Obtiene los datos de la linea seleccionada
	DatosGrid = Obj.target.selectedItem;
	//Asigna valores de los campos de texto
	TxtNom.text = DatosGrid.Nombre;
	TxtEdad.text = DatosGrid.Edad;
	if (DatosGrid.Sexo == "Masculino") {
		//Nota: Para cambiar de indice a un combo debe estar activado (enabled=true)
		CmbSexo.enabled = true;
		CmbSexo.selectedIndex = 1;
		CmbSexo.enabled = false;
	} else {
		CmbSexo.enabled = true;
		CmbSexo.selectedIndex = 2;
		CmbSexo.enabled = false;
	}
}
//Activa los botones Editar y Eliminar
function ActivaBtns() {
	BtnEditar.enabled = true;
	BtnEliminar.enabled = true;
}