I am getting error No method samethod() named on view.main.MainController
I am using controller from view method only not from view.main
I have function samethod() in view.sa.sacontroller not in view.main.MainController.
I do not know why it is pointing to another location.
I have another button for that all is working good and referring to view.sa.sacontroller
I created new window and in that one button click event is referring view.main.MainController to this location
Ext.create('Ext.window.Window', {
Can you please help me ?
Code:-
click: function () {
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
Ext.tip.QuickTipManager.init();
Ext.create('Ext.window.Window', {
items: {
xtype: 'form',
buttons: [{
text: 'Cancel',
handler: function () {
this.up('form').getForm().reset();
this.up('window').hide();
}
}, {
text: 'Click',
handler: 'clickevent()'
}]
}
});
}
clickevent() function is in another file controller
Once window is created it will not inherit the controller of the parent in which it is created. For the controller of newly created window should point to controller class where you expect your method to be present.
controller: 'view.sa.sacontroller'
This should be added inside the ext create of the window.
Related
I'm struggling to get a Dijit dialog to work for a reproducible example. I took the working code from this JSfiddle and simply tried to turn this into a named function to use throughout the example.
The author uses:
new Button({label: 'Show dialog', onClick: function() {
//Create dialog programmatically here
}
});
but I've changed this to be slightly different:
function launchSelectDialog(selectOptions) {
//Create dialog programmatically here
}
registry.byId("default-launch", "onClick", launchSelectDialog(allOpts));
Here is my version. Unfortunately, this just launches the dialog immediately upon loading the page, and never again when clicking on the button.
I have checked the NoWrap option in JSFiddle. I have no other clues about what's going on.
Please help if you have any ideas.
There are couple of issue.
1) Like others a have pointed out, you are invoking the function not setting up the event with function. hence the dialog is visible onload.
2) You need to wait till the html has been parse. or you need to use parser.parse()
Here is the updated fiddler: http://jsfiddle.net/49y3rxzg/9/
() is an invocation operator. You are calling the function yourself and the returned value of the function is set as the event handler. If you want to reuse the function, use a closure:
function launchSelectDialog(selectOptions) {
// the returned function will be used as the event handler
return function() {
// the passed `selectOptions` is remembered in this context
}
}
Another option is:
registry.byId("default-launch", "onClick", function() {
launchSelectDialog(allOpts);
});
You need to initiate your Button widget before retrieving with registry.byId().
In your code actually registry.byId("default-launch") was returning undefined;
Also registry.byId() function accept only an id so additional parameters will be ignored.
To fix it you should initiate a Button instance properly and declare launchSelectDialog(allOpts) withinonClick, as:
var myButton = new Button({
label: "Default Options",
onClick: function() {
launchSelectDialog(allOpts);
}
}, "default-launch");
Below fixed version for your script.
http://jsfiddle.net/usm829jq/
require([
"dojo/dom",
"dijit/Dialog",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/registry",
"dojo/domReady!"
], function(dom, DijitDialog, Button, BorderContainer, ContentPane, registry) {
var allOpts = [{
label: "Foo",
value: "foo"
}, {
label: "Bar",
value: "bar"
}]
var myButton = new Button({
label: "Default Options",
onClick: function() {
launchSelectDialog(allOpts);
}
}, "default-launch");
function launchSelectDialog(SelectOptions) {
var layout = new BorderContainer({
design: "headline",
style: "width: 400px; height: 400px; background-color: yellow;"
});
var centerPane = new ContentPane({
region: "center",
style: "background-color: green;",
content: "center"
});
var actionPane = new ContentPane({
region: "bottom",
style: "background-color: blue;"
});
(new Button({
label: "OK"
})).placeAt(actionPane.containerNode);
(new Button({
label: "Cancel"
})).placeAt(actionPane.containerNode);
layout.addChild(centerPane);
layout.addChild(actionPane);
layout.startup();
var dialog = new DijitDialog({
title: 'dialog title',
style: {
//width: '400px',
//height: '400px',
},
content: layout
});
dialog.containerNode.style.backgroundColor = "red";
dialog.startup();
dialog.show();
}
})
I created a project with $ionicPopup. I put the $ionicPopup code in a .factory. In my $ionicPopup.show() I ask user to input a value. After users already input the value, then it will alert the value what the user's wrote.
I also checked the following post, but still cannot solve my problem Access scope inside an angular js factory .
So here is my code:
controller
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout, popupService) {
// Triggered on a button click, or some other target
$scope.showPopup = function() {
var showParameter = {
title: "Test",
cssClass: "",
subTitle: "Insert any value",
template: '<input type="text" ng-model="value">',
templateUrl: "",
buttons: {
cancelText: "Reject",
cancelType: "button-assertive",
okText: "Accept",
okType: "button-positive"
}
}
// An elaborate, custom popup
popupService.show(showParameter, $scope).then(function(res) {
console.log('Tapped!', res);
alert("value: " + res);
});
};
})
factory
.factory('popupService', function ($ionicPopup) {
return{
show: function(param, scope){
var show = $ionicPopup.show({
title: param.title, // String. The title of the popup.
cssClass: param.cssClass, // String, The custom CSS class name
subTitle: param.subTitle, // String (optional). The sub-title of the popup.
template: param.template, // String (optional). The html template to place in the popup body.
templateUrl: param.templateUrl, // String (optional). The URL of an html template to place in the popup body.
scope: scope, // Scope (optional). A scope to link to the popup content.
buttons: [{ // Array[Object] (optional). Buttons to place in the popup footer.
text: param.buttons.cancelText,
type: param.buttons.cancelType,
onTap: function(e) {
return false;
}
}, {
text: param.buttons.okText,
type: param.buttons.okType,
onTap: function(e) {
// Returning a value will cause the promise to resolve with the given value.
return scope.value;
}
}]
});
return show;
}
}
});
DEMO: http://codepen.io/aishahismail/pen/pgpdGW?editors=101
Your help is really need. Thank you.
Due to JS (and Angular) object inheritance[1] you have to "wrap" primitives in objects, so here is the working code (forked from yours):
http://codepen.io/beaver71/pen/JGMvdV
The key edits are these:
$scope.data = {};
...
template: '<input type="text" ng-model="data.value">'
[1] Popup inherits its scope from the controller. See in general: https://github.com/angular/angular.js/wiki/Understanding-Scopes
What I have:
I have a edit function in which I rerender my view;
MyView = Backbone.View.extend({
edit: function (view) {
......
view.render();
}
});
What a problem:
There is an usecase in which during edit function view can be closed, so I MUST NOT invoke view.render() at the end of edit function.
Question:
How to check if view has already been closed inside edit function? Something like:
MyView = Backbone.View.extend({
edit: function (view) {
......
if (!view.isClosed())
view.render();
}
});
For #net.uk.sweet:
I use Bootstrap X-Editable. With help of it I can modify test fields. To modify text field I just need to click on it, change value, and then click outside of it (outside of text field). In such case method success will be invoked.
textEditor: function(view) {
$(this).editable({
type: 'textarea',
mode: 'inline',
onblur: 'submit',
showbuttons: false,
inputclass: 'edit-comments-text-input',
validate: function(value) {
if (!value.trim()) {
return 'Can not be empty!';
}
},
success: function(response, newValue){
//modify the comment
comment.text = newValue.trim();
//rerender
if (!view.isClosed()) //This line is what I need, but view hasn't isClosed method ((
view.render();
}
});
}
Also it is worth to say that user can close view by clicking on close button or by clicking outside of view.
Problem use case:
User click on x-editable field
Change text
Click close button
What happens in such case:
Two actions:
View is closed
success method, which invoke view.render(), BUT MUST NOT!
Summary:
I need to check inside of my success method if view has been closed.
Coarse solution:
Seems I find some solition, not the best one, of course.
if ($(view.el).hasClass('in'))
view.render();
MyView = Backbone.View.extend({
initialize : function() {
this.setClosed(false);
},
setClosed : function(booleanValue) {
this.closed = booleanValue;
},
getClosed : function() {
return this.closed;
},
edit: function () {
var view = this;
//......
if (!view.getClosed()) {
view.render();
}
}
});
I'm going to ask another newbie question. I have come across multiple ways for a child to reference functions and data defined at the parent class level, but I'm not sure what is the recommended way. Below is an example that I am dealing with, but this topic is generally important for me since I do not have a good understanding of reference and scope of parents and children. How can I reference functions and data of a parent from a child of a child element?
As usual, any help will be highly appreciated.
Mohammad
San Jose, CA
/******
This is a floating panel with a formpanel inside it, that has an email field and a button to process the email.
When the button is tapped, I want to call the processEmails() function from the button.
******/
Ext.define('myapp.view.ForwardPanel', {
extend : 'Ext.Panel',
xtype : 'forwardPanel',
initialize: function() {
this.callParent(arguments);
var btn = {
xtype: 'button',
ui: 'action',
text: 'Send',
listeners: {
tap: function(){
processEmails(); //<- **How can I reference and call this function?**
// This function is defined at the parent class level
// (indicated at the bottom of the code listing)
}}
};
var form = {
items: [{
xtype: 'fieldset',
instructions: 'Enter multiple emails separated by commas',
title: 'Forward this message.',
items: [ {
xtype: 'emailfield',
name: 'email',
label: 'Email(s)'
},btn] // The button is added to the form here
}]
};
this.add(form);
},
// this is the parent level function I want to call upon button tap.
processEmails: function(){
console.log('Processing email...');
}
});
I'm not sure about a "right" way to do it, but this is what I would do, and what I see most of the time in the Sencha forum and in their own code:
Ext.define('myapp.view.ForwardPanel', {
...
initialize: function() {
this.callParent(arguments);
var me = this; // <---- reference to the "ForwardPanel" instance
var btn = {
xtype: 'button',
ui: 'action',
text: 'Send',
listeners: {
tap: function(){
me.processEmails(); // <-- notice the "me" in front
}
}
};
...
},
// this is the parent level function I want to call upon button tap.
processEmails: function(){
console.log('Processing email...');
}
});
You can make use of prototype to achieve it:
myapp.view.MyView.prototype.processEmails.call(this);
Here is a working fiddle: http://www.senchafiddle.com/#MvABI
I have an ASP.NET MVC application. In the application, I have a page with a button on it. When I click on the button a partial view is rendered in a window (see below). Inside the view I have a combo box and I need to load the combo box after the view is rendered. I tried to call the js right after win.show() but that doesn't work because the textbox used to render combo is inside the partial view. When should I call the js? Any help regarding this will be highly appreciated. Thanks!
var win;
if (!win) {
win = new Ext.Window({
layout: 'fit',
width: 750,
height: 630,
closeAction: 'hide',
plain: true,
autoLoad: {
url: '../SearchJob/SearchPanel'
},
buttons: [{
text: 'Submit',
handler: function () { }
}, {
text: 'Close Me',
handler: function () {
win.hide();
}
}]
});
}
win.show(this);
}
You might add the < script > tag to the end of the partial view. That way the script will not be parsed/executed until the partial view is completely rendered.
Can you use the afterrender event on Ext.Window?
Since you are using autoLoad to load the partial view contents, you have to wait until the window has received the response with the partial view contents and has been updated with the components/markup... so you can listen for the update event of the window's updater...
win.on('render', function(component) {
win.getUpdater().on('update', function(el, response) {
// Load Combo
}, win, {single:true});
});
[EDIT]
Make sure you set the event handler to run only once though... edits are above
var win;
if (!win) {
win = new Ext.Window({
layout: 'fit',
width: 750,
height: 630,
closeAction: 'hide',
plain: true,
autoLoad: {
url: '../SearchJob/SearchPanel'
},
buttons: [{
text: 'Submit',
handler: function () { }
}, {
text: 'Close Me',
handler: function () {
win.hide();
}
}]
});
win.on('render', function(component) {
win.getUpdater().on('update', function(el, response) {
// Load Combo
}, win, {single:true});
});
}
win.show(this);