Results 1 to 7 of 7

Thread: How do I create a custom container with more than one HTML element?

  1. #1
    Ext User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    26
    Vote Rating
    0
      0  

    Default How do I create a custom container with more than one HTML element?

    Hi everyone,

    I'm attempting to build a custom container which will contain standard components, as does any other container in Ext. Usually when I do this, I do something like the following:

    Code:
    Shortcuts = function(config) {
      //constructor code...
    };
    Ext.extend(Shortcuts, Ext.Container, {
      onRender: function(ct, position) {
        this.el = ct.createChild({
          tag: 'div',
          cls: 'shortcuts'
        });
      }
    });
    Which just creates a div for the container, into which the child components are then added - like this:

    HTML Code:
    <div class="shortcuts">
      <!-- child components will be placed in here -->
    </div>
    That's fine, but the markup I want is more like this:

    HTML Code:
    <div class="shortcuts-wrapper">
      <div class="shortcuts-header">
      <div class="shortcuts">
        <!-- child components will be placed in here -->
      </div>
      <div class="shortcuts-footer">
    </div>
    I'd expect to be able to do something like this:

    Code:
    Shortcuts = function(config) {
      //constructor code...
    };
    Ext.extend(Shortcuts, Ext.Container, {
      onRender: function(ct, position) {
        this.wrapper = ct.createChild({
          tag: 'div',
          cls:  'shortcuts-wrapper'
        });
        
        this.wrapper.createChild({
          tag: 'div',
          cls: 'shortcuts-header'
        });
    
        this.el = this.wrapper.createChild({
          tag: 'div',
          cls: 'shortcuts'
        });
        
        this.wrapper.createChild({
          tag: 'div',
          cls: 'shortcuts-footer'
        });
      }
    });
    Unfortunately this doesn't work, the markup generated ends up like this:

    HTML Code:
    <div class="shortcuts">
      <!-- child components will be placed in here -->
    </div>
    <div class="shortcuts-wrapper">
      <div class="shortcuts-header">
      <div class="shortcuts-footer">
    </div>
    The shortcuts div has popped out of the wrapper, presumably because the wrapper is disregarded by the parent container's layout manager (a TableLayout in this case). The question is, how can achieve the behaviour I want here?

    One last thing I tried was this:

    Code:
    onRender: function(ct, position) {
      this.el = ct.createChild({
        tag: 'div',
        cls:  'shortcuts-wrapper'
      });
      
      this.el.createChild({
        tag: 'div',
        cls: 'shortcuts-header'
      });
      
      this.el.createChild({
        tag: 'div',
        cls: 'shortcuts-footer'
      });
    }
    But of course this ended up with:

    HTML Code:
    <div class="shortcuts-wrapper">
      <div class="shortcuts-header">
      <div class="shortcuts-footer">
      <div class="shortcuts">
        <!-- child components will be placed in here -->
      </div>
    </div>
    Almost right but not quite!

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

    Default

    Does this work?
    Code:
    Ext.extend(Shortcuts, Ext.Container, {
    	onRender: function(ct, position) {
    		this.autoEl = {
    			cls:  'shortcuts-wrapper',
    			children: [{
    				cls: 'shortcuts-header'
    			},{
    				cls: 'shortcuts'
    			},{
    				cls: 'shortcuts-footer'
    			}]
    		};
    		Shortcuts.superclass.onRender.apply(this, arguments);
    		this.shortcuts = this.el.child('.shortcuts');
    	},
    	getLayoutTarget: function(){
    		return this.shortcuts;
    	}
    });

  3. #3
    Ext User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    26
    Vote Rating
    0
      0  

    Thumbs up Yes!

    You're a beautiful man - thank you

    I wasn't aware of getLayoutTarget, that really helps.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,893
    Vote Rating
    89
      0  

    Default

    Try just

    Code:
    new Ext.Panel({
        baseCls: 'shortcuts',
        header: true,
        headerAsText: false,
        footer: true
    })

    This creates a Panel with header and footer, but with special class names:

    Code:
    <div class="shortcuts" id="ext-comp-1082">
        <div class="shortcuts-header x-unselectable" id="ext-gen601" style="-moz-user-select: none;"/>
        <div class="shortcuts-bwrap" id="ext-gen602">
            <div class="shortcuts-body" id="ext-gen603"/>
            <div class="shortcuts-footer" id="ext-gen604"/>
        </div>
    </div>

  5. #5
    Ext User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    26
    Vote Rating
    0
      0  

    Default

    You're quite pretty too Animal, thanks for the tip.

    It's still good to know how to make more customised layouts as well, getLayoutTarget isn't in the API docs as far as I can see, nor had I seen any examples about it anywhere before.

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,893
    Vote Rating
    89
      0  

    Default

    OK, I just added these doc comments:

    Code:
    	/**
    	 * <p>Returns the Element to be used to contain the child Components of this Container.</p>
    	 * <p>An implementation is provided which returns the Container's {@link #getEl Element}, but
    	 * if there is a more complex structure to a Container, this may be overridden to return
    	 * the element into which the {@link #layout layout} renders child Components.</p>
    	 * @return {Ext.Element} The Element to render child Components into.
    	 */

  7. #7
    Ext User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    26
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by Animal View Post
    OK, I just added these doc comments:
    Thanks for that. I don't know how long it takes for changes such as that to be made live to the docs so in the meantime I've written a hopefully comprehensive blog post about this at http://edspencer.net/2009/01/custom-...ith-extjs.html

    Thanks again for your help guys

Posting Permissions

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