Meilleure approche pour créer un ExtJS personnalisé en HTML pur

Question

J'ai donc besoin de créer un composant ExtJS (version 2.3.0). Le composant est simplement HTML (style) - c'est un en-tête.

Mon approche actuelle est de créer un composant personnalisé comme suit:

/** 
* 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); 

Cela fonctionne très bien, mais je ne suis pas convaincu qu'il est la « bonne » pour aller à ce sujet. Si quelqu'un peut partager une façon plus idiomatique de le faire, ou un moyen qui utilise mieux la magie intérieure dans ExtJS, ce serait génial.

Si d'un autre côté, c'est la "bonne" façon de le faire - que ce soit un exemple de comment on peut.

Modifier

je vraiment essayé de dur avec celui-ci. L'approche que je prends maintenant est:

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

et définir le CSS « ​​barre de titre » d'avoir le texte du bon style/taille, et ExtJS fait la bonne chose.

Answer 1

Cela ressemble à une sur-ingénierie sérieuse. Le but de faire quelque chose d'un composant est de le réutiliser d'une manière ou d'une autre. Peut-être que s'il avait des configs pour le titre, la classe, etc. Je pourrais voir le point, mais comme il est, il n'y a aucune raison (à moins que vous ayez drastiquement simplifié dans le but de poster ici?). Pourquoi ne pas simplement mettre cette div directement dans le code de la page ou dans la configuration du Panel ou quoi que ce soit qui le contient? FYI, les composants rendus visuellement sous-classent généralement BoxComponent puisqu'il offre des capacités de dimensionnement et de mise en page en plus de l'API Component. BoxComponents fonctionne beaucoup plus facilement avec les mises en page Ext standard.

EDIT: Notez que dans Ext 4, BoxComponent n'existe plus. Vous utiliseriez simplement Component comme base pour la plupart des widgets simples comme celui-ci.

Answer 2

@bmoeskau answer est évidemment correct (il a cofondé ExtJS).

Mais je voulais clarifier sur le OP's Edit, ce qui est correct, mais cela peut dérouter quelqu'un qui cherche un rendu minimal similaire en utilisant un composant Ext. C'est le code dont je parle:

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

Le code ci-dessus va créer un ensemble Ext.Panel (parce que « panneau » est le defaultType de chaque Ext.Container), et qui est à portée de main parce que les panneaux ont de nombreuses caractéristiques, mais peut-être que vous regardez le code et vous vous attendez à obtenir juste la div prévue, et pas un tas de divs imbriqués qui contiendra votre div-titre div. Si tel est le cas, vous êtes probablement pour quelque chose de semblable à ceci:

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

Et cela va rendre tout le div attendu avec votre classe personnalisée et votre HTML à l'intérieur, mais ce div sera aussi le reste de ExtJS positionnement et dimensionner les informations qui vous permettront de profiter du système de mise en page d'Ext.