PDA

View Full Version : Extending panel but not visible items



CÚdric VIDREQUIN
18 Aug 2011, 2:24 AM
Hello,

I have several records of the same type that I want to show on the screen. I thought about creating several panels that will print the data of each record. I chose this solution because data structure is too complex to be printed in a simple grid. Here is a simplified example of that structure :
{
label: 'myLabel',
{
attr1: 'value1',
attr2: 'value2'
}
startValidityDate: oneDay,
endValidityDate: anotherDay
}

I'm extending Ext.Panel to create UI blocks : one for each record. One block would contain a text field (for the label), a grid (for the attributes), and two date pickers (for validity period).

Here is a simplified version of my source code :


MyUIobject = Ext.extend(Ext.Panel, {
constructor: function(tbaLabel, tbaStartDate, tbaEndDate, attrs) {
this.tbaLabel = new Ext.form.TextField({
fieldLabel: I18nManager.get('label_ttbaUI_label'),
name: 'tbaLabel',
value: tbaLabel
});
config = Ext.applyIf({
layout: 'vBox',
items: [this.tbaLabel]
});
MyUIobject.superclass.constructor.call(this, config);
}
});


In my JS code, I get the records and try to add the custom panels in my UI :


var myStore = new Ext.data.Store({
id: 'myStore',
restful: true,
idProperty: 'OID',
root: 'tbas',
proxy: myProxy,
reader: myReader,
autoLoad: false,
listeners: {
'load': function(data){
var records = data.getRange();
var currRecord = null;
for(var i=0; i<records.length; i++) {
currRecord = new MyUIobject(records[i].data.tbaLabel, records[i].data.tbaStartDate, records[i].data.tbaEndDate, records[i].data.attrs);
recordList.add(currRecord);
console.log("------------------------------");
console.log(currRecord);
}
recordList.doLayout();
}
}
});

var recordList = new Ext.Panel({
renderTo: 'recordPart',
layout:'vBox',
title: I18nManager.get('label_ttbaUI_selected_records')
});


In the firebug console, the UI objects seems to be ok.

My problem is that the recordList elements are not visible :(

I can see that they exist in the FB console, but they are not well printed on the screen.

Did I forgot something that make the elements hidden ? or bad printed ?

CÚdric VIDREQUIN
18 Aug 2011, 4:30 AM
I'm now sure that it is a CSS problem, some trouble with ext-all.css : when I remove the content of that CSS, I can see my fields :-|

There must be something wrong in the way I wrote the code so that it causes the render problem WDYT ???

CÚdric VIDREQUIN
18 Aug 2011, 5:40 AM
I tried to add the panels dynamically, without extend them to try to see if the problem comes from the extend part : but it doesn't ... I have the same trouble :(
See here for more information : http://www.sencha.com/forum/showthread.php?144247-Add-nested-panel-dinamically

Uberdude
18 Aug 2011, 6:03 AM
Using Panel seems rather overkill, maybe DataView would be more appropriate.

CÚdric VIDREQUIN
18 Aug 2011, 7:09 AM
@Uberdude : thx for attention :)

I started to look at DataView but I found 2 'bad' points :
- it is more complex and I didn't find an easy tutorial to start to work with it (still searching for one if someone knows where to find it)
- the generated code is HTML only (in the examples I saw) and not ExtJs object

Do you have more clues about those two remarks please ?
Or some idea to solve the original problem ?