Ext.layout.Default extension: layout.cartesian

[bluehipy]

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

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(item, index) { 
           this.callParent(arguments);
                        if (item.isInnerItem()) {
                var y = Number(item.getInitialConfig('y')), 
                   x = 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>0 && left>0)                {     
               if(this.minX < x) this.minX =x;  
                  if(this.minY < y) this.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/

[mitchellsimoens]

Where can I get it?

[bluehipy]

@mitchellsimoens Get what ? code is listed above.

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

[mitchellsimoens]

@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.

[bluehipy]

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!