Code:
var collapseSize = 12;//26;
Ext.onReady(function() {
Ext.define('LinkLabel', {
extend: 'Ext.form.Label',
alias: 'widget.linklabel',
config: {
cls: 'link-label',
overCls: 'link-label-over',
clickListener: null
},
constructor: function(config) {
LinkLabel.superclass.constructor.call(this, config);
this.initConfig(config);
return this;
},
listeners:{
scope: this,
'render': function(c) {
c.getEl().on('click', function() {
//logInfo("click");
if(this.clickListener) {
this.clickListener(this);
}
}, c);
}
}
});
Ext.define('SliderToolbar', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.slidertoolbar',
anchor: 'bottom',
region: 'south',
height: 27,
items: [
{
//iconCls: 'pagenext',
text: 'Press me!',
handler: function() {
}
}
],
constructor: function(config) {
SliderToolbar.superclass.constructor.call(this, config);
this.initConfig(config);
return this;
}
});
var eastPanel = Ext.create('Ext.panel.Panel', {
title: '4 four',
hideCollapseTool: true,
collapseDirection : 'right',
collapsible: true, // make collapsible
//flex: 1,
style: 'z-index: 3',
bbar: Ext.create('widget.slidertoolbar'),
html: 'new added panel inside'
});
var addPanel = Ext.create('Ext.panel.Panel', {
title: '5 five',
hideCollapseTool: true,
collapseDirection : 'right',
collapsible: true, // make collapsible
//flex: 1,
style: 'z-index: 4',
bbar: Ext.create('widget.slidertoolbar'),
html: 'new added panel no 5'
});
var addPanel2 = Ext.create('Ext.panel.Panel', {
title: '6 six',
hideCollapseTool: true,
collapseDirection : 'right',
collapsible: true, // make collapsible
style: 'z-index: 5',
bbar: Ext.create('widget.slidertoolbar'),
html: 'new added panel no 6'
});
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
align: 'stretch',
type: 'vbox'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
id: 'oneContainer',
xtype: 'panel',//container',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1,
listeners:{
resize: {
fn: function(el, width, height, oldWidth, oldHeight, eOpts ) {
var num = this.items.length;
var cWidth = getCurrentWidth();
var currPos = 0;
for(i=0;i<num;i++) {
var itm = this.items.items[i];
itm.currentPos = currPos;
if(itm.isDisabled()){
currPos = currPos + collapseSize;
} else {
currPos = currPos + cWidth;
}
if(itm.currentPos){
itm.setPosition(itm.currentPos,0);
}
itm.setWidth(cWidth);
}
// dont know why a anim is necessary?!
for(i=0;i<num;i++){
Ext.create('Ext.fx.Anim', {
target: this.items.items[i],
duration: 0,
from: {
},
to: {
left: this.items.items[i].currentPos?this.items.items[i].currentPos:0
}
});
}
console.info("resize panel");
}
},
add: {
fn: function(container, component, index, eOpts ){
if(this.rendered){
var num = this.items.length;
if(num>2){
var pos = this.getWidth();
for(i=num;i>2;i--){
pos = pos - collapseSize;
this.items.items[i-1].currentPos = pos;
this.items.items[i-1].setDisabled(true);
}
pos = this.getWidth()-((num-2)*collapseSize);
this.items.items[1].currentPos = pos/2;
}
var cWidth = getCurrentWidth();
for(i=0;i<=index;i++) {
var itm = this.items.items[i];
if(itm.currentPos){
itm.setPosition(itm.currentPos,0);
}
itm.setWidth(cWidth);
}
// no idea why anim is necessary
for(i=0;i<num;i++){
Ext.create('Ext.fx.Anim', {
target: this.items.items[i],
duration: 100,
from: {
},
to: {
left: this.items.items[i].currentPos
}
});
}
console.info("add panel " + index);
}
}
}
},
tbar:
{
xtype: 'toolbar',
anchor: 'bottom',
region: 'south',
items: [
{ xtype: 'tbspacer', width: 10 },
{itemId: '0', xtype: 'linklabel', text:"?"},
{ xtype: 'tbspacer', width: 10 },
{itemId: '1', xtype: 'linklabel', text:"?"},
{ xtype: 'tbspacer', width: 10 },
{itemId: '2', xtype: 'linklabel', text:"?"},
{ xtype: 'tbspacer', width: 10 },
{itemId: '3', xtype: 'linklabel', text:"?"},
{ xtype: 'tbspacer', width: 10 },
{itemId: '4', xtype: 'linklabel', text:"?"},
{ xtype: 'tbspacer', width: 10 },
{itemId: '5', xtype: 'linklabel', text:"?"},
]
},
items: [
{
id: 'oneOne',
xtype: 'panel',
title: '1 one',
style: 'z-index: 0',
collapsible: true, // make collapsible
hideCollapseTool: true,
collapseDirection : 'left'
},
{
id: 'oneTwo',
xtype: 'panel',
style: 'z-index: 1',
collapsible: true, // make collapsible
bbar: Ext.create('widget.slidertoolbar'),
hideCollapseTool: true,
collapseDirection : 'left',
title: '2 two',
html: 'i am 2'
},
{
id: 'twoOne',
xtype: 'panel',
title: '3 three',
style: 'z-index: 2',
collapsible: true, // make collapsible
bbar: Ext.create('widget.slidertoolbar'),
hideCollapseTool: true,
collapseDirection : 'left'
}
]
}
]
});
me.callParent(arguments);
}
});
function getCurrentWidth(){
var cmp = Ext.getCmp('oneContainer');
var num = cmp.items.length;
return (cmp.getWidth()-((num-2)*collapseSize))/2;
}
var sliderfct = function(currIdx) {
var container = Ext.getCmp('oneContainer');
var east = container.items.items[currIdx-1];
var center = container.items.items[currIdx];
var west = container.items.items[currIdx+1];
var num = container.items.length;
var cWidth = getCurrentWidth();
container.down('toolbar').down('#' + (currIdx-1).toString()).setText('?');
container.down('toolbar').down('#' + (currIdx).toString()).setText('?');
container.down('toolbar').down('#' + (currIdx+1).toString()).setText('?');
if(center.x<=east.x+collapseSize) {
east.setDisabled(false);
center.currentPos = east.x+cWidth;
if(west) {
west.currentPos = east.x+2*cWidth;
west.setDisabled(true);
}
for(i=1;i<num;i++){
Ext.create('Ext.fx.Anim', {
target: container.items.items[i],
duration: 500,
from: {
},
to: {
left: container.items.items[i].currentPos
}
});
}
} else {
east.setDisabled(true);
center.currentPos = east.x+collapseSize;
if(west) {
west.currentPos = east.x+collapseSize+cWidth;
west.setDisabled(false);
}
for(i=1;i<num;i++){
Ext.create('Ext.fx.Anim', {
target: container.items.items[i],
duration: 500,
from: {
},
to: {
left: container.items.items[i].currentPos
}
});
}
}
}
Ext.create('MyApp.view.MyViewport', {});
var scenter = Ext.getCmp('oneTwo').down('toolbar').down('button');
if(scenter) {
scenter.on('click', function(){sliderfct(1)} );
}
scenter = Ext.getCmp('twoOne').down('toolbar').down('button');
if(scenter) {
scenter.on('click', function(){sliderfct(2)} );
}
Ext.getCmp('oneContainer').add(eastPanel);
scenter = eastPanel.down('toolbar').down('button');
if(scenter) {
scenter.on('click', function(){sliderfct(3)} );
}
Ext.getCmp('oneContainer').add(addPanel);
scenter = addPanel.down('toolbar').down('button');
if(scenter) {
scenter.on('click', function(){sliderfct(4)} );
}
Ext.getCmp('oneContainer').add(addPanel2);
scenter = addPanel2.down('toolbar').down('button');
if(scenter) {
scenter.on('click', function(){sliderfct(5)} );
}
});
and css:
Questions on absolute layout
Reply With Quote
