I have a scrollable panel that shows content larger than the screen
new Ext.Panel({
scroll: 'vertical',
html: 'very larger content here with an anchor. <p id="anchor">'
});
and (on a click event) I want to (programmatically) scroll the panel to a certain HTML element . Preferably even animated. In jquery I would do something along the lines of
$('html,body').animate({ scrollTop: $("#anchor").offset().top }, 'slow');
Turns out what you can do is
function scrollIntoView(el,cmp) {
var dy = cmp.scroller.offset.y + el.getY() - cmp.body.getY();
cmp.scroller.setOffset({x:0, y:-dy}, true);
}
scrollIntoView(Ext.fly('anchor'), Ext.getCmp('panel'));
which probably is quite similar to what scrollIntoView() does internally - haven't looked at that code though. But it's without animation.
You can do this by using the setOffset() function of the scroller object.
Example:
You have your original panel:
var myPanel = new Ext.Panel({
scroll: 'vertical',
html: 'very larger content here with an anchor. <p id="anchor">'
});
To scroll this element, you just call
myPanel.scroller.setOffset(0,20)
You can add a third animation parameter as documented here, but I haven't tested that one yet.
This has been problematic for Sencha Touch as far as I can tell, note that there is no .scrollIntoView() method in Touch like in the other Sencha frameworks. It can be done by integrating iScroll with Touch though, that will give you iScroll methods to accomplish it and make your scrolling more native. Here is an example of how it was done.
Related
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.
I have read a few articles similar to this:
http://www.codeslower.com/2011/7/Using-the-draggable-property-in-ExtJS
http://docs.sencha.com/extjs/4.2.0/#!/guide/drag_and_drop
I have a simple panel:
var panel = Ext.create('Ext.panel.Panel', {
draggable: true,
title: 'Panel',
html: 'Show work orders'
});
It allows me to drag around the container panel - even outside the container panel - but dropping constrains the element to the container.
I need a custom proxy to show the drop target location and size - not just a phantom image of the original panel. Can someone show me some simple code on how I might do this? I instantiate Ext.dd.DragSource and provide custom implementations. But for the life of me I cannot figure out how to get started?
Sample code, articles, tutorials much appreciated :)
Alex
When I have a collapsible panel, ExtJs renders an icon in the tools area to expand/collapse, but also puts a little black triangle between the panels to do exactly the same thing.
I found in the documentation that I can hide the icon in the tools area, using hideCollapseTool:true, but I want to hide that little black triangle instead. How to do that?
Did you try split:false on the panel?
In Ext JS 5 (and likely some earlier versions as well) the split configuration parameter can be either a boolean value or a configuration object for an Ext.resizer.BorderSplitter object.
According to the API the collapsible property can be used to manually show or hide the collapse button in the splitter, so you can set that property to false to hide that button you're talking about.
The solution tested and working in 5.1 looks like this, assuming the panel is contained in a container with a border layout:
{
xtype: 'panel',
region: 'west',
split: {
collapsible: false
}
}
P.S. I know this is 2 years late but I found this question while looking for the solution myself. Figured I might as well share the solution from the API.
Edit: Made a fiddle. Also, it's worth mentioning that this retains all of the other splitter functionality that is lost if you use split: false, such as keeping the panel resizable.
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.
This was pretty easy to do in 3.x, simply by setting the "autoHeight" property of the TabPanel and the same for its children items via the "defaults" config. However it I have yet to seen a way to accomplish this in 4.x. The tabs do size to fit the initial height of their contents, however if the height of that content changes for any reason after init, the tab content is hidden/scrolled.
I did some searching already and in sencha's official forums about this subject the most commonly suggested solution was to configure the tabpanel's parent container's layout as "fit", setting align to "stretch, ect. However in my case, the TabPanel is not a child of another Ext component, it is "renderTo"'ed a straight non-ext generated that sits somewhere in the body of my page, so these solutions wouldn't apply.
Any ideas?
This was my solution in case any one was interested: 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.
I had the same problem, and my solution is not great, but I knew when my content was updated, so it was all just a matter of calling doComponentLayout() on the panel when necessary.