I use this code
win = Ext.create('widget.window', {
title: 'Layout Window',
closable: true,
closeAction: 'hide',
width: 600,
minWidth: 350,
height: 350,
layout: {
type: 'border',
padding: 5
},
listeners : {
render : function(){
alert("render");
},
beforerender : function(){
alert("beforerender");
},
afterrender : function(){
alert("afterrender");
}
},
items: [...
]
});
win.on('move',function(){
alert("ddd");
});
to detect movement of the window component in extjs. It works well i.e it alerts "ddd" but that happens after I move the window and stop dragging it.
I would like to detect when the dragging of the window starts, i.e when I press with cursor on the window title bar and start to drag.
How can I achieve this?
The event you want to bind to if you want to tap into each drag movement is 'drag'.
win.on('move',function(){
console.log("ddd", arguments);
});
Other available drag events include dragstart and dragend.
For more detail see:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dd.DragTracker-event-drag
Related
Opening and Closing WIndow
I have a window called from a grid that launches a window, If I launch just one window, I can drag it any where I want, but If I open the same window twice it becomes undraggable, how do I resolve this. Also if I call a close operation on this window, it closes just one of the window and leaves the other. Can anyone help with this ?
Ext.Window({
title:id.text,
autoHeight: true,
width: 500,
id:'form1',
resizable: false,
plain:true,
y: 100,
autoScroll: true,
//layout: 'fit',
buttonAlign:'center',
items: [{
xtype:'form1'
}],
buttons: [{
text: 'Save',
handler: function(){
}
},{
text: 'Reset',
handler: function(){
}
}]
});
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
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.
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
I have two Ext.Panels, one the scrollingContent, inside another, called wrapper. Wrapper is less large than scrollingContent, so the latter scrolls horizontaly inside his wrapper.
I would like to handle scroll events and the position of scrollingContent inside wrapper after each scroll.
I did not find any solution for this. Any help would be really really appreciated.
Thanks in advance
var scrollingContent = new Ext.Panel({
id: 'p1',
layout: 'hbox',
width: 1200,
height: 380,
//cls: 'blue',
items: itemList
});
var wrapper = new Ext.Panel({
id: 'p2',
scroll: 'horizontal',
width: 800,
height: 380,
cls: 'gray',
items: scrollingContent
});
To access the scroll event of wrapper, access its Scroller after it renders:
var wrapper = new Ext.Panel({
id: 'p2',
scroll: 'horizontal',
width: 800,
height: 380,
cls: 'gray',
items: scrollingContent,
listeners: {
afterrender: function(comp) {
// comp is this Ext.Component == wrapper
comp.scroller.on('scroll',handleScroll);
}
}
});
/**
* Called when wrapper scrolls
*/
function handleScroll(scrollerObject,offsetObject) {
// Do your stuff here
}
Be aware that this event will fire continuously, not just when the scroll starts. If you want that functionality, use the scrollstart event instead.
Here's where I found the info:
http://www.sencha.com/forum/showthread.php?110240-How-to-add-scroll-event-to-Ext.form.FormPanel&s=a478f8ee91ba4cfde57845bf6229c902
For more information on the Scroller class and what it exposes, see the API doc:
http://dev.sencha.com/deploy/touch/docs/?class=Ext.util.Scroller