I'm using ExtJS 5.1. I have a panel with a definition of button in the items-section with a listerner for event 'click'. The 'this'-keyword refers here to the button itself. But I want a new component to my panel, so I need reference to this panel in the listener-function. 'this.getParent().add(...)' doesn't function, no function error, this.container.getParent().add(...) results in the same error. What is the correct way?
Using .up('panel') in the first argument of the click function, which is the button itself.
Or in ExtJS 5 define a reference property in your panel, and use
this.lookupReference('your_reference_in_panel');
Related
In my angular 1.5 html5 application, I have an accordion group and inside it's body I have Couple of check-boxes. Since direct scope binding will not work inside accordion, I'm using ng-click event as attached.
This works as expected, I'm getting click events with correct value.
I have another reset button on screen, when user clicks this button I have to reset all filters including the checkbox inside the accordion. Even after I reset the model value to false, checkbox still shows as checked. I know this is because the binding is not there.
How can I update the checkbox value from javascript. Is there any angular way. I'm not a big fan of JQuery.
Regards,
Nixon
We faced a similar issue with the data bindings while using accordian.
Instead of using directly model variable, we created an object of it.
For eg, instead of using $scope.includeLocalParties, try using $scope.checkbox.includeLocalParties.
Also initialize it in your controller. Something like this:
$scope.checkbox = { includeLocalParties : false};
Hope it helps!
The code at this plnkr has a modal which pops up when a user clicks on a "Click to take quiz" button which calls a controller method that in turn calls a modal service. To get the plnkr to work, click anywhere in the code and press the space bar to add white space in a way that does not effect syntax. This will trigger plnkr to re-initialize the app and make the modal pop up after you click the button.
The problem is that the text printed in the modal does not update dynamically when timeLeft variable counts down. And also, the user's button click does not update the quizAnswer variable. In short, the modal is not able to talk interactively with the calling controller and view.
What specific changes need to be made to the plnkr to get the modal text to show the dynamic countdown, and to get the modal buttons to change the value of the $scope.quizAnswer variable?
Also, I have been carefully reading the documentation at this link. I think that the answer may be related to:
1.) $uibModal's options parameter passed in open(options) contains the parameter scope that defines the parent scope to be used for the modal's content, and also property bindToController which, when set to true, binds the scope property to a specific controller defined by controllerAs.
2.) The open(options) method returns a modal instance, which includes close(result) and dismiss(reason).
I suspect that the solution lies in these methods and parameters, but I am looking for good examples and would appreciate some experienced eyes looking at this problem.
NOTE: The solution to this came in the comments below the accepted answer, especially the link to another posting that contains 2 lines of code for emitting the modal button click's results back to the parent controller.
You have a number of issues.
First, takeQuiz at navigation.js - line 16, should be attached to $scope, not this, since this will mutate depending on context.
Second, $scope.$apply and $scope.$digst(); at navigation.js - lines 29/30 are unnecessary since you will already be in a digest cycle. They should be removed else they'll trigger an error.
Finally (and this is the meat of your issue), you are misunderstanding how modal options are bound across when creating a modal instance. It is NOT two-way binding; it is a single extends from one object to another. As a result, trying to bind to the options (or creating a concatenated string with the timeRemaining) will not update once it's bound across.
Instead, one possibility is to create an event handler inside of the modal and broadcast on each tick, updating the modal. In addition, if you pass the body text as prepend and append text, it is easier to insert your timestamp value:
You will need to inject (and broadcast from) $rootScope in your navigationController, since the modalService is registered somewhere very high in the scope chain.
On each tick, broadcast the time remaining navigation.js:
$rootScope.$broadcast('timeRemainingTick', $scope.timeRemaining);
In your modalService.js, register to receive the event inside of the controller assignment:
var timeRemainingUnbind = $scope.$on('timeRemainingTick', function(event, newTick) {
$scope.modalOptions.timeRemaining = newTick;
});
Finally, make sure that you unbind the event by calling timeRemainingUnbind() in the close events of your modal to prevent memory leaks:
$scope.modalOptions.ok = function (result) {
timeRemainingUnbind();
$modalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
timeRemainingUnbind();
$modalInstance.dismiss('cancel');
};
See my working forked plunker here
Clicking on a bunch of buttons of my app allows to create different customized instances of CKEditor, furhermore inside the textarerea is created a grid whith layoutmanager plugin. The created editor is resides inside the body of a bootstrap modal.
When one of the buttons is clicked for the first time everything works fine, and i can get the correct start element and the editable area can be accassed properly from my app.
When i dispose the modal i destroy also the instance of CKEditor and the associated view (the app involves also Backbone.js) is removed:
$('#tallModal').one('hidden.bs.modal', function(e) {
if (this.ckeditor) {
CKEDITOR.instances[this.model.get("uniqueId")].destroy();
this.ckeditor = null;
}
this.view.close();
}.bind(this)).modal('hide');
this.ckeditor is created as follows:
this.ckeditor = $("#"+ this.model.get("uniqueId")).ckeditor(config.rte.ckeditor, $deferred.resolve).editor;
When i click another button the modal displays the correct editor instance but when this line in my code is reached (this._editor is an alias of this.ckeditor):
return this._editor.getSelection().getStartElement();
the following error is raised:
TypeError: Cannot read property 'getStartElement' of null
Debugging the code i discovered that when the editor is destroyed and then created again the editor object(this._editor) has the property status="destroyed", while when everything is working properly status="ready"
I tried this solution CKEditor issue with Bootstrap modal and many others with no luck, the line this.$element.trigger( 'focus' ); is called anyway.
I found myself an answer:
this._editor = CKEDITOR.instances[this.model.get("uniqueId")];
I had this line inside the initialize method of a Backbone.View but in this way i only get the reference to the destroyed instance.
The editor instance inside this._editor must be "refreshed" each time i want to do something with the result of:
return this._editor.getSelection().getStartElement();
I am need hide/show trigger on fields (combobox,*date* and etc.) without invoke method doComponentLayout() (source code of setReadOnly method). The method doComponentLayout() is very slowly on IE. Can anybody help me? Thank you!
You can also use the setHideTrigger(true) method. This is a private method on Ext.form.field.ComboBox - (see Extjs ComboBox, make sure to check "Private" in the "Show" menu.)
Calling myCombo.triggerEl.hide() doesn't work if the combo component hasn't been rendered yet.
You can also hide the trigger when component is first initialized by setting the config property hideTrigger: false.
You should be able to show/hide the triggerEl that is a property of anything that extends Ext.form.field.Trigger (such as combo, date, etc.).
See live example here:
http://jsfiddle.net/hWGYE/765/
I have a button in a panel which gets rendered inside a window. And I want to be able to add that button to a bottom bar in the window.
Current I am trying to add an onRender function to the panel to get the parent window using
this.findParentByType('Ext.Window')
however it returns null.
I am even heading in the right direction?
EDIT: I am using extjs 3.2.2
findParentByType takes xtype as parameter. So in your case you should use
this.findParentByType('window')
or
this.up('window')
Have you tried providing a unique id to your window and adding the buttons to it like so:
Ext.getCmp('myWindowId').add(buttonPanel);
#Nitin Singhal #Reflux
For ExtJS4: Ext.ComponentManager.get('html dom id')