Develop Reference

How to add tooltip to text form field in extjs6

I have function for creating/rendering input fields but i don't know how to add tool tip on it in EXTjs6
this is my function:
createInputField: function(value, fieldsMarginBottom, readonly) {
var fieldStyle = this.getFieldStyle(readonly);
var nameField = Ext.create('Ext.form.field.Text', {
name: 'name',
readOnly: true,
hideLabel: true,
value: value,
width: this.fieldWidth,
style: {
marginBottom: fieldsMarginBottom + 'px'
},
//My try which is not working
tooltip: {
trackMouse: true,
width: 140,
renderer: function(tip, item){
tip.setTitle('name');
tip.update('Count: ');
}
},
fieldStyle: fieldStyle
});
return nameField;
}
I hope you guys can help me. If you need any additional informations, please let me know and I'll provide. Thank you

As can be seen in the textfield docs, fields do not have a way to add a tooltip to their configuration, so you would have to create the tooltip manually.
If you look at the docs for Ext.tip.ToolTip how to do that, you may find a small example, where you just have to change the target as per the target configuration description:
var tip = Ext.create('Ext.tip.ToolTip', {
target: nameField.getEl(),
html: 'Press this button to clear the form'
});

Above answer is correct. Here is example of generic function which you write once and use wherever you required in project by using using attributes.
addToolTip : function (id, msg) {
new Ext.ToolTip({
target : id,
dismissDelay : 0,
anchor : 'right',
html : msg
});
};

ExtJs: How to use plugin within defined component in MVC architecture?

Due to the lack of experience, I can't find how to activate an upload plugin in button component using MVC architecture.
When I used few files, this plugin works perfect.
But when I started to move to MVC direction, everything begin to fall apart.
Here is how I initialize the plugin:
Ext.Loader.setConfig( {
enabled: true,
paths: {
'Ext.ux.upload': 'ext-4.2.1.883/src/ux/upload/'
}
});
Ext.require([
....
'Ext.ux.upload.Button',
'Ext.ux.upload.plugin.Window',
.....
Here is the "old way" which worked perfect (button is situated on a panel, when you click it, the plugin upload window opens):
ObjectPhotosTab = Ext.create('Ext.Panel', {
disabled : true,
id : 'ObjectPhotosTab',
collapsible : true,
frame : true,
title : 'Photos',
items : [
//here goes button with upload plugin
Ext.create('Ext.ux.upload.Button', {
text : 'Select files',
id : 'ObjectPhotosUploadBtn',
SelectedObjectId : 0,
autoRender : true,
hidden : true,
plugins: [{
ptype : 'ux.upload.window',
title : 'Upload',
width : 320,
height : 350,
pluginId: 'pid'
}],
uploader: {
url : MainSiteUrl + 'getimages.php?a=a&Object=',
uploadpath : '/Root/files',
autoStart : true,
max_file_size : '2020mb',
statusQueuedText: 'Ready to upload',
statusUploadingText: 'Uploading ({0}%)',
statusFailedText: '<span style="color: red">Error</span>',
statusDoneText: '<span style="color: green">Complete</span>',
statusInvalidSizeText: 'File too large',
statusInvalidExtensionText: 'Invalid file type'
},
listeners: {
filesadded: function(uploader, files) {
console.log('filesadded');
return true;
},
.......,
scope: this
}
}),
Ext.getCmp('ImagesDataView') // other stuff
]
});
In my new application I have moved an upload button to the "view" directory (surely through controller) and put plugin params to initComponent like this:
Ext.define('crm.view.ObjectPhotosUploadBtn',{
extend: 'Ext.ux.upload.Button',
text : 'Select files',
id : 'ObjectPhotosUploadBtn',
alias : 'widget.ObjectPhotosUploadBtn',
SelectedObjectId : 0,
autoRender : true,
hidden : false,
initComponent: function() {
this.plugins = {
ptype : 'ux.upload.window',
title : 'Upload',
width : 320,
height : 350,
pluginId: 'pid'
};
this.uploader ={
// exactly the same stuff
};
this.listeners = {
// exactly the same stuff
};
this.callParent();
}
})
New defined button class is called from a panel like this:
ObjectPhotosTab = Ext.create('Ext.Panel', {
disabled : true,
id : 'ObjectPhotosTab',
collapsible : true,
frame : true,
title : 'Photos',
items : [
Ext.widget('ObjectPhotosUploadBtn'), // call button via widget
Ext.getCmp('ImagesDataView') // other stuff
]
});
Here is the header of file /ext-4.2.1.883/src/ux/upload/plugin/Window.js
/**#class Ext.ux.upload.plugin.Window
* #extends Ext.AbstractPlugin
* #author Harald Hanek (c) 2011-2012
* #license http://harrydeluxe.mit-license.org*/
Ext.define('Ext.ux.upload.plugin.Window', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.ux.upload.window',
requires: [ 'Ext.ux.statusbar.StatusBar',
'Ext.ux.statusbar.ValidationStatus' ],
constructor: function(config) {
var me = this;
Ext.apply(me, config);
me.callParent(arguments);
},
init: function(cmp) {
var me = this,
uploader = cmp.uploader;
cmp.on({
filesadded: {
......
Here is the header of file /ext-4.2.1.883/src/ux/upload/Button.js
/**#class Ext.ux.upload.Button
* #extends Ext.button.Button
* #author Harald Hanek (c) 2011-2012
* #license http://harrydeluxe.mit-license.org */
Ext.define('Ext.ux.upload.Button', {
extend: 'Ext.button.Button',
alias: 'widget.uploadbutton',
requires: ['Ext.ux.upload.Basic'],
disabled: true,
constructor: function(config) {
var me = this;
config = config || {};
Ext.applyIf(config.uploader, {
browse_button: config.id || Ext.id(me)
});
me.callParent([config]);
},
initComponent: function() {
var me = this,
e;
me.callParent();
me.uploader = me.createUploader();
......
The problem is that the button is created successfully but it does not do needed plugin action.
I see no errors in ff/chrome console also.
When I inspect "crm.view.ObjectPhotosUploadBtn" through the Illuminations ff plugin, I can see all needed plugin properties of this class.
Please help me to solve this question.

There is too much code for me to quote, but the problem lies in this snippet:
Ext.define('crm.view.ObjectPhotosUploadBtn',{
extend: 'Ext.ux.upload.Button',
...
initComponent: function() {
this.plugins = {
...
};
}
});
By the time initComponent is executed, the plugins have already been constructed and initialized in the constructor, and your initComponent overwrites all that.
What you need instead is to move the plugins blob into the class definition:
Ext.define('crm.view.ObjectPhotosUploadBtn', {
extend: 'Ext.ux.upload.Button',
...
plugins: [{
ptype : 'ux.upload.window',
title : 'Upload',
width : 320,
height : 350,
pluginId: 'pid'
}]
});
The same goes for uploader and listeners assignments.

how to access function in Json

I am able to access the onclick properties function for the printButton property at the end of the block. Although I am unable to initiate the onclick functions under the exportButton property.I have the following code.
B.exporting = {
type : "image/png",
url : "http://export.highcharts.com/",
width : 800,
enableImages : false,
buttons : {
exportButton : {
symbol : "exportIcon",
x : -10,
symbolFill : "#A8BF77",
hoverSymbolFill : "#768F3E",
_titleKey : "exportButtonTitle",
menuItems : [{
textKey : "downloadPNG",
onclick : function() {
this.exportChart()
}
}, {
textKey : "downloadJPEG",
**onclick : function() {
this.exportChart({
type : "image/jpeg"
})**
}
}, {
textKey : "downloadPDF",
onclick : function() {
this.exportChart({
type : "application/pdf"
})
}
}, {
textKey : "downloadSVG",
onclick : function() {
this.exportChart({
type : "image/svg+xml"
})
}
}
}]
},
printButton : {
symbol : "printIcon",
x : -36,
symbolFill : "#B5C9DF",
hoverSymbolFill : "#779ABF",
_titleKey : "printButtonTitle",
onclick : function() {
this.print()
}
}
}
};
I am binding keyboard controls to the click events using the jquery plugin this is what I used to print. This Works!:
Mousetrap.bind('ctrl+s', function(e) { B.exporting.buttons.printButton.onclick(this.print());
});
This code is what I tried to access an individual onclick function under the exportButton property in the json above
Mousetrap.bind('*', function(e) {B.exporting.buttons.exportButton.menuItems[0].onclick;});
The result i get is the value but i want to run the function as the onclick property does.Does anyone know how to run a function under a json property?I Appreciate any help here thanks folks.

Mousetrap.bind('click', B.exporting.buttons.exportButton.menuItems[0].onclick);
Your ctrl-s binding also looks wrong, it should be:
Mousetrap.bind('ctrl+s', B.exporting.buttons.printButton.onclick);
The printButton.onclick function doesn't take an argument. Your binding calls this.print before calling the printButton.onclick function, and then the printButton.onclick function
does it again.

jQuery Simple Dialog Events

I have a simpledialog2 box, its fully functional but im trying to work out a way to call a function when its been loaded.
For example i have
$('<div>').simpledialog2({
mode : 'blank',
animate : false,
transition : 'none',
// dialogAllow : true,
// dialogForce : true,
headerText : 'Statement Metadata',
blankContent : "HTML HERE"
});
After HTML HERE has been loaded what event is fired? Or how can i call javascript once the simpledialog2 is fuly ready?
Similar to pageshow event handler...

Try the following:
$('<div>').simpledialog2({
mode : 'blank',
animate : false,
transition : 'none',
// dialogAllow : true,
// dialogForce : true,
headerText : 'Statement Metadata',
blankContent : "HTML HERE",
callbackOpen: function() {
var me = this;
alert('opened');
setTimeout(function() {me.close();},2000);
}
});
Fiddle:
http://jsfiddle.net/ykHTa/62/

items not loading in sencha touch 2

i have a sencha touch application that uses a tabpanel, a beta version of this application loads all items of the tabpanel and displays it.
with so many items, switching between tabs became slower
for optimization my idea is to load items only when a certain panel is activated after showing a loading mask.
i was able to make it work on first click but when i switch to the same tab another time it's not being filled or at least items are not being showed.
no exceptions are thrown.
Ext.application({
name : 'Sencha',
launch : function() {
var root = contents;
var children = root._listOfContentChild;
var mainPanel = Ext.create('components.NavigationPanel',
{
iconCls : 'more',
listeners: {
activate: function() {
mainPanel .setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
setTimeout(function() {
loadItems(root,children); // returns my items
mainPanel .setItems(items);
mainPanel .setMasked(false);
}, 300);
} } });
var settingsPanel = Ext.create('components.NavigationPanel', {
title : 'Settings',
iconCls : 'settings',
});
view=Ext.Viewport.add({
xtype : 'tabpanel',
deferredRender:true,
tabBarPosition : 'bottom',
activeItem:settingsPanel,
items : [mainPanel,settingsPanel ]
});
}
});
overview:
my application is working correctly if all items are filled at the beginning before pressing on tabs
my problem is when i have a huge number of items and i press on their corresponding tab. it hangs for 1,2 secs.
a person using this application will think that he didn't press correctly on the tab and it will look so slow.
my approach is to load a mask on tab press just for 1 sec, this will make my tab respond automatically when pressed, then i add my items. this idea worked only for the first click, when i switch to another tab and back to the original nothing is being showed (except for the loading mask)
i tried mainPanel.add instead of mainPanel.setItems. i faced another problem, now in the next tap on the panel,my items are shown but without the loading mask as if i'm loading the items at the beginning before pressing.

I figured out the solution. Check the below code.
Hope that helps you!
Code :
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'Sencha',
launch: function() {
//var root = contents;
//var children = root._listOfContentChild;
var mainPanel = Ext.create('Ext.Panel', {
iconCls : 'more',
id:'mpanel',
styleHtmlContent:true,
listeners: {
painted: function() {
mainPanel.removeAll();
mainPanel.add({
masked:{
xtype:'loadmask',
id:'lmask',
}
});
setTimeout(function() {
Ext.getCmp('lmask').hide();
Ext.getCmp('mpanel').add({ xtype:'textfield',label:'Name',required:true });
}, 300);
}
}
});
var settingsPanel = Ext.create('Ext.Panel', {
title : 'Settings',
iconCls : 'settings',
});
view=Ext.Viewport.add({
xtype : 'tabpanel',
deferredRender:true,
tabBarPosition : 'bottom',
activeItem:settingsPanel,
items : [mainPanel,settingsPanel ]
});
}
});
Sample output :