PDA

View Full Version : Having a fixed container



asulhyan
1 Jul 2013, 1:50 PM
If I have two containers placed in one main container, I want the first container to remain fixed. Example - if you say div1 = position: fixed; div2 = position: absolute. div1 will remain fixed even if you need to scroll div2. Something similar I like to achieve through ext layouts. Do we have something in ext that will make the container position fixed.

asulhyan
1 Jul 2013, 2:00 PM
This is what I am trying to achieve. Notice that the title remains fixed. Thanks

http://jsfiddle.net/abhijitsulhyan/DbzCk/


If I have two containers placed in one main container, I want the first container to remain fixed. Example - if you say div1 = position: fixed; div2 = position: absolute. div1 will remain fixed even if you need to scroll div2. Something similar I like to achieve through ext layouts. Do we have something in ext that will make the container position fixed.

slemmon
3 Jul 2013, 11:33 AM
Docking a container should get you what you're wanting to do. Something like:



Ext.widget('panel', {
renderTo: document.body,
height: 150,
border: false,
width: 200,
layout: 'anchor',
autoScroll: true,
dockedItems: [{
dock: 'top',
xtype: 'container',
html: 'Column1 - Title 1 Column1 - Title 2'
}],
items: [{
xtype: 'component',
html: 'column 1'
}, {
xtype: 'component',
html: 'column 2'
}, {
xtype: 'component',
html: 'column 3'
}, {
xtype: 'component',
html: 'column 4'
}, {
xtype: 'component',
html: 'column 5'
}, {
xtype: 'component',
html: 'column 6'
}, {
xtype: 'component',
html: 'column 7'
}, {
xtype: 'component',
html: 'column 8'
}, {
xtype: 'component',
html: 'column 9'
}, {
xtype: 'component',
html: 'column 10'
}, {
xtype: 'component',
html: 'column 11'
}, {
xtype: 'component',
html: 'column 12'
}, {
xtype: 'component',
html: 'column 13'
}]
});

asulhyan
3 Jul 2013, 12:31 PM
Thanks. But do I have to use panel only for that feature, when I am not using any other feature of the panel.


Docking a container should get you what you're wanting to do. Something like:



Ext.widget('panel', {
renderTo: document.body,
height: 150,
border: false,
width: 200,
layout: 'anchor',
autoScroll: true,
dockedItems: [{
dock: 'top',
xtype: 'container',
html: 'Column1 - Title 1 Column1 - Title 2'
}],
items: [{
xtype: 'component',
html: 'column 1'
}, {
xtype: 'component',
html: 'column 2'
}, {
xtype: 'component',
html: 'column 3'
}, {
xtype: 'component',
html: 'column 4'
}, {
xtype: 'component',
html: 'column 5'
}, {
xtype: 'component',
html: 'column 6'
}, {
xtype: 'component',
html: 'column 7'
}, {
xtype: 'component',
html: 'column 8'
}, {
xtype: 'component',
html: 'column 9'
}, {
xtype: 'component',
html: 'column 10'
}, {
xtype: 'component',
html: 'column 11'
}, {
xtype: 'component',
html: 'column 12'
}, {
xtype: 'component',
html: 'column 13'
}]
});

slemmon
3 Jul 2013, 3:08 PM
When using component docking you would need to use panel as that's where dockedItems is introduced into the API:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-dockedItems

asulhyan
4 Jul 2013, 6:39 AM
k, thanks


When using component docking you would need to use panel as that's where dockedItems is introduced into the API:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-dockedItems