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.
Related
tl;dr
What would be best approach for structuring an angular app which supports filtering and sorting on the server side using radio button filters on client side
Context of the app:
I have a sample movie list app, where movies have genre and style to categorize them. They can be sorted based on name, rating, year of release. The backend is very clear, I pass the filters to url in the form of query parameters and data is returned and pagination is also addressed. From the client side I create the url and attach the string params to it. However I have tried few implementations of filters and sorting on the client side and wasnt satisfied. every implementation involves using radio buttons for filters. The following approaches were used by me.
Approaches used:
Create few filters based on genres and styles of movies, launch an event when one radio button is clicked, pass the filter-radio model in the event. Listen for the event in a movieListDirective and then create the url followed by triggering the server call.
Create filters and pass the data in a service, launch an event whenever a radio button is clicked. Listen for the event and receive the data from the service. Create the url and initiate the server call.
Not yet used this approach but thinking of giving it a try
On click of radio button push the data in the browser url in form of query parameters. Listen for url change event inside the directive and trigger the server call
I'm also thinking of using UI router. Create an abstract state for filter and sort button. Put the movieListDirective inside the child state.
I'm just not satisfied with my 2 approaches and think that there's a huge room for improvement. Can anyone please suggest a very scalable approach or something to improve the existing approach which I'm using. Thanks in advance.
**I'm using IONIC. I would like to take advantage of the pull to refresh and infinite scroll features. These have to be put inside the ionic-content directive. Hence the approach used should satisfy this requirement **
Well, if I were you I would change a variable in my $scope and listen its changes to request again with your filters.
I made a Plunker to help you.
https://embed.plnkr.co/cNZ1Um7FycaPBjef5LI1/
In this Plunker, I added the ng-model to my radio buttons. When these radio buttons are selected, they change my variable with their values.
<input type="radio" value="new" ng-model="area">
This radio button above change $scope.area value to "new". Then, my controller listen to this change event and call my $scope.requestAPI function.
$scope.$watch('area', function() {
$scope.requestAPI($scope.area, $scope.category);
});
This function use the values of $scope.area and $scope.category to make a request. Changing their values, you change the request.
It is exactly the feature that you need.
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
My code fetches a Collection from the server and iterates through it. For each model fetched it creates a View that is appended to the same parent element. Each of these views has a "click" event that triggers a function.
The problem is that clicking on any item in the list causes the event function to trigger for ALL elements in the list. The only workaround I have is to make the function itself dynamic and try to determine if it should run based on things like the ID of the item clicked:
'click .request_box': function(e) {
var myid = $(e.currentTarget).attr("id");
// code here which determines whether the function runs
}
}
This is a workaround, but it is also a hack, and I'm sure there has to be a better way of dealing with what must be a common problem (creating a list). Repeat searching around the web does not suggest any better way, so I am posting in the hope someone with more experience using Backbone can offer suggestions on a better way to approach this problem....
Thank you in advance.
I have a data store and a grid. I add filters in the store and they work properly as I see the results in my grid. But once I disable all my filters aka clear them from my store I want to view all my rows in the grid without reloading them from a web service which is a kind of heavy task. All data is already fetched from the service and there is no need to reaload it again.
How can I do this? Is there some function in the store?
There already was a similar question with correct answer. In short, you need to call filter method without params after setting remoteFilter to false:
store.remoteFilter = false;
store.clearFilter();
store.remoteFilter = true;
store.filter();
Here is a jsfiddle: http://jsfiddle.net/8Gmtd/
I suspect that your grid's view is not refreshed. Try this:
mygrid.getView().refresh()
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