créer des composants personnalisés et re l'utiliser

Question

je suis nouveau poste, je veux créer un composant personnalisé contenant un formulaire et l'utiliser en vous inscrivant comme un xtype, où je veux:

MyComponent = Ext.extend(Ext.FormPanel, { 
initComponent: function() { 
    Ext.apply(this, { 
     labelWidth: 50, 
     // label settings here cascade unless overridden 
     items: [{ 
      xtype: 'label', 
      text: 'Name' 
     }, 

     { 
      xtype: 'textfield', 
      label: 'First Name', 
      name: 'firstname', 

      id: 'firstname', 
      allowBlank: true 
     }, 
     { 
      xtype: 'label', 
      text: 'Last Name', 
      style: { 
       'color': 'black', 
       'font-size': '10px' 
      } 
     }, 
     { 
      xtype: 'textfield', 
      label: 'lastname', 

      name: 'lastname', 
      id: 'lastname' 
     }, 
     { 
      xtype: 'label', 
      text: 'Teams' 
     }, 
     { 
      xtype: 'button', 

      text: 'Save', 

      handler: function() {}, 
      id: 'save', 
     }, 
     { 
      xtype: 'button', 
      text: 'cancel', 
      handler: function() { //Ext.Msg.alert('Status', 'Changes saved successfully.'); 
       Ext.example.msg(' Click', 'You cancelled'); 
      } 
     } 
     ] 
    }); 
    MyComponent.superclass.initComponent.apply(this, arguments); 
}, 
onRender: function() { 
    MyComponent.superclass.onRender.apply(this, arguments); 
} 
}); 

Ext.reg('mycomponentxtype', MyComponent); /* paste in your code and press Beautify button */ 
if ('this_is' == /an_example/) { 
    do_something(); 
} else { 
    var a = b ? (c % d) : e[f]; 
} 

Answer 1

Lorsque je crée mes propres composants i font:

Ext.define('MyApp.view.dialog.MyDialog', { 
    'extend' : 'Ext.window.Window', 
    'alias' : 'widget.MyDialog',//declare xour own xtype here 
    'title' : 'My Dialog', 
    'items' : [{ 
     'xtype' : 'textfield', 
     'fieldLabel' : 'Surename', 
     //other config here 
    }] // other items here 
}); 

Ensuite, vous pouvez dire:

Ext.widget('MyDialog').show();