My extjs version is 4.0.2a. Sometimes vertical scrollbar in grid stops working. It is common problem. I've found some solutions, but they didn't work for me:
this.Grid.hideVerticalScroller();
this.Grid.initVerticalScroller();
this.Grid.update();
this.Grid.determineScrollbars();
this.Grid.forceComponentLayout();
this.Grid.doComponentLayout();
I've also tried scroll: false, but it didn't work too and maked my browser stop responding.
I think, I can disable extjs grid scrollbar and add browser standart scrollbars (overflow:auto), but I don't know how.
Any suggestions?
P.S. I can't use another version Extjs, because there is very big working project with some fixes in some core files. It will be very hard to make all work with new version of Extjs
Here's the "fix" I used with 4.0.7; it may work with 4.0.2. Code is not mine, I took it from sencha.com forum:
Ext.define('Ext.ux.grid.Panel', {
extend: 'Ext.grid.Panel',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.on('scrollershow', function(scroller) {
if (scroller && scroller.scrollEl) {
scroller.clearManagedListeners();
scroller.mon(scroller.scrollEl, 'scroll', scroller.onElScroll, scroller);
}
});
},
onViewRefresh: function() {
var me = this;
try {
me.callParent();
}
catch (e) {};
}
});
Use Ext.ux.grid.Panel instead of Ext.grid.Panel to inherit your Grid classes from. It doesn't solve the problem completely but drastically reduces the visibility of that particular bug.
On a side note, I would recommend you to bite the bullet and upgrade to 4.1.1, in my experience it was well worth the effort. Start with removing your custom fixes from the core; you can refactor them into separate classes that override core classes. After that, it'll go easier. I know, I've been through that too.
Related
I'm using Ext.tree.Panel of ExtJS 4.2.1. I would like to know if there is a way to preserve the position of the scrollbar after a data load (i.e. setRootNode(), loadData()). Right now, after the data is loaded, the scrollbar position is reset to the top.
Thanks in advance for any lead on this.
Try following code.
viewConfig: {
preserveScrollOnReload: true
}
I know this is old, but I noticed that "preserveScrollOnReload" does not work in Ext.tree.panel.
I resolved with cacheScrollValues. Example:
function updateNodes(nodes) {
var restoreScroll = App.yourGrid.el.cacheScrollValues();
var sto = App.yourGrid.getStore();
sto.setRootNode(nodes);
restoreScroll();
PS: I'm also using ext 4.2.1.
Hi try adding the following code once to your tree panel for scroll preserving.
For more information on this here from Sencha docs
viewConfig: {
preserveScrollOnRefresh: true
}
Hope it helps you.
I have a button with id of btnAdd and I want to disable it when some event is fired. The event occurs when some window is closed. So I tried the following code and it does not work.
Ext.create('Ext.window.Window', {
// Some initialization code goes here...
listeners: {
close: function(panel, eOpts){
Ext.get('btnAdd').disable(); // this does not work;
Ext.get('btnAdd').setDisabled(); // this one does not either
Ext.get('btnAdd').disabled = true; // And this one also seems to do nothing
}
}
});
How can I do that? This may seem to be pretty easy question but don't judge me bad. I'm quite new to Ext JS. I could not find the answer in the API Documentation either.
Ext.get('btnAdd').setDisabled(true);
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.button.Button-method-setDisabled
IF the button is Extjs component then use
Ext.getCmp('btnAdd').disable();
If it is not Ext js Component then use
Ext.get('btnAdd').setDisabled(true);
I hope this will help.
Ext.get('btnid').disable();
Ext.get('btnid').setDisabled(true);
both return errors, the best way that work without issues is
Ext.getCmp('btnid').setDisabled(true)
and you can set a text when the button is disabled to notify the user.
Example:
Ext.getCmp('btnid').setText("Button has been disabled")
Ext.get('btnid').disable();
Ext.get('btnid').setDisabled(true);
i'm currently trying to get my head around the theming capabilities of ext js 4 and am having some trouble with the styling of buttons.
setting button dimensions isn't quite possible using the scss variables provided, but there are some javascript config options for this. as i don't want to have to apply these settings to every button instance, i was looking for a way of setting 'config defaults' for the button class.
the following approach worked out well when setting a default height:
Ext.button.Button.prototype.height = 15;
unfortunately, this seems not to be possible for the 'minWidth' config:
Ext.button.Button.prototype.minWidth = 1; //nope, sorry
is there a way of setting a default value for 'minWidth'?
short answer
Ext.override(Ext.panel.Panel, {
minButtonWidth: 1
});
Ext.override(Ext.button.Button, {
minWidth: 1
});
longer answer
setting Ext.button.Button.prototype.minWidth = 1; is correct (better use the override mentioned in the short answer), but ignored by ExtJs internal handling of setting the default minWidth of 75 of Ext.panel.Panel (see bridgeToolbars() function). So if you would use a button outside of a Panel Toolbar, your initial try would work.
Also, there is a hardcoded minWidth of 75 of buttons in the makeButtons() function of Ext.window.MessageBox.
In my opinion you should open a bugreport #sencha, because there should be a themable, more global setting for this.
update: this was tested with ExtJS 4.1
If you want to change it for every single button with in the framework. Use the override system.
app/overrides/Button.js
Ext.define('App.overrides.Button', {}, function() {
Ext.override(Ext.button.Button, {
minWidth: 20
});
});
app.js
Ext.onReady(function() {
/*
* Load Overrides
*/
Ext.require([
'App.overrides.Button'
]);
});
var app = Ext.Application({.....
I'm not sure how sensible this is however as things like tabs extend from button and it might have some adverse effects. But thats how it's done any how.
i am new to ExtJS4.I am using paging toolbar in our project.I am clearing the grid using
grid.getStore().removeAll()
Now problem is with paging toolbar.If we click on the buttons then it is retrieving the store.My doubt is how to clear store in paging toolbar?
Please help me.
Thanking you,
Kushal
I just spent a few hours researching this thing and wanted to share in case someone is still looking for it. It looks like Ext.toolbar.Paging does not listen to the clear event of the store which fires on the removeAll() method. My solution was to sub class it and override getStoreListeners to bind onLoad internal function to the clear event. I am using ExtJS 4.1 by the way.
Ext.define('MyApp.ClearablePagingToolbar', {
extend: 'Ext.toolbar.Paging',
alias: 'widget.clearablepagingtoolbar',
getStoreListeners: function () {
var listeners = this.callParent();
Ext.apply(listeners, {
clear: this.onLoad
});
return listeners;
}
});
You use it by referencing clearablepagingtoolbar in your grid like this:
dockedItems: [{
xtype: 'clearablepagingtoolbar',
dock: 'bottom',
displayInfo: true,
store: this.getSearchResultStore()
}]
First of all, do you have the same store configured for both the grid and the toolbar? If yes, you should try to clear the store itself, and not by using grid.getStore() (e.g. myStore.removeAll() )
If you grid and paging toolbar uses same store, your paging toolbar will work correct. If you use separate stores (It is bad coding style), you need to call this paging panel's store's sync method, to syncronize data.
I've got an ExtJS3 application which could benefit from the ExtJS4 SVG stuffs. Online there is an example of how to use sandbox mode to include ExtJS4 components in an ExtJS3 application... but in the example the ExtJS4 components are in their own floating window, so the ExtJS4 components aren't really added to ExtJS3 components; they just co-exist rather independently.
Is there a way to add an ExtJS4 component to an ExtJS3 component while running in sandbox mode? For example:
var item = Ext4.create("Ext.panel.Panel", { // ExtJS4
/* config */
});
var parent = new Ext.Panel({ // ExtJS3
items:[item],
/* more config */
});
If I try something like this, I usually get an error like...
this.container is null (http://localhost:4000/path/ext-4.0.0/builds/ext-all-sandbox-debug.js:27723)
It would seem that some Ext4 components can renderTo DOM elements in Ext3 components, with limited success:
var ext3Panel = new Ext.Panel({
title:'Ext3'
});
ext3Panel.on('afterrender', function() {
var ext4Panel = Ext4.create('Ext.panel.Panel', {
title:'Ext4',
renderTo:ext3Panel.body.dom,
});
ext3Panel.add(ext4Panel);
});
This seems to be most useful when using Ext4 charts in an Ext3 project.
Citations:
Sencha Forum: ExtJs3 and ExtJs4 in One App
Sencha Forum archives: Using Ext JS 4 Charts in Ext JS 3?
I don't think what you're doing is possible. ExtJS 4 has a completely new rendering engine, and so it's looking for a layout container that doesn't exist.
You'd be far better off migrating from ExtJS 3 -> 4.