PDA

View Full Version : accordion panel and grid



olvap
7 Jun 2009, 7:27 AM
i have some problems trying to put a grid into a accordion panel.
this is my code

grid = new Ext.grid.EditorGridPanel({
id: 'grid',
store: DataStore,
cm: ColumnModel,
enableColLock:false,
clicksToEdit:1,
sm: new Ext.grid.RowSelectionModel({singleSelect: true})
});
var accordion = new Ext.Panel({
layout:'accordion',
items: [grid]
});

but when i show the panel has nothing in it.

anybody knows why?

Animal
7 Jun 2009, 7:34 AM
Check that the Store is loaded, and that the ColumnModel selects existing fields.

Size the accordion Panel.

olvap
7 Jun 2009, 7:42 AM
the datastore and the collumn are ok, cause i can see the gris in another panel. all the panels has size

This is the comple code


var DataStore;
var ColumnModel;
var grid;
var ListingWindow;
var accordion;
var accordion2;

Ext.onReady(function(){

Ext.QuickTips.init();

DataStore = new Ext.data.Store({
id: 'DataStore',
proxy: new Ext.data.HttpProxy({
url: '../php/farmacia.php',
method: 'POST'
}),
baseParams:{task: "LISTING"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'nombre', type: 'string', mapping: 'nombre'},
{name: 'direccion', type: 'string', mapping: 'direccion'},
{name: 'telefono', type: 'string', mapping: 'telefono'},
{name: 'lat', type: 'string', mapping: 'lat'},
{name: 'lng', type: 'string', mapping: 'lng'},
{name: 'dist', type: 'string', mapping: 'dist'},
{name: 'detalle', type: 'string', mapping: 'lng'},
{name: 'localidad', type: 'string', mapping: 'lng'}
]),
sortInfo:{field: 'dist', direction: "ASC"}
});

function renderTopic(value, p, record){
return String.format(
'<div id="ContM"> <div id="ContM1"><IMG src="../ima/ic_Cam.gif"width="15" height="12"><p></p><IMG src="../ima/ic_Mapa.gif"width="15" height="12"> </div> <div id="ContM2"><div id="ContM2_1"> <div id="ContM2_1_1">{0} </div> <div id="ContM2_1_2">$3000</div> </div> <div id="ContM2_2"> <div id="ContM2_2_1"><IMG src="../ima/580869_1.jpg"width="80" height="60"> </div> <div id="ContM2_2_2"> {0}<p></p><b1>{0}</b1> </div> </div> </div>',
value, record.data.forumtitle, record.id, record.data.forumid);
}



ColumnModel = new Ext.grid.ColumnModel(
[{
id: 'Topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
dataIndex: 'direccion',
width: 300,
renderer: renderTopic,
sortable: true
}]
);
ColumnModel.defaultSortable= true;

grid = new Ext.grid.EditorGridPanel({
id: 'grid',
width:330,
height:380,
store: DataStore,
cm: ColumnModel,
enableColLock:false,
clicksToEdit:1,
sm: new Ext.grid.RowSelectionModel({singleSelect: true})
});

ListingWindow = new Ext.Panel({
id: 'ListingWindow',
width:330,
height:380,
// layout:'accordion',
items: grid
});

grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
var dir=r.get('lat')+','+r.get('lng');
// Ext.Msg.alert('Buscar',dir);
map.panTo(new GLatLng(r.get('lat'),r.get('lng')));
map.openInfoWindow(new GLatLng(r.get('lat'),r.get('lng')),'<b>'+r.get('nombre')+'</b><br>'+r.get('direccion')+'<br>'+r.get('telefono'));
});


DataStore.load();

var accordion = new Ext.Panel({
title:'ajajshasjkf',
width:330,
height:380
});
var accordion2 = new Ext.Panel({
width:330,
height:380,
layout:'accordion',
items: [accordion,ListingWindow]
});

var win = new Ext.Window({
title:'Inmuebles',
width: 340,
height:410,
items:accordion2
});

var win2 = new Ext.Window({
title:'Inmuebles',
resizable:false,
width: 340,
height:410,
items:ListingWindow
});
win.setPosition(500,180);
win.show();
});

Animal
7 Jun 2009, 7:50 AM
Cut it down.

All you want to see is the Window with title "Immeubles".

WHY WHY WHYW HYW HWY WHYW HWY WHYW HWY WHY WHYW HWYWYWHWYWHWYWHWH¬!!!!!!>>????????



OVERBNEST?!??!??!?


Lok it up I can't be ****ed

olvap
7 Jun 2009, 8:04 AM
ok, imagin i want to see the other windows. its show mw a emty panel.

but any way, can you give me an exmaple of an accordion panel using something diferent than pure html, even better, using a grid?

Animal
7 Jun 2009, 8:06 AM
new Ext.Window({
title: 'Accordion',
height: 400,
width: 600,
layout: 'accordion',
items: [ myGridPanel, myOtherPanel]
});


Where myGridPanel IS A GridPanel!

olvap
7 Jun 2009, 8:13 AM
thank!