calling updateLayout() is causing the parent container to "jump" to the top. Setting the viewconfig on the Ext.Container.container does not seem to help
viewConfig: {
preserveScrollOnRefresh: true
},
As suggested by Alexander, overriding beforeLayout and afterLayout for the parent container did the trick.
beforeLayout: function() {
var me = this,
scroller = me.getScrollable();
me.callParent(arguments);
if (scroller) {
me.savedScrollPos = scroller.getPosition();
}
},
afterLayout: function() {
var me = this,
scroller = me.getScrollable();
me.callParent(arguments);
if (scroller && me.savedScrollPos) {
scroller.scrollTo(me.savedScrollPos);
}
},
updateLayout is not the same as refresh, and preserveScrollOnRefresh only preserves scroll on refresh. You could look into ExtJS code how they did it (they don't really "preserve" scroll, they store the scroll position and scroll back to the correct position after refresh) and implement the same for updateLayout.
To cover more options for anyone having similar problems:
Changing the layout
As mentioned in question Avoid Ext.form validation scrolling to top, sometimes just changing the layout can do the trick.
For example form in ExtJS 4.x had anchor layout specified by default (ExtJS 6 has vbox), which caused the form to scroll to top on form field validation, if you change the layout to vbox, it does not scroll to top.
Suspending layout
If you have a component, that does not need to update the layout with its change, you can use the suspendLayout configuration.
Related
I have panel wiht toolbar with buttons. Panel resizable when it small buttons hide in menu. In menu it show icon and value of overflowText. But on click button i need change overflowText.
expandClick: function (btn) {
var me = this;
btn.blur();
btn.overflowText = btn.overflowText === "expand" ? "reduce" : "expand";
view.fireEvent('expandGraph', view);
}
in browser's console on breckpoint i see right value but there is no change in interface. Why?!
btn.setConfig( name, [value] );
try to use this function to set specific initial configs dinamically.
Sometimes the button din't refresh his state if you modify directly the variable
Try to refresh component layout with doLayout() method after you change overflowText property.
I have a view of xtype container. If I swipe from left to right the view must change. It is more or less similar to carousel but I dont need carousel. I need to navigate between views with the help of swipe event.
listeners: {
painted:function(container) {
container.getContentEl().on('swipe',function() {
// your swipe code here
}
}
}
I'm pretty new to AngularJS and would like to know how to do this:
$(".change-agency-clicker").on("click", function (e) {
e.preventDefault();
$(".form").fadeOut(function () {
$(".agency-change-form").fadeIn();
$("#agentForm").show();
});
});
So when the user clicks on a button it fadeout a panel and fades in a second panel.
Just follow this steps:
When the element .change-agency-clicker is clicked (ngClick), toggle the value of a variable.
If this variable is true, hide (ngHide) the element .form.
If this variable is true, show (ngShow) the elements .agency-change-form and #agentForm.
Animate all that things with CSS transitions (here is a tutorial), and don't forget transition-delay if needed.
The idea, of course, is to think "declarative" and no more "imperative"!
I have an MVC app which has a Tab Panel rendered as the only item in the viewport. Within the tabs I would like to put the same type of component, for which the event handling is equal within all tabs.
Therefore I need an ExtJS MVC Controller ref to the active tab, that would lead me to execute events on the components in the active tab. Is it possible to have such a ref?
My current approach is this:
get reference to Tab Panel
call getActiveTab()
call the controller events for the component in active tab
Is it possible to encapsulate the above 3 steps in one controller ref? Would be beautiful :-)
I'm using ExtJS 4.1.
Personally, I think controller refs are overrated. This sounds like a simple case where you can use one as you describe, but I prefer to listen to the event, and navigate from the firing component to the one I need.
In your case, assuming your tab panel contains regular ext panels, I'd do something like the following:
onButtonClick: function (button) {
var panel = button.up('panel[tab]');
if (panel) {
panel.someMethod();
}
}
The up method will find the closest ancestor that is of xtype panel and has a property named tab. If you have more specific xtypes or known properties, use those instead.
The panel should be the active one (else how was its button clicked?) but you can check that by going up another level to the tab panel and getting the activeTab there.
onButtonClick: function (button) {
var panel = button.up('panel[tab]'),
tabPanel = button.up('tabpanel'),
activeTab = tabPanel && tabPanel.getActiveTab();
if (panel && panel === activeTab) {
panel.someMethod();
}
}
Say your tabPanel has itemId: 'content'. Inside that panel you will have bunch of tabs and on each tab you will have bunch of buttons (as an example). And you want to handle all these button's click in one controller. Do I understand you correctly?
I believe that simple ref inside your controller would work:
this.control('#content button', {
click: this.buttonClicked
}
});
I have an (Ext JS) tab panel where the hidden tabs aren't loaded at all upon initial instantiation, (the only thing I set is the title).
Upon 'activation' of a tab I want to call a method , which then instanstiates a new FormPanel/GridPanel and put this content into the tab.
Can someone point me to a code example or give me tips on how to do this??
Thanks so much!
Just build a new panel and add it to the activated tab. Then call doLayout().
listeners: {
activate: function(panel) {
var formPanel = ....
panel.add(formPanel);
panel.doLayout();
}
}