ExtJS Repositioning/resizing toolbar on window resize - extjs

I have a toolbar inside a simple container. They get rendered on a window's div. When I resize the window the toolbar remains stationary. If the window gets smaller the toolbar starts disappearing (overflowing outside). If the window gets bigger the toolbar stays in its position instead of trying to remain to the far right where it started. I've tried the resize and enable overflow configs but nothing seems to work. I'm thinking that its positioning through the div might be the problem but I'm not sure how to test or fix that. Any ideas?
Some sample code:
var toolbar = Ext.create('MyToolbar');
var toolbarContainer = Ext.create('widget.contaienr', {renderTo: 'myDiv', items: [toolbar]});
.
.
.
<div id='myDiv'></div>

Check this function in the EXtJs docs
onWindowResize( fn, scope, [options] )
Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds), passes new viewport width and height to handlers.
Example code looks like the below(I guess you have to write it in your afterRender .(You have to add this event and then fire it.))
Adding the event in the init component looks like below
this.addEvents('setInboxTileSource');
Firing the event in the afterRender looks like below
Ext.EventManager.onWindowResize(function (w, h) {
this.fireEvent('BROWSER_WINDOW_RESIZE')
}, this, {buffer: 150});
You have to listen the event and set your width and height for your toolbar.
listeners: {
BROWSER_WINDOW_RESIZE: this.handleResize,
scope: this
}
handleResize:function(){
this.setHeight(Ext.getBody().getViewSize().height - 270);
this.setWidth(Ext.getBody().getViewSize().width- 100);
}
Hope this helps you...

Toolbars should not be configured that way. If you have a window, it should be configured this way:
Ext.create('Ext.window.Window',{
title:'some title'
,width:400
,height:300
,tbar:[{
// here come toolbar items
}]
});
For more examples see http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/menu/menus.html and other toolbar examples.

Related

Extjs Gridpanel buffered renderer scroll not reseting

I have been trying to implement a buffered grid panel using the buffered store and "bufferedrenderer" plugin with ExtJs 5.1.1. When I load lesser content than the previously loaded content, the scroll is not reseting. I still have to scroll long way down to find my content on the panel. The height of the content area remains as the previous content's height. It would be really grateful if somebody can give me a suggestion.
Thank you in advance.
We experienced the same when switching from a grid with many elements (+ some scrolling done ) to the same grid with no element.
We solved this by overriding Ext.data.Store to throw a clear event when clearData() is called. The clear event triggers a call to onStoreClear() of
Ext.grid.plugin.BufferedRenderer. This solved the problem for us.
Ext.define('Ext.data.Store', {
override: 'Ext.data.Store',
config: {
forceClearEventOnLoad: false
},
clearData: function(isLoad, data) {
if(this.forceClearEventOnLoad && isLoad) {
this.fireEvent('clear', this, data);
}
this.callParent(arguments);
}
});
Dont forget to set forceClearEventOnLoad:true in your store config.

Combined Draggable, Resizeable and Aloha Editor ExtJS component

I am trying to create an Ext.Component, that I can use with Draggable, Resizable, Float and Aloha Editor.
Currently I have tried:
afterRender: function(me) {
Aloha.jQuery('#' + me.myId).aloha();
document.getElementById(me.myId).setAttribute("draggable", true);
}
This one doesn't allow it to be draggable, but edit works.
Aloha.jQuery('#' + me.myId).aloha();
draggable: true,
resizeable: true,
float: true
This one allows it to be re-sized and dragged around, however it aloha doesn't work, therefor it is not editable.
Aloha.jQuery('#' + me.myId).draggable();
Aloha.jQuery('#' + me.myId).aloha();
Again this one allows for editing but not dragging.
It seems like the moment the handles come on for a resize or drag event the aloha editor stops working, however if there are no handles the drag and resize stop working. Is there any advice, or has anyone encountered this before?
To Solve this, I did a Move Handler, HTML5 Style:
http://www.w3schools.com/html/html5_draganddrop.asp
And made my main canvas the drop area.
Next I added a small div inside the component which is editable.
and was able to make that div aloha. Then the default resizer works as long as you make the edges transparent.

ExtJS 4.0.7 scrollTo() scrolls but doesn't move scroll bar slider?

I have a tree panel and am trying to do an animated scroll to certain locations. I'm doing something like this:
myTreePanel.getView().getEl().scrollTo('top', yCoord, true /*animate*/);
The view scrolls to the correct location, but the "slider" in the scroll bar doesn't move. Any ideas why?
Some additional info: if I do the following instead, the scrollbar slider moves correctly (but of course scroll() doesn't support animation--I'd prefer to use .scrollTo() so the user can see the scrolling):
myTreePanel.getView().getEl().scroll('down', yDiff);
Thanks for any help/advice!
#MoleculeMan's suggestion of disabling the custom scrollbars (which ExtJS uses in 4.0.x but not in 4.1) does work. After doing this you can call myTreePanel.getView().getEl().scrollTo('top', yCoord, true) and everything works as expected: scrolling is animated and the scrollbar moves. The only problem is that it seems to break the ability for the view to scroll if you use the up/down arrow keys to move through the tree.
It's not very elegant, but the work-around I'm going to use is this:
// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);
// Wait 300ms then sync the scroll bar with the tree view
setTimeout(function() {
myTreePanel.setScrollTop(yCoord);
}, 300);
This has the cosmetic disadvantage of the scroll bar "jumping" into place instead of smoothly moving with the animation, but the benefit of not breaking the up/down key scrolling. Also, because it doesn't involve changing config params or overriding the tree view's style, I'm assuming it will still work once we upgrade to ExtJS 4.1 (i.e., the timer call to setScrollTop() will be unnecessary but shouldn't break anything).
Note that calling setScrollTop() moves the scrollbar, but also causes the view to "jump" to that position. You therefore need to ensure that the timer doesn't fire until after the animation finishes. I'm actually using some custom code to poll every 10ms and see if the destination row is visible, then calling setScrollTop(), instead of using a timer that always waits for some hard-coded amount of time:
var scrollToRowNum = 5;
var scrollToEl = getElementForNode(myTreePanel.getRootNode().childNodes[scrollToRowNum]);
var yCoord = scrollToEl.getOffsetsTo(scrollToEl.parent())[1];
// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);
// Check every 10ms to see if animation is done, then sync scrollbar
var timerId = setInterval(function() {
if( myTreePanel.isTreeElementWithinVisibleArea(scrollToEl) ) {
clearInterval(timerId);
myTreePanel.setScrollTop(yCoord);
}
}, 10);
The isTreeElementWithinVisibleArea() function just checks to see if element's current Y coordinate (absolute) is between the top and bottom of the tree view box.
Not surprising. They use their own scrollbar. The correct code would be:
myTreePanel.verticalScroller.setScrollTop(yCoord);
However, it doesn't support animation either. So I recommend to get rid of custom scrollbar as I've described here and use your original code.

ExtJS4 - Extending Ext.tab.Panel to prevent setting of height values

I am migrating an application from ExtJS 3.x to v4 and have been having some troubles with the TabPanel's now that the "autoHeight" property has been removed. I know that if you do not explicitly define a height for the panel it is assumed to be "auto height", but that is only true to a degree.
In ExtJS4, a tab panel with no height set will still have inline css height values set on the tab panel's containing divs, and those heights are calculated from the initial height of each tab item's content. And yes, if you update the height of any child components of the tab items, the height of the tab will be recalculated to fit it, or if the tab contains raw HTML and the tab's update() method is used to change that content, its height again, will be adjusted to fit.
Where the issue is, in my application anyway, is that I update the raw HTML content of those tab's using methods other than those in ExtJS's framework, such as jQuery.html(). Since the tab panel is not being notified of this change to the content, it does not recalculate the height value of the tab.
To get around this all I want to do is ensure that the tab panel's containing elements always are set to height:auto when rendered, re-rendered, or anything else. I'm assuming to accomplish this I would need to extend the TabPanel, but i don not know where to start as far as what methods to override, ect. Any thoughts?
This is what I ended up doing. It's definitely not ideal, pretty hacky but it seems to work ok. Maybe someone will better see what I'm try to accomplish now, and can come up with a better implementation :-)
Ext.define('Ext.tab.AutoHeightPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.autoheighttabs',
constructor: function(cnfg){
this.callParent(arguments);
this.initConfig(cnfg);
this.on('afterlayout', this.forceAutoHeight, this);
this.on('afterrender', this.forceAutoHeight, this);
this.on('resize', this.forceAutoHeight, this);
},
forceAutoHeight: function(){
this.getEl().applyStyles({height : 'auto', overflow : 'visible'});
this.items.each(function(item, idx, len) {
if(Ext.isDefined(item.getEl())) item.getEl().applyStyles({height : 'auto', overflow : 'visible'});
});
}
});
You may want to add a 'margin-bottom' value to the style config of your tab panel to prevent content from butting up against the bottom of the panel.
The catchy part is making ExtJS aware that the component is updated. You need to basically, recalculate the component layout. You can use the method doLayout( ) available with the Panel class. By calling this, you are forcefully asking to the layout to be recalculated and refreshed. I think this should help you out.

How to update the panel after removing items in sencha

I am using sencha to update a panel as follows.
I will have a handler for a button.
In that i am removing a docked panel from a panel. and then adding the some new panel as a docked item.
But the contents of the panel are not appearing. They are appearing only when i change the size of the browser window, i.e., maximize it or restore it.
How can the problem be solved?
The code for the problem is as shown below.
handler: function(){
chaptersPanel.removeDocked(chaptersList[chaptersPanel.getStory()]);
chaptersPanel.insertDocked(0,chaptersList[this.no]);
chaptersPanel.setStory(this.no);
chaptersPanel.doLayout();
mainPanel.setActiveItem("chaptersPanel");
}
YOu need to do a doComponentLayout() sometimes. Sencha Touch is a little flakey about it. doLayout is supposed to handle the componentlayout, but it doesn't always

Resources