I am using ExtJs mask while executing Ajax call.
var tmpMask = new Ext.LoadMask(Ext.getBody(), { msg: "Loading please wait..." });
tmpMask.show();
When request is finished I am hiding the mask
tmpMask.hide();
I would like to insert instead of text, div that includes image.
Please advice .
LoadMask msg is actually html, so you could put anything you want inside.
I also recommend tring ExtJs templates techniques, like XTemplate for example.
Check it out:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.XTemplate
EDIT: example
http://jsfiddle.net/nW3Bv/1/
Related
I am trying to apply an enhancement on below code line. If anyone knows solution, please help me!
loaderMask = new CQ.Ext.LoadMask(CQ.Ext.getBody(), { msg:"Loading... Please wait"})
loaderMask.show();
This loader mask is fixed in the page position and I like to fix it on the user screen while user scrolls up or down on the page.
Thankyou!
That would be:
scrollPanel.getScrollable().on('scrollstart', function(){
scrollPanel.mask({message: 'scrolling'});
});
scrollPanel.getScrollable().on('scrollend', function(){
scrollPanel.unmask();
});
But it sounds more like, you are loading data and while loading you want to mask the container. If so you might want to listen to the beforeLoad and load event of the store and mask and unmask while it is loading.
The alternative is to use databinding to the store.loading.
If you want to know more about that, please setup a fiddle (fiddle.sencha.com).
I have a situation where I need to disable the button(added as widget for widget column) when I receive one web socket event. When receiving the web socket I might be in any page. So how to get the reference of that button widget and disable it.
I have created a fiddle WidgetTestFiddle
Can anyone please help.
Thanks in advance
You could use the Ext.ComponentQuery.
Using the query method you can search for the buttons inside your grid.
You probably want to give your buttons an itemId (e.g. itemId: 'widgetcolumn-button-switch') to ensure that you only find the buttons you want.
Using the itemId your search query would look like this: 'button[itemId="widgetcolumn-button-switch"]'
I forked your fiddle and created my own version to illustrate my point: Sencha fiddle example
I think there are several ways to achieve your wanted result.
KaMuns answer will work, but can be tricky in case you use a buffered store / grid. Because the pages in this case are handled internally by the store. Using a static itemId wont work in this case out of the box.
I would suggest you rely on the record data.
Everytime you recieve a websocket message, update the store and refresh the grid view can be an option.
I have modified your fiddle here:
https://fiddle.sencha.com/#view/editor&fiddle/3a87
Here are is the most relevant part:
var grid = btn.up('grid');
var models = grid.getStore().getData().getRange(); // of cause you can use find or another way here
var model = models.filter(mod => mod.get('actualRole') === 'Follower');
model[0].set('showBtn', false);
grid.getView().refresh(); // get ref to view and refresh because data changed
On top you can have a look on the defaultBindProperties and may change this to the hidden key of the button.
I am attempting to use $mdToast.updateTextContent() to update a toast and am unsuccessful. The docs don't go into detail on how to call it with a new message. My desire result would have the first toast display 'Adding account' then change to 'account successfully added'. Any help would be greatly appreciated.
I think the correct way to approach this using material design standards would be to only use the toast once the account has been added. The loading could be a spinner or maybe a loading bar (maybe like this http://materializecss.com/preloader.html)
Once the $mdToast is open, you're able to call updateTextContent (as you stated)
$scope.onAccountAdded = function() {
$mdToast.updateTextContent('Account successfully added')
};
We're watching the variable for changes and update the view automatically, once the value has changed.
https://github.com/angular/material/blob/master/src/components/toast/toast.js#L299
Here is a demo, which shows how it works.
http://codepen.io/DevVersion/pen/qNWewJ
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);
somewhere in my application I get a formatted html from server to be displayed to user:
me.myPanel().update(response.responseText);
Now, I want to put in this html some links (like "add comment") in every record. I get this in the server!
But how to capture this links in extjs to act like a button or so ?
I would use a delegate for this.
me.myPanel.el.on('click', me._click, me.myPanel, {
delegate: 'a.linkclass'
});
In the code above you would have a couple of < a > tags in the body of your panel. delegate will make sure that the click only applies to your a tags with only linkclass on them.
Here's a fiddle: http://jsfiddle.net/N9MSC/
I recommend to use the answer of Johan Haest
One other way would be to give unique ID's to the buttons. You can the use Ext.get('id') to fetch a Ext.dom.Element to which you can bind event like so
domElementRef.on('click', function() { alert('hit') })
You need to do this after the update is done.
Here's a JSFiddle