1. #1
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default Ext.layout.Default extension: layout.cartesian

    Ext.layout.Default extension: layout.cartesian


    I was in need for a way to display some entities in a cartesian way, so I have extended the default layout. It has some limitation ( it resize the container items because I wanted this way ) but it can be done to work with items of different sizes too.

    Maybe I will also write a bird eye view for it

    PHP Code:
    Ext.application(
    {   
     
    name'CartesianApp',        
    launch: function() {        
    Ext.Viewport.add(            
    {                
    xtype:'panel',                
    layout:'vbox',                
    items:[                    
    {
    xtype:'toolbar',title:'Cartesian layout',docked:'top'},                    
    {
                            
    xtype:'panel',
                            
    flex:1,
                            
    scrollable:'both'
                           
    layout:'cartesian'
                           
    defaults:{ 
                               
    xtype:'button'
                               
    style:{
                                    
    'font-size':'11px' 
                               
    }
                            },
                            
    items:[
                                {
    x:0,y:0,text:"Section1"},
                                {
    x:1,y:0,text:"Section2"},
                                {
    x:2,y:0,text:"Section3"},
                                {
    x:0,y:1,text:"Section4"},
                                {
    x:1,y:1,text:"Section5"},
                                {
    x:2,y:1,text:"Section6"}, 
                               {
    x:0,y:2,text:"Section7"},  
                              {
    x:2,y:2,text:"Section8"},  
                              {
    x:10,y:10,text:"Section11"},
                                {
    x:11,y:10,text:"Section12"}, 
                               {
    x:12,y:10,text:"Section13"},
                                {
    x:10,y:11,text:"Section14"}, 
                               {
    x:11,y:11,text:"Section15"}, 
                               {
    x:12,y:11,text:"Section16"},
                                {
    x:10,y:12,text:"Section17"}, 
                               {
    x:12,y:12,text:"Section18"}
                            ] 
                       }
                    ]
                }
            ) ;
                }});
    Ext.define(
        
    'CartesianApp.layout.Cartesian'
       {        
           
    extend:'Ext.layout.Default',
            
    alias:'layout.cartesian'
           
    config:{
                
    marginX:20,
                
    marginY:20,
                
    gapX:25
               
    gapY:25
               
    width:55,
                
    height:55 
           
    }, 
           
    constructor: function(container) { 
               
    this.callParent(arguments);            //container.innerElement.setStyle({'position':'relative'}); 
               
    this.minX=0
               
    this.minY=0;
            }, 
           
    doItemAdd: function(itemindex) { 
               
    this.callParent(arguments);
                            if (
    item.isInnerItem()) {
                    var 
    Number(item.getInitialConfig('y')), 
                       
    Number(item.getInitialConfig('x')), 
                       
    left this.getMarginX()+x*(this.getGapX()+this.getWidth()),
                        
    top this.getMarginY()+y*(this.getGapY()+this.getHeight());   
                       
    item.setWidth(this.getWidth()); 
                   
    item.setHeight(this.getHeight());
                                    
    item.element.setStyle(
                        {                        
    'position':'absolute'
                           
    'top':top+'px'
                           
    'left':left+'px' 
                       
    }  
                  );  
                                  if(
    top>&& left>0)                {     
                   if(
    this.minX xthis.minX =x;  
                      if(
    this.minY ythis.minY y
                   }                
                 
    this.container.innerElement.setStyle(
                                 {                    
                                      
    width:2*this.getMarginX()+(this.minX+1)*(this.getGapX()+this.getWidth())- this.getGapX()+'px',
                        
    height:2*this.getMarginY()+(this.minY+1)*(this.getGapY()+this.getHeight())- this.getGapY()+'px',
                        
    display:'block',
                        
    position:'relative' 
                   
    });
                                                                }
                        }
    }); 
    http://www.senchafiddle.com/full/!hXbnq/


  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Where can I get it?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    @mitchellsimoens Get what ? code is listed above.

    For the sample:
    http://www.senchafiddle.com/#hXbnq
    http://www.senchafiddle.com/full/!hXbnq/

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by bluehipy View Post
    @mitchellsimoens Get what ? code is listed above.

    For the sample:
    http://www.senchafiddle.com/#hXbnq
    http://www.senchafiddle.com/full/!hXbnq/
    Where can I download? It may be a good idea to have a way to download it instead of scraping code.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Oh... I am kinda new to sencha. Is there a good practice regarding the source presenting/downloading ?
    Hm... maybe GitHub?

    But this one here is fairly simple


    Thank you!

Thread Participants: 1

Tags for this Thread