I want to mask only my grid component, when the data is getting loaded. But on load mask , the whole window gets masked.Please suggest the necessary changes to achieve this behavior.
You can access the code in the below fiddle path, provided.
https://fiddle.sencha.com/#fiddle/fti
Thank You...
You can call grid.setLoading(true) or grid.setLoading('Custom Message') if you have a reference to the grid.
Link to Doc
Try this:
var gridPanel = new Ext.grid.Panel({
...
viewConfig: {
loadMask: true
},
...
});
Hope that helps.
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);
This could be a stupid question, but I cant figure out how to access store in gridpanel
var grid = new Ext.grid.GridPanel({
.....
store: store,
......
listeners: {
'beforerender' : function(grid) {
//grid.getStore();
}
}
I want to loop through the store , but grid.getStore() returns empty object.
you can simply do grid.store.
If you know it will be filled with data before the grid renders (you seem to be calling this from the grid beforerender event) you can do grid.store.getRange() to get the records that you want to loop through, as you mentioned in your question.
store variable is still visible in your listener code :)
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.
When i am using multiple url within proxy for GridPanel,Data is not loaded in the grid but when i open javascript console from crome, it is being load.
i am using below.
storename.getProxy().url = 'myurl';
How to resolve this issue?
Thanks in advance.
i hope after you're setting the proxy
storename.getProxy().url = 'myurl';
you load the store again
storename.load();
and about the store, does it have an url initially, does it have autoLoad.. just post some code dude!!
i think put layout: 'fit' in parent container of GridPanel will solve this issue too.