3.x ExtJs plusieurs instances

Question

// Using extjs 3.x 
var box = new Ext.Textfield { /* textField configuration */ }; 
var form = new Ext.FormPanel{ 
    /* formPanel configuration */ 
    items:[box] 
} 

Cela fonctionne très bien, mais je veux créer plusieurs instances de box de sorte que lorsque je crée plusieurs instances de form je ne box corrompu, aussi je ne veux pas utiliser des tableaux . S'il vous plaît suggérer une meilleure approche pour créer et gérer plusieurs instances d'un Ext.Component

Answer 1

composants d'extension est la clé

var MyBoxClass = Ext.extend(Ext.form.TextField,{ 
    /* your config values */ 
    width: ... 

    /* this is important, see bmoeskau's comment below*/ 
    initComponent: function() { 
    BoxClass.superclass.initComponent.call(this); 
    } 
}); 


var form = new Ext.FormPanel{ 

    items: [ 
    new MyBoxClass({fieldLabel: 'first box'}), 
    new MyBoxClass({fieldLabel: 'second box'}), 
    new MyBoxClass({fieldLabel: 'third box'}), 
    ] 

} 

Answer 2

@ Mchl de answer est une bonne approche pour la fabrication de composants réutilisables, en particulier lorsque vous avez besoin de remplacer ou d'ajouter nouveau comportement à un existant. Si vous avez simplement besoin de réutiliser certains paramètres de configuration et rien de plus, vous pouvez aussi faire quelque chose d'un peu plus simple:

cfg = { 
    xtype: 'textfield', 
    width: 100, 
    maxLength: 10 
} 

new Ext.FormPanel({ 
    items: [cfg, cfg] 
}); 

Si vous avez besoin d'ajouter des champs de configuration spécifiques à l'instance (comme id par exemple), vous pouvez simplement passer vos valeurs uniques et ajouter la valeur par défaut cfg pour les (applyIf ne remplacera pas les propriétés existantes, il ne fera qu'ajouter des propriétés):

new Ext.FormPanel({ 
    items: [ 
     Ext.applyIf({id:'foo'}, cfg), 
     Ext.applyIf({id:'bar'}, cfg) 
    ] 
}); 

Une chose que je voudrais ajouter à @ réponse de Mchl est que si vous allez faire la effort de créer votre propre classe, assurez-vous de lui donner un xtype personnalisé. De cette façon, vous pouvez toujours tirer parti des capacités d'instanciation paresseuses d'Ext, même avec vos propres composants personnalisés, au lieu de devoir créer des instances de tout au moment de l'initialisation.