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 :D ) 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/

(http://www.senchafiddle.com/full/!hXbnq/)

[mitchellsimoens]

Where can I get it? =D>

[bluehipy]

@mitchellsimoens Get what ? :) code is listed above.

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

[mitchellsimoens]

@mitchellsimoens Get what ? :) code is listed above.

For the sample:
http://www.senchafiddle.com/#hXbnq
http://www.senchafiddle.com/full/!hXbnq/ (http://www.senchafiddle.com/#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!