I have a view that extends Ext.window.Window:
Ext.define('MyApp.view.help.Module', {
extend: 'Ext.window.Window',
initComponent: function () {
var me = this,
me.callParent(arguments);
}
});
Ext.QuickTips.init() is run when the application first starts up. Later on, when I create an instance of MyApp.view.help.Module as follows:
var module = Ext.create('MyApp.view.help.Module');
module.show()
A quick tip "Close Dialog" is shown over the 'X' button in the window. How can I disable the quicktip?
I know I can run Ext.QuickTip.disable(), however that disables the quick tips globally when I just want the quick tip over the 'X' button to be disabled.
Any help is appreciated!
You can define the closeToolText property as an empty string as follows:
Ext.define('MyApp.view.help.Module', {
extend: 'Ext.window.Window',
closeToolText: '',
initComponent: function () {
var me = this,
me.callParent(arguments);
}
});
You can just define the closeToolText property as an empty string as Kevin Lee said or null as follows:
Ext.define('MyApp.view.help.Module', {
extend: 'Ext.window.Window',
closeToolText: null,
initComponent: function () {
var me = this,
me.callParent(arguments);
}
});
Related
I am using Ext JS 5.0.1 and I am trying to use links in the viewModel defined inside a view.
The example below works.
Ext.define("MyViewPackage.MyView", {
extend: "Ext.form.Panel",
alias: "widget.myview",
theIdToUse: 47,
viewModel: {
links: {
theProject: {
type 'mypackage.MyModelClassName'
id: 17 //This works. But not theIdToUse or this.theIdToUse.
//I would like to use a value provided from my view
}
}
}
});
I would like to use the value of 'theIdToUse' for the id property of 'theProject' defined in 'links'.
I have tried to simply put theIdToUse or this.theIdToUse but I always got the following error:
Cannot use bind config without a viewModel
Do you know how could I managed to use links with a variable id?
Thanks in advance!
Use linkTo, like:
Ext.define("MyViewPackage.MyView", {
extend: "Ext.form.Panel",
alias: "widget.myview",
theIdToUse: 47,
constructor: function(){
this.callParent(arguments);
this.linkTo('theProject',{
type 'mypackage.MyModelClassName',
id: this.theIdToUse
});
}
});
this.theIdToUse does not work because within the scope of the viewModel, this no longer refers to MyViewPackage.MyView, but to the viewModel itself.
Even if you could get a reference back to MyViewPackage.MyView, say using ComponentQuery, the component does not yet exist at the point that the viewModel is being initialized, so you will get an error Cannot read property 'theIdToUse' of undefined.
You would probably be better off using some sort of two way binding between the view and viewModel, but I would need to know more about what you're trying to achieve to say exactly how.
Previous answer were pretty correct, except that in your case this would refer to window, not viewModel. This is due to in Ext.define you are passing anonymous object without some scope, so window scope would be used by default.
Suppose you should use something like this:
Ext.define("MyViewPackage.MyView", {
extend: "Ext.form.Panel",
alias: "widget.myview",
bind: {theIdToUse: "{id}"}
viewModel: {
links: {
theProject: {
type 'mypackage.MyModelClassName'
id: 17 //This works. But not theIdToUse or this.theIdToUse.
//I would like to use a value provided from my view
}
}
}
});
Although the question is from long time ago, I leave a possible solution for further viewers.
Try:
Ext.define("MyViewPackage.MyView", {
extend: "Ext.form.Panel",
alias: "widget.myview",
config: {
theIdToUse: 47,
},
viewModel: {
links: {
theProject: {
type 'mypackage.MyModelClassName'
id: null // Will be copied from config in initConfig
}
}
},
initConfig: function (config) {
this.config.viewModel.links.theProject.id = config.theIdToUse ;
this.callParent([config]) ;
}
});
You will be able to instanciate your panel with different ids:
items: [
{
xtype: 'myview',
theIdToUse: 47
},{
xtype: 'myview',
theIdToUse: 32
}
],
Even with:
Ext.create('MyViewPackage.MyView', {theIdToUse: 12}) ;
I'm trying to make a generator that I can then extend to form similar sub-generators
Here's my base generator:
var generators = require('yeoman-generator');
var VolumeAdderBase = module.exports = generators.Base.extend({
initializing: function() {
/* ... */
},
prompting: function () {
/* ... */
},
writing: function () {
/* ... */
}
});
Here's an example sub-generator:
var VolumeAdderBase = require('../../utils/VolumeAdderBase.js');
// console.log(VolumeAdderBase);
module.exports = VolumeAdderBase.extend({
fileType: "tomcat script",
containerName: "tomcat",
containerVolumeLocation: "/opt/tomcat/client-conf/"
});
When I try to run my sub-generator, it does nothing at all. No errors, no nothing.
When I dump the VolumeAdderBase object, there are plenty of methods on there, but they are all the Base ones. The ones defined in VolumeAdderBase are missing.
Am I missing something here? Or is there a better way to create similar sub-generators?
yeoman-generator is only going to run top level methods (Object.getOwnPropertyNames(prototype)). It doesn't go deeper in the prototype; that's by design. If Yeoman was to dig in the prototype, you couldn't use methods like this.destinationPath() or any other helpers as they'd all be schedule to be run - which would just break.
We have plans to support mixin in the future. But that's not currently the case.
As a fix, you can manually assign these methods:
VolumeAdderBase.prototype.prompting = VolumeAdderBase.prototype.prompting;
// etc...
I have built a custom widget that contains lots of other widgets.
The problem I am getting is the this. reference when a widget inside my custom widget calls a function in my custom widget. For example:
$(function() {
$.widget("custom.my_widget",
{
_create: function() {
this.variable = "HI";
var that=this;
// A Custom widget
this.button = $("<button>", {html:"PRESS"})
.button()
.click(this.do_it) // I know I can do a function(){ that.do_it() }) but that is not the point
.appendTo(this.element);
},
do_it: function() {
// With the setup like this, how do I get the correct this. reference
// As it stands, this = the button object
alert("TEST: "+ this.variable);
}
})
});
The problem is that the this in the do_it function does not point to my_custom widget, instead it points to the button widget.
Above is symbolic, please don't point out a bug as my actual widget is over 3000 lines of code and has many references like this. I need to get the my_widget instance inside functions like this when other widgets call my widget's functions.
I have tried putting in another parameter, but with some callbacks in some third party widgets this is not possible.
There must be an easy way to get the correct base this value for my_widget.
jsFiddle for reference : http://jsfiddle.net/jplevene/6e7m2q6h/3/
You can either use bind(), instead of click(), specifying the "context", or just reference a local variable and call the function (e.g. self below):
$.widget("custom.my_widget",
{
// the constructor
_create: function() {
var self = this;
this.variable = "HI";
// A Custom widget
this.button = $("<button>").button().click(function(){
self.do_it();
});
},
do_it: function(e) {
alert(this.variable);
}
JSFiddle: http://jsfiddle.net/ewpgv3mt/1/
The only way I found to do it is as follows:
$(function() {
$.widget("custom.my_widget",
{
_create: function() {
this.variable = "HI";
// A Custom widget
this.button = $("<button>", {html:"PRESS"})
.button()
.click(this.do_it) // I know I can do a function(){ that.do_it() }) but that is not the point
.data("widget", this) // <---- New line here
.appendTo(this.element);
},
do_it: function() {
// Get the parent widget
var that = $(this).data("widget");
alert("TEST: "+ that.variable);
}
})
});
What I did was pass the "this" value to a data value of the object. There must be a better way than this.
I have tried $(this).closest(".my_widget_class"), but I then need the widget from the object
I'm trying to write a custom widget in JQuery UI (v 1.9 m8): http://pastebin.com/zua4HgjR
From my site I call it like this: var D = new $.ui.mail({}); Basically it works.
Is there a better method to call doSend on button click?
The question is how to access object instance from function handler?
"this" returns entire html window.
Tried with $.proxy doesn't work: click: $.proxy(this.doSend, this);
Thanks in advice!
Unfortunately if you setup the buttons by using the options member you'll have no reference to the element that you need in order to call doSend. One workaround I was able to come up with is to assign the handler in the _create method where you have the appropriate reference.
_create: function() {
this.options.buttons = [
{
text: 'Send',
click: function(self) {
return function() {
$(self.element).mail('doSend');
};
}(this)
},
{
text: 'Cancel',
click: function() { $(this).remove() }
}
];
this._super(arguments);
}
Live Example - http://jsfiddle.net/hhscm/2/
Spending this weekend finally I finished my plugin: http://agrimarket-blacksea.com/jsc/jquery-mail.js
I decided to call "class function" in classical way: $(this).mail('doSend'), until I'll find something better.
Thanks!
New to zepto (and honestly, far from a jQuery-whiz),
I want to add a custom function.
This is my attempts so far:
//define..
$.fn.doSearch = function() {
alert(this.parentNode.html());
//now xhr..
}
//assign..
$('#resetBtn').click( function (e) {$(this).doSearch()});
and
//define
<script type="text/ja..
function doSearch(obj) {
alert('Ugly way but here I am');
}
//assign..
$('#resetBtn').click( function (e) {window.doSearch()});
And neither works.. I'd rather go the first route, aware that .fn isn't listed in the zepto-docs.
regards,
//t
ok, now I have
//define
var myFunc = {
doSearch: function(obj) {
//just check obj is ok.
alert($(obj.parentNode).html());
}
}
//correct way to extend zepto?
$.extend($,myFunc);
//assign...
$('#searchBtn').click( function (e) {$(this).doSearch(this)});
is this the way to go?
As mentioned in the documents,
(function($){
$.extend($.fn, {
foo: function(){
// `this` refers to the current Zepto collection.
// When possible, return the Zepto collection to allow chaining.
return this.html('bar')
}
})
})(Zepto)