Results 1 to 2 of 2

Thread: Wrapping Panel Items in custom template

  1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    7
    Vote Rating
    0
      0  

    Question Wrapping Panel Items in custom template

    Hi,

    I am trying to get the items (List,Carousel etc.) displayed in a Panel wrapped inside a custom Template.
    I basically want a box with a header around each item.

    I tried to Extend the Container Layout and it gave me semi-good results. However I believe I am doing something wrong as i get duplicates of the widget* divs (i.e. 4 carousels in a panel will end up with 8 boxes, one wrapped around each carousel which is fine, and 4 empty ones).

    If somebody could point out where I went wrong or if my approach entirely sucks and theres a prefered way of doing it please let me know.

    Any help is appreciated.

    Here is the code:

    Code:
    Ext.layout.Dashboard = Ext.extend(Ext.layout.ContainerLayout, {
    	/**
    	  * @private
    	  */
    	type: "dashboard",
    
    	/**
    	  * @private
    	  */
    	onLayout: function() {
    		Ext.layout.Dashboard.superclass.onLayout.call(this);
    		this.prepareItems();
    	},
    
    	/**
    	  * @private
    	  */
    	prepareItems: function() {
    		var items = this.getLayoutItems(),
    			ln = items.length,
    			item, i;
    
    		for (i = 0; i < ln; i++) {
    			item = items[i];
    			item.doComponentLayout();
    		}
    	},
    
    	/**
    	  * @private
    	  */
    	 
    	configureItem: function(item, position) {
    		var box=item.el.wrap({cls: 'widgetBox'});
    		
    		item.el.wrap({cls: 'widgetBoxContent'});
    		item.el.wrap({cls: 'widgetBody'});
    		
    		item.el.createChild({
    				html: 'test',//item.title,
    				cls: 'widgetBoxHeader'
    			},box.first());
        },
    	
    	renderItem: function(item, position, target) {
    		Ext.layout.Dashboard.superclass.renderItem.call(this, item, position, target);
    	}
    });
    
    Ext.regLayout("dashboard", Ext.layout.Dashboard);

  2. #2
    Sencha User
    Join Date
    Apr 2011
    Posts
    7
    Vote Rating
    0
      0  

    Default

    So I have no idea if this approach is correct but I ended up with the following that seems to work for now.

    The following code will wrap any sencha item (carousel,list etc.) into several divs for giving them a boxed look like this:

    HTML Code:
    <div class="widgetBox" id="ext-gen1036" style="width: 1908px; height: 360px; ">
    	<div class="widgetBoxHeader" id="ext-gen1037">test</div>
    	<div class="widgetBoxContent" id="ext-gen1035">
    		<div class="widgetBody" id="ext-gen1034">
    			<div id="ext-comp-1013" class=" x-carousel x-carousel-light x-carousel-horizontal"> SENCHA CAROUSEL STUFF</div>
    		</div>
    	</div>
    </div>
    Code is this (still open to suggestions):

    Code:
    Ext.ns("Ext.layout");
    
    Ext.layout.Dashboard = Ext.extend(Ext.layout.ContainerLayout, {
    	/**
    	  * @private
    	  */
    	type: "dashboard",
    
    	/**
    	  * @private
    	  */
    	onLayout: function() {
    		Ext.layout.Dashboard.superclass.onLayout.call(this);
    			
    		this.prepareItems();
    	},
    	
    	/**
    	  * @private
    	  */
    	prepareItems: function() {
    		var items = this.getLayoutItems(),
    			ln = items.length,
    			item, i;
    
    		for (i = 0; i < ln; i++) {
    			item = items[i];
    			
    			if(!item.el.hasCls("widgetBox")) {
    				item.el=item.el.wrap({cls: 'widgetBody'});
    				item.el=item.el.wrap({cls: 'widgetBoxContent'});
    				item.el=item.el.wrap({cls: 'widgetBox'});
    
    				//item.el.addCls("NOMNOM");
    				item.el.createChild({
    						html: 'test',//item.title,
    						cls: 'widgetBoxHeader'
    				},item.el.first());
    			}
    
    			item.doComponentLayout();
    		}
    	}
    });
    
    Ext.regLayout("dashboard", Ext.layout.Dashboard);

Similar Threads

  1. ComboBox custom template
    By bkraut in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 7 Oct 2009, 7:34 AM
  2. Custom grouping template on grid
    By vk214 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 21 Aug 2008, 7:13 AM

Posting Permissions

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