Is it possible to change url for Store which is assigned to grid? I do sth like that, but it looks very ugly. I am sure there is another way:
Ext.define('APP.controller.List', {
extend : 'Ext.app.Controller',
stores : ['Users', 'Reports'],
...
// after click on some button
var lv = this.getUserlist();
lv.store.getProxy().api.read = 'data/reports.json'; // UGLY WAY to change url
lv.store.reload(); // and now my list has new content
In other way I have one list but I would like to load data there using 2 stores (users and reports). I know that store is assigned to list (grid) forever.
How do it better without change url in store->proxy ?
Thanks for help.
Use Store.setProxy() method instead:
var lv = this.getUserList();
lv.store.setProxy({
type: 'ajax',
url: 'data/reports.json'
});
I would also recommend to rethink your design if it calls for one Grid with two Stores. Something's wrong here.
Related
I would like somebody's help on how to change the view within a transition.
My problem is that I need to load a view dynamically. So I create a new view (this seems to be working):
var viewname = 'view-'+Date.now();
var element = angular.element(document.querySelector('#view-container'));
var scope = element.scope();
var elementString = '<div id="'+viewname+'" ui-view="'+viewname+'" class="viewunique"></div>';
$compile(element.append(elementString))(scope);
This will add the view to the $view variable and seems to be working.
My question is: How can I use this new view in a statechange. I tried using the $transition$.$to() like:
$transitions.onStart( {}, function($transition$) {
$transition$.$to().views = {
templateUrl : templateUrl
};
});
where viewname is the name of the created view, and templateUrl is the correct template. The template will have it's own controller and stuff. This will overwrite the view for this state, but doesn't really work or do anything.
Somehow I would like to change the views for the state within the transition to this state so that the dynamically created view will be used. Is this possible?
Does someone know how this can be done?
Okay, I did some research on what you exactly wanted. If I understand correctly you want to change views during a state change, with each view having it's own scope and controller.
This seems to me like you want multiple states running besides each other. Perhaps you could take a look at ui-router-extras:
https://github.com/christopherthielen/ui-router-extras
This package will allow you to use parallel states and nested states, which I believe is what you want/need.
Take a loot at https://christopherthielen.github.io/ui-router-extras/#/home for more info and working examples.
My case is that I want to use the createSearchChoice feature of the Select2 widget. So I found out I need to use an html input element instead of a select element and so I cannot use ng-repeat to populate the select2 widget. I find out there is a 'data' option and have been able to populate the select2 widget with static data, but not when I've tried to fill it dynamically.
What works:
html:
<input class='select2' ui-select2='sel2props' type='hidden'>
in the controller:
$scope.sel2props = {
createSearchChoice: ...
data: [
{ id: 0, text: 'yabba' }
etc
]
};
But if I try to set data to a variable which I can then set to whatever the database feeds me the widget isn't populated.
data: $scope.data;
function to retrieve data {
$scope.data = retrieved data;
}
the retrieved data is exactly in the way specified.
If i set up a button to append the data key it will work:
$scope.appenddata = function () {
$scope.data.push({id:1, text: 'anot'});
};
So I'm thinking it's a timing issue and I try $digest and $apply but they don't work in controllers. I tried to set up a directive and actually can do simple widgets, but not select2, so I was hoping not to go down that path, well that is to say I went down that path and drowned. If anyone could help out that would be great.
The solution is straight forward. Just push the elements onto the select2 data array rather than referencing another array.
function (result) {
$scope.lookupOptions.data.length = 0; // remove old items
angular.extend($scope.lookupOptions.data, result.data); // add new items
}
A trick I've recently made use of is to use Select2's query option to pass in your latest data on demand.
I've put together an example, wrapped in a custom directive. See this Plunk.
I have a Panel with multiple grids. I'm trying to make some kind of global refresh button by which I mean, a button that will refresh all the grids and open tabs, without losing data like when F5 is pressed.
With two of the grids it was easy just get the store and load it but the third one makes a problem. When I try the same as with the previous two which works OK I get URL is undefined.
Here is my code:
reloadInstructionsStore: function() {
var reloadInstructionSt = this.getStore('Instructions');
var activeCat = this.getActiveCategory();
reloadInstructionSt.clearFilter(true);
reloadInstructionSt.filter({
filterFn: function(item) {
return item.get('category_id') == activeCat;
}
}),
reloadInstructionSt.load();
},
The only reason I can think of is that the store that I use here is defined different from the other 2. It's not with PROXY and CRUD, but looks like this:
Ext.define('MY.store.Instructions', {
extend: 'Ext.data.Store',
model: 'MY.model.InstructionRecord',
autoLoad: true,
data: g_settings.instructionsApi.initialData
});
Is the problem here and is there a way to make things work even like this?
Thanks
Leron
You do not need to reload this store, the data is provided on initial page load. The variable g_settings.instructionsApi.initialData tells me that the data is available as static on the page. All you need to do in this case is reset the filter, and just remove the reloadInstructionSt.load(); call.
If you actually do want the data to reload from the server, you will need to give your store a url that it can get the data from and the server will have to be able to serve this data up.
I would like to create a Treepanel, which is updated once a second.
So I took a store with a proxy for data acquistion:
store = new Ext.data.TreeStore({
model: 'TaskState',
proxy: {
type: 'ajax',
url : '/getTaskList'
},
root: {
expanded: true
}});
The store seems to work, the data is displayed in my TreePanel.
I tried to update the Treepanel with this function:
function refresh(){
store.load();
window.setTimeout("refresh()", 1000);
}
The update seems to work as well. Unfortunately the update causes some kind of "blinking" effekt on every update, because the whole tree is reloaded. I'm searching for a way to only refresh the nodes, which have changed.
Is there some way to do this?
greetings
There is one way:
You can load your nodes to some temp store and change your main tree's store node by node
If you want to add any new node and do not want to reload the whole store then you can add like this
//overModel is Ext.data.Model
overModel.appendChild({
id: responseJson.data['id'],
text:responseJson.data['text'],
children:responseJson.data['children'],//array of childern
parent_id:responseJson.data['parent_id']
});
overModel.expand();
and if you want to load the whole store the you can do something like this
Ext.data.StoreManager.lookup('StoreName').load({ params: {"p1": p1}});
to load the store.
To update the store periodically you can use DelatedTask Class.
check out the Documentation API of EXTJS will give you more details.
Store is bind Treepanel like grid and store ,so you can get Store from tree panel with
var store=treepanel.getStore()
and you can reload the store with branch that you need update with
store.load({node:selectedNode})
You could use TaskManager for that:
Ext.TaskManager.start({
run: reloadStoreFunction,
interval: 1000
});
This would execute reloadStoreFunction every second.
I have a grid made with ExtJS, and I render it to a div that I define, when a refresh is requested I simply "empty" the div using JQuery and then re-render the grid creating new objects each time:
var grid = new xg.GridPanel({
store: store,
columns: [
...
renderTo: 'db-grid'
And then to empty the div I use this:
$("#db-grid").empty();
This works well for like 3 or 4 refreshes, and then it seems to load really slowly, I imagine this is because it re-creates all these objects again, the only thing that changes each time is the "store." I acquire that through an AJAX request, is there a way to refresh this without creating a new grid each time?
I'm pretty new to ExtJS, and I'm making a bit of a transition here from JQuery, which is why I'm using the "empty()" function from JQuery, if you know of a ExtJS alternative, I would be glad to use that instead,
Thanks!
Take a look at Store's load(Object options) and reload(Object options) methods at http://dev.sencha.com/deploy/dev/docs/.
An example of this functionality can be seen in Ext.PagingToolbar. This class contains a button that refreshes a Grid and its Store, without destroying the Grid each time:
// private
doLoad : function(start){
var o = {}, pn = this.getParams();
o[pn.start] = start;
o[pn.limit] = this.pageSize;
if(this.fireEvent('beforechange', this, o) !== false){
this.store.load({params:o}); // here is the call you're interested in
}
},
doLoad() is then simply called from the method doRefresh():
doRefresh : function(){
this.doLoad(this.cursor);
},
I included this code for the sake of a complete example, but really all you need to worry about is the load() or reload() methods. Make sure to read the API to see a full list of arguments that can be passed into the methods.