scroll two ext.TabPanels together - javascript

So I have been searching everywhere for the past week but I cant find a way to get two "Ext.TabPanel to scroll together.
I am making this page to have Ext.Panel which has two items :
var MyBorderPanel = new Ext.Panel({
layout: 'border',
renderTo: 'command_display',
cls: 'auto-width-tab-strip',
height:800,
items: [
{
region: 'west',
title: 'item1: <?=ui::getURLField("item1")?>',
split: true,
width: 500,
minSize: 100,
maxSize: 900,
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel
baseTab
},
{
region: 'center',
title: 'item2 : <?=ui::getURLField("item2")?>',
split: true,
margins: '0 0 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel
compareTab
}
]
});
These items : baseTab and compareTab are described like :
var baseTab = new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 0, // second tab initially active
items: [
<?php
$uihelper->perform("InitItem1Iteration");
$comma = true;
while($uihelper->hasNext("Item1Iteration"))
{
$uihelper->next("Item1Iteration");
?>
<?=(!$comma?",":"")?>
{
title: 'some php code',
id: 'some php code',
autoScroll: true,
contentEl: 'some php code',
}
<?php
$comma = false;
} ?>
]
});
Similar is the Item2.
Now basically what I want is. that these two tab panels have sroll bars, so I want that whenever I scroll one tabPanel, the other tab panel automatically scrolls along with it.
Is it even possible?
Thanks
Andy

Short answer, should be...
You need to access the scroller item of the specific container that you are interested in.
I would start investigating with something in the line of:
listeners: {
scroller: {
scroll: function(scroller, offset) {
console.log(scroller, offset);
}
}
}
I know that containers have scrollers defined, but I do not think that the tabpanel does. So this kind of listener would have to be added to every item (or the item could bubble the event, untested though).
(and of course, once you can capture the scroll event setting the other panel to the same offset shouldn't prove difficult)
Hope that this at least gives you a direction to move in.

You want to be looking at the scroller, as mentioned by #zelexir. Here is a fiddle with my example code http://jsfiddle.net/YgTuc/1/ This is for two panels, but should work just the same for panels in a TabPanel.

Related

Extjs Scroll to position inside tabPanel

I have a window, containing a tabPanel, this tabPanel has 4 tabs.
I wanted to write down something like user manual so I created several panels as blocks, each panel contains some text and pics.
from another button, I want to scroll to a particular postiton in that tab. How can I do it? here is my structure, and let's say I want the button to open the first tab, scrolling to the third panel (id:here).
tabPanel:
var tabs = Ext.createWidget('tabpanel', {
id: 'myTabs',
header: false,
activeTab: 3,
closable: true,
defaults:{ autoScroll:true },
items: [
{
title: 'first',
itemId: 'firstTab',
items: [
{
xtype: 'panel',
html: text39,
cls: 'layout_text1'
},
{
xtype: 'panel',
html: text40,
cls:'layout_subtitle'
},{
xtype: 'panel',
id: 'here',
html: text41,
cls: 'layout_text2'
}]
});
window:
var UMwindow = new Ext.Window({
id: 'myWindow',
name: 'userManual',
closable: true,
floating: true,
width: 900,
height: 600,
items : myTabs,
}).show();
I managed to open the window then activating the first tab using: Ext.getCmp('tabs').setActiveTab('firstTab'); but then I couldn't figure out how to scroll down to the position i need "third panel in my example". do I have to add property to the panel such as position or something?
I would gladly help but I'm unable to get a working jsfiddle demo out of this. I imagine that what you are trying to do requires firing setActiveTab for the tab panel then jumping to the item you would like to show, using that item's offset.

Extjs 4.1 - How to create tabpanel without window or container?

I would like to create tabpanel so it opens when I click on button.
I can create it inside window like so:
var window = new Ext.Window({
id: 'item1',
closable: true,
floating: true,
collapsible: true,
width: 900,
height: 600,
autoScroll: true,
items : mytabpanel
}).show();
but I am wondering how I can do it without window?
it seems like show() doesn't work with tabpanel.
I'm not entirely sure what you're trying to achieve, assuming your code to create the tab panel is correct then I don't see why your code wouldn't work.
If you don't want to render the tab panel in a window, you can always render it to an actual DOM element instead by using the renderTo property.
e.g.
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.getElementById('component'),
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
Where "component" is the id of a container element (E.g. a DIV) within your HTML page. If you call that within the onclick event of the button, hopefully it should do what you require.
If you want a component to float you should use floating mixin

Collapsed panel in border-layout: Permanent expand on title-click

i have 2 panels inside a border-layout. The second one is collapsible with configs 'collapsed' and 'titleCollapse' set. When i click on the title it just shows the panel "temporary" which means that it doesn't stick but collapses automatically after i click anywhere else inside my window. It kind of floats in...
Working example: http://jsfiddle.net/suamikim/LNfm8/
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'panel1',
region: 'center',
flex: 1
},{
xtype: 'panel',
title: 'panel2',
region: 'south',
flex: 1,
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true
}]
}).show();
});
I guess this is a feature of the border-layout because if i put the 2 panels into a box-layout the collapsed panel permanently expands after a click on the title-bar.
I'm aware that the panel would stay expanded if i click on the "double-arrow" or if i click the title a second time after it has been "floated in" but i just don't want this floating-behaviour at all because i experienced it as pretty buggy so far.
I would really appreciate if anyone could tell me how to turn that feature of the border-layout off.
Thanks
Add after titleCollapse property
floatable: false
Look at the fiddle

check item icon in sencha

I am new at Extjs and Sencha. i started to design my UI and i could successfully add an iconCls with buttons. now i need to add icon to a checkitem menue http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.menu.CheckItem
but i couldn't ! even though i use iconCls property.
anyone have done this before ?
If you just want the icon right next to the text, you can just insert an image after the menu item is rendered
Ext.create('Ext.menu.Menu', {
width: 100,
height: 200,
floating: false,
renderTo: Ext.getBody(),
items: [{
xtype: 'menucheckitem',
text: 'select all',
listeners: {
render: function(comp) {
Ext.DomHelper.insertAfter(comp.getEl().down(".x-menu-item-icon"), {
tag: 'img',
src: "http://flyosity.com/images/_blogentries/networkicon/stepfinal2.png",
width: 16,
height: 16
});
}
}
}]
});
Ideally, you'd create a plugin or a subclass so you can reuse this functionality. The above code does not realign the separator, it's single separator for the entire menu, but it should give you a head start

ExtJS: ViewPort with vertical scroll bar

I have 4-5 grid panels, one form panel and want to put it into one viewport.
Here the code:
var panel = new Ext.Viewport({
layout: 'vbox',
items:[SearchForm,1_grid_panel,2_grid_panel,3_grid_panel]
});
It woks very well, but im need horizontal scroll box because 3rd grid panel located under visible area. How I can add this scroll box?
Update: Example of one grid
var 1_grid_panel = new Ext.grid.GridPanel({
store: some_store,
flex:2,
height: heightOfGrid,
autoExpandColumn: 'id_md_dog',
plugins: expander ,
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: new Ext.PagingToolbar({
pageSize: 100,
store: some_store,
displayInfo: true,
displayMsg: 'text',
emptyMsg: "No topics to display"
}),
columns: []
});
Have you tried autoScroll: true ?
Ah, I really forgot. You need to describe next app structure: Viewport->Panel->items(your grids). Panel must have layout: fit
If I correctly understand your problem.

Categories