Muchas Gracias
Este es mi código
Código PHP:
//Ejecuto el OnReady y crea el form
Ext.onReady(function(){
//Creo el DataModel
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'usuario', type: 'string'},
{name: 'pass', type: 'string'}
]
});
//Creo el Store
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
//Código PHP
url: '../php/UsData.php',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
//Crea el Gridpanel
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
frame: true,
title: 'Usuarios',
//Cargo el store
store: myStore,
stripeRows: true,
iconCls: 'icon-user',
//Defino las columnas
columns: [
{ id:'id', text: 'ID', width: 40, sortable: true, dataIndex: 'id'},
{ text: 'Usuario', width: 80, sortable: true, dataIndex: 'usuario', field: { xtype: 'textfield' }},
{ text: 'Contraseña',flex: 1, sortable: true, dataIndex: 'pass', field: { xtype: 'textfield' }}
],
//Agrego los botones
dockedItems: [{
xtype: 'toolbar',
items: [{
//Botón Agregar
name: 'agregar',
text: 'Agregar',
closable: true,
iconCls: '',
//Agrego el formulario agregar
handler: function(){
//Creo el panel y le paso los datos a login
var login = Ext.create('Ext.form.Panel', {
title: 'NUevo Usuaro',
bodyPadding: 5,
width: 385,
standardSubmit: true,
// Petición Ajax
url: '../php/UsInsert.php',
//Defino el layout
layout: 'anchor',
defaults: {
anchor: '100%'
},
// Defino los campos
defaultType: 'textfield',
items: [{
fieldLabel: 'Usuario',
name: 'usuario',
allowBlank: false
}, {
fieldLabel: 'Password',
name: 'pass',
inputType: 'password',
allowBlank: false
}],
// Defino los botones
buttons: [
{
text: 'Salir',
//Indico que hacer al presionar el boton Cancelar
handler: function () {
//Sale del formulario
login.hide();
win.hide();
}
},
{
text: 'Grabar',
formBind: true, //only enabled once the form is valid
disabled: true,
//Indico que hacer al presionar el botón login
handler: function () {
login.getForm().submit({
method: 'POST',
waitTitle: 'Insertando',
waitMsg: 'Grabando en la base de datos...',
});
}
}],
renderTo: Ext.getBody()
});
// Usamos un Window para mostrar el Nuevo Usuario en una ventanita
var win = new Ext.Window(
{
layout: 'fit',
width: 400,
height: 160,
closable: false,
resizable: false,
plain: true,
items: [login] // y acá cargamos el panel con el Nuevo Usuario
}
);
//Muestro la ventana atras del panel
win.show();
}
},
//Termina el formulario agregar
{
//Botón Eliminar
itemId: 'delete',
text: 'Eliminar',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
myStore.remove(selection);
}
}
}]
}]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
// Usamos un Window para mostrar el Nuevo Usuario en una ventanita
var win = new Ext.Window(
{
layout: 'fit',
width: 500,
height: 400,
closable: false,
resizable: false,
plain: true,
items: [grid] // y acá cargamos el panel con el Nuevo Usuario
}
);
//Muestro la ventana atras del panel
win.show();
});
