Ayuda con Tappanel q contiene 2 Grids
@Crysfel, @Tokkaido, @Gustavo21 agradezco la ayuda y colaboracion
he intentado, investigado, leido la API, pero no he logrado hacer q con un listener en el Grid principal por medio de una funcion se actualize el Grid secundario los cuales estan dentro de un Tappanel, al momento de crear el listener con el evento rowclick y agregar la funcion...la consola de errores de Chrome arroja lo siguiente Uncaught TypeError: Cannot call method 'getStore' of undefined...y la verdad no entiendo mucho q puede estar fallando.....de antemano agradezco mucho la ayuda.....aqui dejo mi codigo.
new Ext.TabPanel({
region: 'center',
deferredRender: false,
activeTab: 0,
margins:'5 5 5 5',
items: [{
title: 'Formulas',
iconCls: 'formulas',
closable: true,
//items:[contentE1:'master_detail']
items:[{
xtype: 'grid',
height:350,
plugins: [expander],
//width:600,
style:'padding:5px 5px 5px 5px',
title: 'Formulas Existentes',
store: 'st_grupo',
tools: tools,
collapsible: true,
collapsed: false,
//flex: 1,
id: 'grid_grupo',
ref: 'grid_grupo',
listeners: {
rowclick:function(grid,index,e) {
var st = this.grid_detalle.getStore();
st.baseParams.id_grupo = grid.getStore().getAt(index).get('cod_grupo');
st.load();
}
},
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true,
moveEditorOnEnter: false,
}),
columns: [
expander,
new Ext.grid.RowNumberer(),
{
xtype: 'gridcolumn',
header: 'COD',
dataIndex: 'cod_grupo',
sortable: true,
width: 70
},
{
xtype: 'gridcolumn',
header: 'Marca',
dataIndex: 'marca',
sortable: true,
width: 70
},
{
xtype: 'gridcolumn',
header: 'Tipo',
dataIndex: 'tipo',
sortable: true,
width: 70
},
{
xtype: 'gridcolumn',
header: 'Modelo',
dataIndex: 'modelo',
sortable: true,
width: 150
},
{
xtype: 'gridcolumn',
header: 'Opciones',
dataIndex: '',
sortable: true,
width: 150
}
],
},
{
xtype: 'grid',
height:420,
style:'padding:5px 5px 5px 5px',
title: 'Detalle Formula',
store: 'st_detalle',
tools: tools,
collapsible: true,
collapsed: false,
//flex: 1,
id: 'grid_detalle',
ref: 'grid_detalle',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true,
moveEditorOnEnter: false
}),
columns: [
new Ext.grid.RowNumberer(),
{
xtype: 'gridcolumn',
header: 'Cant.',
dataIndex: 'cantidad',
sortable: true,
width: 40
},
{
xtype: 'gridcolumn',
header: 'Referencia',
dataIndex: 'referencia',
sortable: true,
width: 150
}
,
{
xtype: 'gridcolumn',
header: 'Ref. Alterna',
dataIndex: 'alterna',
sortable: true,
width: 150
} ,
{
xtype: 'gridcolumn',
header: 'Descripcion',
dataIndex: 'nom',
sortable: true,
width: 200
},
{
xtype: 'gridcolumn',
header: 'V. Unitario',
dataIndex: 'valor',
sortable: true,
width: 100
},
{
xtype: 'gridcolumn',
header: 'V. Total',
dataIndex: 'total',
sortable: true,
width: 100
},
{
xtype: 'gridcolumn',
header: 'B. Sexta',
dataIndex: 'sexta',
sortable: true,
width: 100
},
{
xtype: 'gridcolumn',
header: 'B. Salitre',
dataIndex: 'salitre',
sortable: true,
width: 100
},
{
xtype: 'gridcolumn',
header: 'B. Bquilla',
dataIndex: 'bquilla',
sortable: true,
width: 100
}
]
}]
}]
})]
Usuario no registrado
17/05/2011
OK, he visto que hay varias formas de hacerlo, hice una prueba con el siguiente codigo:
el primero solo es un ejemplo de mi grilla:
var grid = new Ext.grid.GridPanel({
autoHeight:true,
renderTo: Ext.getBody(),
store: store,
columns: [
{header: 'Id', dataIndex: 'id'},
{header: 'Descripcion', dataIndex: 'descripcion'},
{header: 'Acciones', dataIndex: 'acciones', renderer: renderButton}
]
});
luego tengo la función que se ejecuta como renderer de mi columna
function renderButton ( data, cell, record, rowIndex, columnIndex, store, grid) {
var contentId = Ext.id();
createGridButton.defer( 1, this, [ data, contentId]);
console.debug(contentId);
return '';
}
y por separado la función que crea el botón
function createGridButton(value, id, record) {
new Ext.Button({
iconCls: 'agregar',
handler : function(btn, e) {
// do whatever you want here
alert ('agregar ' + value);
}
}).render(document.body, id);
}
otra forma es como aparece en la siguiente pagina pero no la he probado:
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/array-grid.html
aunque desconozco si es solo valida para ExtJS 4
lo otro es usar algun plugin como los que tiene Saki en su pagina:
http://rowactions.extjs.eu/
http://cellactions.extjs.eu/
con un poco de investigación encontraras exactamente lo que necesitas. Espero te sirva :)
tokkaido
18/05/2011
@Tokkaido muchas gracias....es bueno encontrar a alguien q colabore tanto a los q apenas estamos empezando con Extjs
Invitado
19/05/2011
mira, no lo he hecho de esa manera lo que he hecho es crear un toolbar con los respectivos botones que dependiendo del registro que seleccionan del grid hace las tareas de editar, eliminar, etc. Cuando llegue a casa investigaré un poco al respecto de lo que solicitas
tokkaido
18/05/2011
@Tokkaido...ya tenia el storeId....cambie la var como me indicas y funciona de maravilla.....sos grande y muy colaborador.....mil gracias =D>
Invitado
18/05/2011
@Tokkaido disculpa tanta molestia pero estoy buscando e investigando, como podria crear una columna en el grid principal que se llame 'Opciones' y q esta contenga botones con funciones por ejemplo btn:eliminar, btn:editar....segun lo q he leido debo usar el plugin roweditor.js pero no entiendo como...me podrias dar una mano...gracias
Invitado
18/05/2011
Lo que deseas hacer lo puedes realizar usando fireEvent('nombreDeTuEvento');
addEvents('nombreDeTuEvento') y finalmente lo recibes con relayEvents(nombreoVariableDelGrid,['nombreDeTuEvento'])
y la accion la pondrias dentro de un on
miPanel.on({
nombreDeTuEvento: function(){
//aqui lo que hara cuando se dispare el evento xD
}
})
Invitado
17/05/2011
Tu problema está en el scope, lo unico que tienes que hacer para evitar esto en este caso en particular es agregarle al store que deseas actualizar la propiedad storeId, por ejemplo:
storeId:'storedetalles'
Y luego cambias tu codigo de rowclick asi:
st = Ext.StoreMgr.lookup('storedetalles');
tokkaido
17/05/2011
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.