Sencha scope issue - extjs

I've completely rewritten my question to hopefully better reflect what I am trying to do here. Thank you guys so much for your help so far.
I have a file called en.js, which holds this code:
Ext.apply(Ext.locale || {}, {
variable: 'great success!'
});
Here's my index.js setup code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
Ext.locale = {};
var headID = document.getElementsByTagName("head")[0],
newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'en.js';
headID.appendChild(newScript);
loginPanel = new login.Panel();
}
});
login.Panel is an extension of the Sencha panel class using Ext.extend.
The 'en.js' script is added to the header correctly. I don't have it in the index.html file because once this problem is solved there will be several files that could be loaded, depending on the output of a function. That's why I need to add the script to the header in the onReady function, and not in the index.html file itself.
Once the script has been added it loads "variable: 'great success'" into Ext.locale,
Yet my problem currently lies within login.Panel(), which is an extension of the Sencha panel class using Ext.extend.
Currently, there is a button in the panel.
When I put this in the button's handler:
console.log(Ext.locale.variable)
it returns the string "great success",
yet when I try to set the button's text like this:
text:Ext.locale.variable,
I get the error
Uncaught TypeError: Cannot read property 'variable' of undefined
I'm guessing I have a scope issue here, since console.log() and alert() can both access Ext.locale, but trying to use it to construct the form gives me the undefined error.
Any help would be greatly appreciated.
Thank you!

it sounds like you are defining Ext.locale from your script early on... then later in onReady you are overwriting it as Ext.locale = {}
onReady will run after all your other scripts have been loaded.
Why not move your initialisation code for locale into onReady insted of your = {} line

This will add three properties and their values to the receiving object.
Ext.apply(receivingObject, {
property1: 'value1',
property2: 'value2',
property3: 'value3'
});
Here also is the Sencha documentation on the Ext.apply method:
http://dev.sencha.com/deploy/touch/docs/source/Ext.html#method-Ext-apply
As for accessing the isReady property, you could do something like if(someExtObj.isReady), but you may be more interested in using the onReady method...
Ext.setup({
onReady: function() {
// your setup code
}
});

Related

Firebase $save doesn't work inside an event handler function

I must be missing something really basic. I have an input box where the list name is entered. The name is then saved to the Firebase.
When using $watch, it works just fine. However, if done through ng-keyup event, it returns the following error
TypeError: undefined is not a function.
What am I missing?
HTML:
<input id="which_list" ng-keyup="enterThis($event)" ng-model="which_list.name" >{{which_list.name}}</span>
Controller:
$scope.which_list = sync.$asObject();
$scope.$watch('which_list.name', function() {
gDataService.which_list.name= $scope.which_list.name;
$scope.which_list.$save() // THIS WORKS
// $scope.which_list => d {$$conf: Object, $id: "id", $priority: null, name: "to1_list", $save: function…}
.then(function(){
console.log($scope.which_list.name);
});
});
$scope.enterThis = function(event){
if (event.keyCode === 13) {
gDataService.which_list.name= $scope.which_list.name;
$scope.which_list.$save(); // THIS DOESN't WORK
// $scope.which_list = Object {name:"list_name"}
}
};
EDIT: In the comment, I included the value of $scope.which_list shown at the breakpoint.
Currently as you are changing in scope which_list converting to plain old JavaScript objects (POJO), I believe you need to unable 3 way binding between scope variable and $asObject().
Code
var which_list = sync.$asObject();
// set up 3-way data-binding
which_list.$bindTo($scope, "which_list");
Update
Also as you are using $scope.which_list object which contains name and other property,So do initialize it on starting of your controller like
$scope.which_list = {}
Hope this could help you, Thanks.

Add custom message (not error) under under combobox/text field

I'm new to extjs and I'm looking for a way to add some custom message under my combobox field.
Depending on some conditions (eg. value selected) the message needs to have different text and/or style.
I could play with errorEl associated with my combobox and change it's message/style depending on the state, but this doesnt look like a good approach.
Are you aware of any plugin allowing to add such a message, or is there a shorter way to do this?
Thank you for your suggestions. I ended up writing my own plugin, which then I attached to combobox.
I added new element after error element and I changed messages based on proper combobox events.
afterCmpRender : function() {
var me = this, cmp = me.getCmp();
var messageWrapper = {
tag : 'div'
};
var messageEl = cmp.errorEl.insertSibling(messageWrapper, "after");
cmp.messageEl = messageEl;
Ext.Array.each(me.messages, function(message) {
var messageConfig = {
tag : 'div',
style : {
display : 'none'
}
};
var newElement = messageEl.insertSibling(messageConfig, "after");
newElement.setHTML(message.value);
newElement.addCls(message.classes);
me.registerMessageEvents(me, cmp, message, newElement);
});
}
I almost always use multiple elements for this, and would not make an attempt to change the field.
Depending on your context, which you didn't provide, I'd say you could have a look at:
Ext.form.field.Display
Ext.form.Label
Ext.tip.Tip
Ext.tip.QuickTip
I'd work with the class Ext.tip.Tip.
You can create
Ext.create('Ext.tip.Tip', {
id: 'myTip',
header: false
});
and then
var tip = Ext.getCmp('myTip');
tip.update('your custom tip message');
tip.showBy(comboboxComponent);
You could also use showAt(..) instead of showBy.
For more information look into the Docu
Here is a Fiddle link to an example.

Changing test set of an existing test case in Rally using Ext Js

I want to create a report where where we have capability to reparent our test cases from one test set to other.
in simple language, I need to remove the existing link with the test set and assign a new test set for my existing test case/cases.
I was referring to one existing report at https://github.com/RallyTechServices/test-picker/blob/master/deploy/App.html
listeners: {
scope: this,
artifactChosen: function(items){
Ext.create('Rally.data.WsapiDataStore',{
model:'TestSet',
pageSize: 1,
autoLoad: true,
filters: [{property:'ObjectID',value:record.get('ObjectID')}],
listeners: {
load: function(store,records){
console.dir(records.length);
var ts = records[0];
me._log(["Selected items:",items]);
var tc_store = ts.getCollection('TestCases');
me._log(["Got store:",tc_store]);
tc_store.add(items);
me._log("Added items.");
tc_store.sync({
// callback: function(){
// me._log("inside callback");
// me._getTestSets(me.iteration_selector.getValue());
// }
success: function(batch,options) {
me._getTestSets(me.iteration_selector.getValue());
},
failure: function(batch,options) {
me._getTestSets(me.iteration_selector.getValue());
}
});
}
}
});
}
}
Here If I try to use remove it gives me an error, I am not sure what is causing the issue.
Or How can I approach the issue. I need to change the test set of any user selected test case in my report. Can please some help me on the same.
The error is "Uncaught TypeError: Cannot read property 'getRef' of null". When it can add to the same object why cant it delete. I understand that it has only one value. but I tried removing the filters as well from code snippet mentioned below, but still it gives only current selected test case object id.
Thanks in Advance

Sencha: Set Dataview XTemplate when created Dynamically

I have some data that I'm getting from the server that depending on the situation may bring different fields, so what I have is this:
//This is the way i'm attaching the newly created template to the view
//Still no success
function processDataMethod(response){
//some processing here...
var details = Ext.widget('details');
details.config.itemTpl = new Ext.XTemplate(tplFields);
}
Ext.Ajax.request({
url: '...',
...,
success: function (response, request) {
var combinedData = processDataMethod(response);
operation.setResultSet(Ext.create('Ext.data.ResultSet', {
records: combinedData,
total: combinedData.length
}));
operation.setSuccessful();
operation.setCompleted();
if (typeof callback == "function") {
callback.call(scope || that, operation);
currentList.up().push(Ext.widget('details'));
}
}
});
Any help is appreciated, thanks!!
You have to make a distinction between a number of things:
currentList.up() returns a DOM element (Ext.dom.Element). This has no method push().
With Ext.widget('details', config); you can pass a config like {itemTpl: yourTemplate, data: yourData} to create an instance with a custom template and custom data.
To update your component after creation you can always do someWidget.update(data);.
A component can be rendered to an HTML element with the renderTo option.
A component can be appended to existing components in different ways and you can update the whole layout or parts of it in different ways. This is unnecessary if you are rendering to an HTML element.
Does that help you find your problem?

extjs buildquery override does not work

I created a gridfilter like this:
var filters = new Ext.ux.grid.GridFilters({filters: [
{type: 'string', dataIndex: 'ContactName'}
]});
I wish to override the buildquery method to provide custom logic.
When I do:
filters.buildQuery = function(filters){
alert(Ext.util.JSON.encode(this.store.baseParams.filterParams));
};
It works fine. But when I move the alert inside another function like this:
buildQuery1 : function(filters){
alert(Ext.util.JSON.encode(this.store.baseParams));
}
And call it like this:
filters.buildQuery = function(filters){
buildQuery1(filters);
};
The alert does not show. And I get this.store.baseParams is null or not an object.
I solved it like this:
filters.buildQuery = function(filters)
{
buildQuery1(this,filters);
};
AND:
buildQuery1 : function(scope,filters){ alert(Ext.util.JSON.encode(scope.store.baseParams)); }
Not sure why this works :)
I do not see all your code, however I got the impression that you are losing scope and mixing this with filters. To make sure what is in this call console.dir (this) and console.dir (filters) and see what object you have available

Resources