I would like to declare a global variable that takes value from DataStore and display its value in the alert Window.
var params = 1;
var storeTeacher = new Ext.data.JsonStore({
id: 'IDstoreTeacher',
url: 'school.php',
method: 'POST',
baseParams:{task: "LABEL",
parametar: params},
root: 'rows',
fields:
[{name: 'NameT', type: 'string', mapping: 'Teacher_name'}],
autoLoad: true
});
var TeacherName;
storeTeacher.load({
scope: this,
callback: function (records, operation, success) {
TeacherName = storeTeacher.getAt(0).get('NameT');
}
});
alert(TeacherName);
But, only thing I get is the alert Window that says: undefined
Your alert(TeacherName); call is being executed before the callback on your storeTeacher.load callback is being executed.
If you put the alert(TeacherName) in the callback function it will populate your TeacherName properly and show correctly in the alert:
storeTeacher.load({
scope: this,
callback: function (records, operation, success) {
TeacherName = storeTeacher.getAt(0).get('NameT');
alert(TeacherName);
} });
This behavior is expected.
Related
I've created a Service that returns a $resource
module.registerFactory('Website', function ($resource, $cacheFactory) {
var cache = $cacheFactory('websites');
var pagedCache = $cacheFactory('websites_paged');
return $resource('/api/websites/:id', {id: '#id'}, {
query: {method: 'GET', isArray: false, cache: pagedCache},
get: {method: 'GET', cache: cache}
});
});
In an edit state I receive all details by calling
$scope.website = Website.get({'id': $stateParams.id});
The $scope.website promise contains my data as expected. (Below a shortened JSON result from server)
{"id":25,"name":"blabla","url":"http://here.com","description":"blabla",
"tags":[
{"id":6,"name":"..."},
{"id":7,"name":"..."}
{"id":10,"name":"..."}
],
"objectives":[
{"id":3206,"code":"WIS AD3.c","name":"[ommitted objective 3206]","parent_id":3203},
{"id":3209,"code":"WIS AD4.b","name":"[ommitted objective 3209]","parent_id":3207}
]}
My problem is with the objectives property.
In my EditCtrl I open a modal and send the objectives as selected items to the modal. That works perfect.
$scope.selectObjectives = function () {
var modalInstance = $modal.open({
templateUrl: 'app/modules/objectives/templates/select-objectives.html',
controller: 'SelectObjectivesModalCtrl',
size: 'lg',
resolve: {
selectedItems: function () {
return $scope.website.objectives;
}
}
});
modalInstance.result.then(function (selectedItems) {
$scope.website.objectives = selectedItems;
console.log($scope.website);
});
}
When closing the modal the newly selectedItems are injected back into $scope.website.objectives. (cfr. modalInstance.result.then() ... )
The console logs perfectly all properties - including the objectives.
Now comes the weird part:
As soon as I try to access $scope.website in another function (ie update)
The objectives property is removed from $scope.website.
This is my update method:
$scope.updateWebsite = function () {
console.log($scope.website);
$scope.website.$save(function () {
$cacheFactory.get('websites').remove('/api/websites/' + $scope.website.id);
$cacheFactory.get('websites_paged').removeAll();
$state.go('app.websites');
});
};
The console logs all properties in $scope.website - except for the objectives. This is completely removed.
I hope I made myself clear enough.
Thanks for taking some time to help me pointing to the right direction.
My bad.
My response didn't return the entire object as should be in a RESTful POST.
I want to load a record based on my tree node selection and show it in my form. But my store is not loaded in my controller handler. Where and how should I load the store with my parameter?
var me = this;
var idTag= me.getMyNode();
me.getTagStore().on('beforeload', function(store, operation, eOpts) {
operation.params = {
idTag: idTag
};
}, me);
// it will not be loaded here and I get rec=undefined
var rec = me.getTagStore().load().getAt(0);
me.getMyForm().loadRecord(rec);
And here is my store:
Ext.define('TTT.store.Tag', {
extend: 'Ext.data.Store',
requires: [
'TTT.model.Tag'
],
model: 'TTT.model.Tag',
proxy: {
type: 'ajax',
url: 'tag/find.json',
reader: {
type: 'json',
root: 'data'
}
}
,baseParams: {
idTag: 30
},
});
You can call the load method manually whenever needed and pass any parameters needed, like this:
me.getTagStore().load({
params: {
idTag: idTag
}
});
When you call this you should see your request with the parameter in your console window in the browser.
In your code above, this line:
// it will not be loaded here and I get rec=undefined
var rec = me.getTagStore().load().getAt(0);
The load operation takes a little time, not much but it does take a little time. You need to listen to the load event on your store to be able to do things like this, here is an example:
me.getTagStore().load({
params: {
idTag: idTag
},
scope: this,
callback: function(records, operation, success) {
// the operation object
// contains all of the details of the load operation
console.log(records);
}
});
Checkout the documentation for store.
I have list and pull down to refresh plugin in it. When the refresh function fires i would like to show the load mask. But its not showing there. when i commented store.removeAll(); line i can see the loadmask working. I dont konw whats the problem with store.removeAll(). Please help me to solve this issue. Thanks in advance
{
xclass: 'Ext.ux.PullRefreshFn',
pullRefreshText: 'Pull down for refresh Contacts!',
refreshFn: function() {
console.log('pull refresh working');
Ext.Viewport.setMasked({
xtype: 'loadmask',
message: 'Please Wait...'
});
var store = Ext.getStore('Contactsstore');
store.removeAll();
var url = apiurl+'Contact.ashx?switch=GetContactList&api_id=4&getDataAgain=true';
store.getProxy().setUrl(url);
store.loadPage(1,{
callback: function (records, operation, success, response) {
if (success==1) {
Ext.Viewport.setMasked(false);
} else {
Ext.Viewport.setMasked(false);
}
}
});
Ext.getCmp('searchcontact').reset();
}
}
Here is my Store configuration
Ext.define('WinReo.store.Contactsstore', {
extend: 'Ext.data.TreeStore',
requires: [
'WinReo.model.Contactsmodel'
],
config: {
storeId: 'Contactsstore',
defaultRootProperty: 'items',
model: 'WinReo.model.Contactsmodel',
autoLoad: false,
pageSize: 20,
proxy: {
type: 'ajax',
method:'post',
id: 'Contactsstoreproxy',
url:apiurl+'Contact.ashx?switch=GetContactList&api_id=4&getDataAgain=false',
reader: {
type: 'json',
rootProperty: 'items'
}
},
listeners: {
load: function(store, records, successful, operation, eOpts) {
callback:{
succes:
if(store.getCount()!=0){
var RecordCount=store.getAt(0).get('RecordCount');
//console.log('RecordCount',RecordCount);
store.setTotalCount(RecordCount);
var storectscount = store.getTotalCount();
//Ext.Msg.alert('Store Total count',storectscount, Ext.emptyFn);
}
}
}
}
}
}
});
Loading masks won't get rendered until the browser has a chance to render them, and that won't happen until your Javascript code completes. I suspect that for some reason, the removeAll call isn't completing quickly (or at all), or an event listener on clear isn't completing like it needs to. Check your store's configuration for syncRemovedRecords: true and autoSync: true. You can also try removeAll(true) to keep the clear event from firing.
Update
Looking at your store definition, I can see at least one problem: Your load listener doesn't look like it's defined properly. You're defining a callback field inside of a function (which isn't going to compile), and 'succes' is misspelled. Is this what you had in mind?
load: function(store, records, successful, operation, eOpts) {
if(successful === true && store.getCount()!=0){
var RecordCount=store.getAt(0).get('RecordCount');
store.setTotalCount(RecordCount);
}
}
}
In my application I have a button in a toolbar. If I click on this button to open a window following code is executed:
[...]
onClick: function() {
this.windowControl = this.getController('attributesearch.Window');
this.windowControl.init();
this.windowControl.showWindow();
}
[...]
This window contains some inputfields and a combobox with a store:
Ext.define('EM.store.AttributeQuery', {
requires: ['EM.model.AttributeQuery'],
model: 'EM.model.AttributeQuery',
proxy: {
type: 'ajax',
url: './app/configuration/AttributeQueries.json',
reader: {
type: 'json',
root: 'queries'
}
},
autoLoad: true
});
Within the init method of my window controller I want to add one onLoad-listener I try to add this listener to the store:
init: function() {
this.getAttributeQueryStore().on('load', this.onStoreLoad, this);
this.control({
'attributeSearchWindow': {
afterrender: this.onWindowRendered
}
});
},
The first line in the init method this.getAttributeQueryStore().on('load', this.onStoreLoad, this); produces the following error:
Uncaught TypeError: Object [object Object] has no method 'on' app/controller/attributesearch/Window.js:9.
It seems the store is not fully (or correct) instantiated. What am I missing?
Edit:
The console output for this.getAttributeQueryStore() is this:
constructor {self: function, superclass: Object, config: emptyFn, initConfigList: Array[0], initConfigMap: Object…}
__proto__: TemplateClass
$className: "EM.store.AttributeQuery"
autoLoad: true
config: emptyFn
configMap: TemplateClass
initConfigList: Array[0]
initConfigMap: Object
model: "EM.model.AttributeQuery"
proxy: Object
requires: Array[1]
self: function constructor() {
superclass: Object
__proto__: Object
}
Why don't you just define the store's listener as part of the store's definition?
Ext.define('EM.store.AttributeQuery', {
requires: ['EM.model.AttributeQuery'],
model: 'EM.model.AttributeQuery',
proxy: {
type: 'ajax',
url: './app/configuration/AttributeQueries.json',
reader: {
type: 'json',
root: 'queries'
}
},
autoLoad: true,
listeners: {
load: function(store, records, options) {
EM.getApplication().getController('attributesearch.Window').onStoreLoad(store, records, options);
}
}
});
It is my own fault.
If you have a closer look at my store definition, you will see that i forgot to insert the extent: 'Ext.store.Store'. Thats it. Now i can add and remove listeners like i expected to.
Thank you everyone.
I'm trying to load the text of a label on the beforerender event. So I attached the beforender event... as below
{
xtype: 'label',
text: 'VOID',
listeners: {
beforerender: {
fn: me.onLabelBeforeRender,
scope: me
}
},
Ext.Ajax.request({
url: '/who',
method: 'GET',
params: {
id: 1
},
success: function(response){
var text = Ext.decode(response.responseText);
alert(text);
// process server response here
}
});
And now I would like to change the label from VOID into the response value of /who However I fail to see how I can access that label in a decent way. Of course I can add an id use getcmp however that seems so clumsy, or is that the way to go?
Actually, as far as performance goes, an id + Ext.getCmp() is the most efficient option. See this question for more.
It will definitely be faster than adding a listener, for which you get quite a healthy call stack.
define the label like this
{
xtype: 'label',
text: 'VOID',
itemId:'someLabel',
listeners: {
beforerender: {
fn: me.onLabelBeforeRender,
scope: me
}
}
now because you are keeping the scope as me which im assuming is some ancestor of label so with in the onLabelBeforeRender function you can access me by the this keyword. so in that function retrieve the label as
var label = this.down('label[itemId="someLabel"]');
label.setText('WHATEVER YOU WANT HERE');