Results 1 to 4 of 4

Thread: Which component need to be extended?

  1. #1
    Touch Premium Member
    Join Date
    Mar 2010
    Posts
    21

    Question Which component need to be extended?

    Hi,
    I need to create a component which should contain a label, textfield and a button. This will be called inside Toolbar.

    What I need to extend to implement this. I tried Ext.Field and Ext.form.Field but of no use.

    PHP Code:
    SearchGroup Ext.extend(Ext.Field,{
    searchGrpName:'Default',
    initComponent: function(){
    var 
    me this;
    var 
    txtLbl = new Ext.form.Label({textme.searchGrpName})
    var 
    txtFld = new Ext.form.TextField({nameme.searchGrpName})
    var 
    config={
     
    items:[txtLbl,txtFld]
    }
    Ext.apply(thisconfig);
    SearchGroup.superclass.initComponent.apply(thisarguments);
    }
    })
     
    Ext.reg('searchfield'SearchGroup);

    SearchToolBar Ext.extend(Ext.Toolbar, {
     
    margins:'0 2 2 2',
       
    initComponent : function(){
      var 
    config = {
        
    items: [
                {
    xtype'searchfield',name'XXXX'},
                {
    xtype'searchfield',name'YYYY'}
         ]
    };
       
    Ext.apply(thisconfig);
       
    SearchToolBar.superclass.initComponent.apply(thisarguments);
     }
    }); 
    Give me some idea ...

    Regards,
    Nagaraj

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    You should be extending Ext.Container (don't forget to set a layout, e.g. hbox).

  3. #3
    Touch Premium Member
    Join Date
    Mar 2010
    Posts
    21

    Default

    Superb... It works fine... Thanks Condor.

    However there is a small problem. The label is not getting displayed when we extend. However when I include "new Ext.form.Label({text: 'XXXX: '})" separately it is showing.

    Please point me what I am missing...

    PHP Code:
    /**
     * XXXX Search plugin
     *
     * @class Ext.ux.grid.Search
     * @extends Ext.util.Observable
     * @param {Object} config configuration object
     */
    SearchGroup Ext.extend(Ext.Container,{
    /**
     * @cfg {Boolean} isSpaceRequired Display a vertical pipe after the button (defaults to true)
     */
    isSpaceRequired:true,
    /**
     * @cfg {String} label Name to display on Toolbar
     */
    labelName:'',
    /**
     * @cfg {String} field Name for the textfield
     */
    fieldName:'',
    initComponent: function(){
    var 
    txtLbl = new Ext.form.Label({textthis.labelName ': '});
    var 
    txtFld = new Ext.form.TextField({namethis.fieldName});
    var 
    tbarBtn = new Ext.Toolbar.Button({iconCls:'searchicon'})
    var 
    config={
     
    layout:'hbox'
    }
    var 
    searchItems = [];
    searchItems.push(txtLbl);
    searchItems.push(txtFld);
    searchItems.push(tbarBtn);
    if(
    this.isSpaceRequired){
     var 
    tSpacer = new Ext.Toolbar.Spacer({width10});
     
    searchItems.push(txtLbl);
    }
    config.items searchItems;
    Ext.apply(thisconfig);
    SearchGroup.superclass.initComponent.apply(thisarguments);
    }
    //eo initComponent
    })
    Ext.reg('searchfield'SearchGroup);
     
    SearchToolBar Ext.extend(Ext.Toolbar, {
     
    margins:'0 2 2 2',
       
    initComponent : function(){
      var 
    config = {
        
    items: [
             
    //new Ext.form.Label({text: 'xxxx: '}), This works fine
                
    {xtype'searchfield'labelName:'XXXX'fieldName'yyyy'},
    };
       
    Ext.apply(thisconfig);
       
    SearchToolBar.superclass.initComponent.apply(thisarguments);
     }
    });
    Ext.reg('searchToolbar'SearchToolBar); 

  4. #4
    Touch Premium Member
    Join Date
    Mar 2010
    Posts
    21

    Default

    Got it. I had messed up here...

    PHP Code:
    var tSpacer = new Ext.Toolbar.Spacer({width10});
     
    searchItems.push(txtLbl); // It should be tSpacer

    Thanks for all your support.

Similar Threads

  1. [SOLVED] Need help with extended component events/listeners
    By Andrew Peacock in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 16 Jun 2010, 4:53 AM
  2. Close button on Extended component
    By sosamv in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 21 Apr 2009, 6:58 AM
  3. Ajax Event In Extended Component
    By boylesw in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 24 Feb 2009, 7:24 AM
  4. Dynamic Extended Component Loading
    By majortool in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 19 Dec 2008, 5:57 AM
  5. [Solved]xtype did not work with my extended component
    By michaelc in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 21 Nov 2008, 4:29 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •