ExtJs - how correctly implement the code as an event - extjs

I have code:
...
function Edit(id) { ... }
...
view : new Ext.grid.GroupingView({
groupTextTpl : '... link...'
...
Everything works, but it would be something on the similarity:
...
Ext.get('edit').on('click', function() {
alert(this.getValue());
});
...
view : new Ext.grid.GroupingView({
groupTextTpl : '... link...'
...
But for some reason does not work, error - Ext.get ("edit") is null.
What am I doing wrong?

Ext.get('edit') gets called before it is created, hence the error. Put the Ext.get() below the GroupingView()

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.

Use element by css to check if element exists in Protractor

In a protractor end to end test, I want to check if an element exist using element(by.css(...)), my code:
var myElement = element(by.css('.elementClass'));
expect(myElement).toBeUndefined;
This test fails, it says:
Expected { locator_ : { using : 'css selector', value : 'div[ng-switch-
when="resultNav"]' }, parentElementFinder_ : null, opt_actionResult_ :
undefined, opt_index_ : undefined, click : Function, sendKeys : Function,
getTagName : Function, getCssValue : Function, getAttribute : Function, getText
: Function, getSize : Function, getLocation : Function, isEnabled : Function,
isSelected : Function, submit : Function, clear : Function, isDisplayed :
Function, getOuterHtml : Function, getInnerHtml : Function, toWireValue :
Function } to be undefined.
After that I tried to use a promise:
element(by.css('.elementClass')).then( functtion(data) {
expect(data.getText()).toBeUndefined();
});
This results in an error:
Error: No element found using locator By.CssSelector(...)
Yes, I know that no element will be found, but how can I create a working test using element(by.css(...))?
Does anyone know how to achieve this? or is element(by.css()) not the method to use here?
You can test whether the element is present with isPresent. Here are the protractor docs for the isPresent function.
So, your code would be something like:
var myElement = element(by.css('.elementClass'));
expect(myElement.isPresent()).toBeFalsy();
You need to test if the element is not present:
expect(element(by.css('.elementClass')).isPresent()).toBe(false);
Truthy and falsie refer to values that are evaluated to true and false after being coerced to a boolean unless you want your function to return different types of values.
var myElement = element(by.css('.elementClass'));
myElement.isPresent().then(function (elm)
{
if (elm)
{
console.log("... Element was found")
expect(myElement.getText()).toBeUndefined();
} else {
console.log("... Element was not found")
}
});
same thing, but different syntax
let elem = $('.elementClass');
let elemIsPresent = await elem.isPresent();
expect(elemIsPresent).toBe(false);

Passing JSON object as parameter from View to Controller function?

Basically I've a panel called DummyPanel, Now on dummypanel initialize event I've called a controller function like as follows:
var me = component;
var fieldCollection =
{
"Order" : 'ordNumber',
"Ref": 'refNumber'
};
me.fireEvent('myControllerFunction','Param1', fieldCollection, 'Param3');
Now I want to get fieldCollection JSON object value within function myControllerFunction, to get value from fieldCollection I'm using following code:
myControllerFunction(param1, collection, param3)
{
Ext.Msg.alert(collection.Order);
}
But it does not return anything. So please let me know how to resolve this problem!!
Any comment will appreciated!!
I'm not quite sure what it means "But it does not return anything", but I'll try.
So, your "DummyPanel" view have a alias or itemId property. In yor controller (in init() function), you need "keep track" of your view. For example:
In your view:
me.fireEvent('myEventName','Param1', fieldCollection, 'Param3');
In your controller:
init:function(){
var me = this;
this.control({
'panel[itemId=your-view-itemId]': { // call your function after event
myEventName: me.myControllerFunction
}
});
...
},
...
myControllerFunction: function(...) {
...
}
Should it not be
Ext.Msg.alert(collection["Order"])?
Or if you want to keep Ext.Msg.alert the way it is fieldCollection should be defined this way
var fieldCollection =
{
Order : 'ordNumber',
Ref : 'refNumber'
};

Backbone collection remove, ReferenceError: el is not defined

I have a view for a collection, and when I invoke its remove method I call its collection remove method as well, and I'm getting a 'ReferenceError: el is not defined' which doesn't make any sense to me, why would a collection need an el.
Invoking code:
try {
myAppModel=backboneApp.views.privateViews.myAppsTabView.myAppsView.views.myAppsPrivateView.collection.get(appId);
backboneApp.views.privateViews.myAppsTabView.myAppsView.views.myAppsPrivateView.remove(myAppModel);
} catch(e) {
console.log("delFromMyAppsCollection: Failed to delete app from collection e= " + e);
}
Remove method within View:
remove : function(modelToRemove) {
alert('Killing!');
console.log("MyAppsPrivateView.remove called with model: ", modelToRemove );
this.collection.remove(modelToRemove);
console.log("MyAppsPrivateView.remove collection: ", this.collection );
this._rendered = false;
}
I guess it may be a better way to delete an element from a collection/view, but still it seems odd that the collection is complaining about not having an el, any ideas?
Thanks in advance.
Just in case,
view definition:
var MyAppsPrivateView = Backbone.View.extend( {
// Reference to this collection's model.
model: PapsCatalog , // don't should be PapModel instead of a collection?
templateId: Epc2G.myAppsTemplateId,
template: jQuery('#' + this.templateId).html(),
view instantiation:
var options = {
className : "MyAppsContainer",
uid : "myAppsPrivateView",
collection : papsCollection,
el : "#myAppsView"
};
var oMyAppsPrivateView = new MyAppsPrivateView(_.clone(options));
Might it relate to Backbone.View already having a remove method, and you’re overriding it?
This sounds like a composite view situation, have you considered having a view for every model in the collection?

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