View Full Version : complex styled layout

8 Aug 2010, 3:19 PM
I'm trying to re-create a layout from an old application using extjs. An example can be found here:

http://orbital.bareflix.com/orbital/printCharacter.php?id=10 (http://http://orbital.bareflix.com/orbital/printCharacter.php?id=10)

I have tried to do it with table layouts, but I can't set the style on the TD elements, which I need to create the borders.
I also tried hbox layouts, but the borders don't work the same as a table.
I then tried to create a component subclass that creates my own table with the styles I need. This sort-of works, but I can't figure out how to add another ext.Component into the table. Here's the subclass I have:

characterSheet = Ext.extend(Ext.Component,
onRender: function (ct, position)
var tpl = new Ext.Template (
'<div class="cs"><table border="0" cellpadding="0" cellspacing="10" class="cs"></table></div>'

tpl.compile ();
this.el = tpl.overwrite (ct, {});
characterSheet.superclass.onRender.call(this, ct, position);

given another Ext.Component subclass instance, how would I get that inserted into the <table>?

I'm open to other suggestions for how to lay this out, but it seems like the default Ext components create a very complex nesting of divs and css dependencies that I don't want to have to understand. My old layout and stylesheet is pretty simple.

8 Aug 2010, 9:14 PM
So adding to that implies adding into a table cell with a known row/column coordinate?

8 Aug 2010, 10:25 PM
Looks like a job for the ComponentDataView user extension.

9 Aug 2010, 12:45 AM
IF the poster actually wants to lay out Components

With this being a port of an existing app, I suspect this is just another job for DataView

12 Aug 2010, 6:18 AM
I'm more concerned about reproducing the look of the old app, I'd like to do it the "extjs way", but I haven't figured out what that is.
In my old toolkit everything inherited from an html element object, so I could add a <td> to a <tr> to a <table> and it was easy to break up into neat little functions. That's what I'm trying find the equivalent of. I have a master table that holds several smaller tables. I want to build each smaller table as their own object.

I'd love to use panels with table layouts, but I couldn't find a way to assign styles to the <table> and <tr> tags. Plus the many <divs> a panel creates also affected the look of my layout. The default styles/look of extjs is very nice, I just wish there was an easy way to turn it off when you want something custom.

12 Aug 2010, 6:38 AM
Use a Store and a DataView and a tpl which embeds items in their own TDs within a TABLE