15 Mar 2010 9:33 AM #1
Dear ExtJS people,
I am very new to ExtJS and the documentation didt help me with my question:
Is there a standard way to replace the html generated by ExtJS for its widgets?
Maybe its the most save way to generate such a table forrest to be sure it looks the same in all browsers, but I would really like to be able to make some kind of lighter-weight "skin" for ExtJS components.
Sure, its no markup that is send so the browser and thus should not affect accessability/SEO stuff, but the DOM generated that way can become really huge and the responsiveness of the UI can suffer from that. Even on not so slow machines.
Another point is the ability to tune the visual appearance. There are so many elements with classes wrapped around any little widget. That makes it really annoying to change the visual style with css. Think of the bright future with actually working browsers that allow you to do amasing stuff using css3 etc :-)
I am thinking about this stuff because I was at T3BOARD10 with the TYPO3 people starting to work on the UI for TYPO3 v5...
15 Mar 2010 10:53 AM #2
17 Mar 2010 2:40 AM #3
I think ExtJS does a pretty good job at balancing the generated "bloat". Compare it to other widget frameworks and you will find that despite seemingly excessive html it still outperforms most other toolkits
But to be pedantic I think there are ways to optimize the generated code, but at the cost of increased complexity in supporting various browsers as in some cases you would need to generate different html. So writing user extensions / plugins would become potentially a nightmare as you can't be sure of the underlying representation.
17 Mar 2010 12:26 PM #4
- Join Date
- Mar 2007
- Notts/Redwood City
- Vote Rating
It gives you what you ask for.
If you use Panels for everything, you'll get some extra DOM. Panels can do a lot. Top toolbar, bottom toolbar, header, footer, fbar etc.
If you just need a Container, just use a Container. It's just a div.
you only get bloat if you use the wrong Component for the job.
And if you overnnest.Search the forum: http://www.google.com/coop/cse?cx=01...%3Az7of1ufqccu
Read the docs too: http://extjs.com/deploy/dev/docs/
17 Mar 2010 12:57 PM #5
Animal, I do not agree. Saying that nesting panels inside panels gives more bloat is true, but it doesn't mean that the standard components generate clean code.
For example, the standard exts tree seems to build code
<ul class="x-tree-root-ct x-tree-arrows" id="ext-gen5"> <div class="x-tree-root-node"> <li class="x-tree-node" id="ext-gen8"> <div unselectable="on" class="x-tree-node-el x-unselectable x-tree-node-expanded" ext:tree-node-id="1" id="extdd-1" ><span class="x-tree-node-indent"></span><img class="x-tree-ec-icon x-tree-elbow-end-minus" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ><img unselectable="on" class="x-tree-node-icon" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" id="extdd-2" ><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on" id="extdd-3" >ABSOLUTE ROOT</span></a></div> ...etc
The bigger the dom, the less maintainable.
17 Mar 2010 4:07 PM #6
In almost all cases the 'bloated' HTML is required to make Ext JS work across all of the browsers we support. There are instances we've identified where we can reduce the number of DOM elements created, and we're doing so where we find them.
18 Mar 2010 8:26 AM #7
In fact, you could make support for the older browsers an override file. Thus you wouldn't need to include it when sending to an iPhone, for example.
21 Mar 2010 9:53 AM #8
22 Mar 2010 12:20 AM #9
22 Mar 2010 8:48 AM #10