Best Approach for Creating Custom ExtJS Pure HTML

Question

Therefore, I need to create an ExtJS component (version 2.3.0). The component is simple HTML (style) - this is the title.

My current approach is to create a custom component as follows:

/** * A ExtJS component for a header for the application */ Ext.ux.AppHeader = Ext.extend(Ext.Component, { height: 32, tpl: new Ext.Template ('<div class="title-bar"><h1>My App</h1></div>'), onRender: function(ct) { this.el = this.tpl.append (ct); Ext.ux.AppHeader.superclass.onRender.apply(this, arguments); } }); Ext.reg('AppHeader', Ext.ux.AppHeader); 

This works great, but I'm not sure if this is the “right” way to do it. If someone could use a more idiomatic way to do it, or a method that uses ExtJS's internal magic better, that would be great.

If, on the other hand, this is the “right” way to do it, let it be an example of how you can.

Edit

I definitely tried to handle it. The approach I'm using right now is:

 { html: '<div class="title-bar"><h1>My App</h1></div>' } 

and define the CSS string "title-bar" so that the text has the correct style / size, and ExtJS does the right thing.

Answer 1

It looks like a serious add-on. The goal of creating a component is that it can be reused. Maybe if he has configs for the name, class, etc., I could understand the point, but as is, there is no reason (unless you are greatly simplified for publication here?). Why not just put this div directly in the page code or panel configuration or something else containing it?

FYI, visually rendered components are usually a subclass of BoxComponent, as it provides calibration and layout capabilities in addition to the component API. BoxComponents are much simpler with standard Ext layouts.

EDIT: note that in Ext 4 BoxComponent no longer exists. Now you just use Component as the basis for most simple widgets like this.

Answer 2

@bmoeskau's answer is obviously correct (he connected ExtJS).

But I wanted to clarify the Edit OP , but that might confuse someone who is looking for a similar minimal rendering while still using Ext components. This is the code I'm talking about:

 { html: '<div class="title-bar"><h1>My App</h1></div>' } 

The above code will create the whole Ext.Panel (because the “panel” is the defaultType for each Ext.Container), and this is convenient because the panels have many functions, but maybe you look at the code and you expect to get only the intended div, not a bunch of nested divs that will contain your div-div. If so, you are probably looking for something similar to this:

 { xtype: 'box', autoEl: { tag: 'div', cls: 'title-bar', html: '<h1>My App</h1>' }} 

And this will only display the expected div with your custom class and your html inside, but this div will also contain the rest of the ExtJS positioning and size information, which will allow you to use the Ext layout system.