Extjs add a button to Desktop TaskBar QuickStart - javascript

I need to add a button to the taskbar quickstart, but i do not want to open a module window, for example a logout button that will show a confirm messagebox, i have tried like this:
getTaskbarConfig: function () {
var ret = this.callParent();
me = this;
return Ext.apply(ret, {
quickStart: [
{ name: 'Window', iconCls: 'icon-window', module: 'ext-win' },
{ name: 'Logout', iconCls:'logout', handler: me.onLogout}
]
});
},
onLogout: function () {
Ext.Msg.confirm('Logout', 'Are you sure you want to logout?');
},
And i changed the getQuickStart function of the TaskBar.js file to this:
getQuickStart: function () {
var me = this, ret = {
minWidth: 20,
width: Ext.themeName === 'neptune' ? 70 : 60,
items: [],
enableOverflow: true
};
Ext.each(this.quickStart, function (item) {
ret.items.push({
tooltip: { text: item.name, align: 'bl-tl' },
overflowText: item.name,
iconCls: item.iconCls,
module: item.module,
//handler: me.onQuickStartClick, **original code**
handler: item.handler == undefined ? me.onQuickStartClick : item.handler,
scope: me
});
});
return ret;
}
But it does not work, is there a way to add a simple button to the taskbar quickstart?

Thanks for your reply. I have solved the issue. In the TaskBar.js file i changed this line:
handler: item.handler == undefined ? me.onQuickStartClick : item.handler
for this one:
handler: item.handler ? item.handler : me.onQuickStartClick
Actually, for me, both do the same, but for any weird reason the code works with that change.

Related

ExtJS 7.1 Tag field is executing XSS tag

I am having an issue regarding the tagfield component when entering <img src=a onerror=alert('xss!')>. This tag is being executed after entering the whole value. I've tried preventing the tag execution on keyup, keypress, keydown, and beforequery events and it still executing. This block of code prevent the event from executing when it detects an XSS tag.
Ext.application({
name: 'Fiddle',
launch: function () {
var shows = Ext.create('Ext.data.Store', {
fields: ['id', 'show'],
data: []
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Sci-Fi Television',
height: 200,
width: 500,
items: [{
xtype: 'tagfield',
itemId: 'tagField',
fieldLabel: 'Select a Show',
store: shows,
displayField: 'show',
valueField: 'id',
queryMode: 'local',
filterPickList: false,
listeners: {
beforequery: function () {
var editor = Ext.ComponentQuery.query('#tagField')[0];
if (editor.inputEl.getValue().search(new RegExp('(<([^>]+)>)')) >= 0) {
editor.inputEl.dom.value = '';
return false;
}
},
keypress: function (textfield, event) {
var editor = Ext.ComponentQuery.query('#tagField')[0];
if (editor.inputEl.getValue().search(new RegExp('(<([^>]+)>)')) >= 0) {
editor.inputEl.dom.value = '';
return false;
}
},
keydown: function (textfield, event) {
var editor = Ext.ComponentQuery.query('#tagField')[0];
if (editor.inputEl.getValue().search(new RegExp('(<([^>]+)>)')) >= 0) {
editor.inputEl.dom.value = '';
return false;
}
},
}
}]
});
}
});
enter image description here
This took a little while to hunt down, but apparently in Ext.form.field.ComboBox, there's an onFieldMutation handler that really is the key to all of this. Take a look at this Fiddle and the code that takes care of handling this... I believe this is what you're looking for:
Ext.define('ComboOverride', {
override: 'Ext.form.field.ComboBox',
onFieldMutation: function (e) {
var inputDom = this.inputEl.dom;
if (Ext.String.hasHtmlCharacters(inputDom.value)) {
inputDom.value = '';
alert('XSS Detected, Removing');
}
return this.callParent(arguments);
}
});

how to add function to create a window extjs4?

my application is web desktop using 4.2 extjs. i just want to add my window a controller so that i can create a MVC but i cant figure out how to add the controller.
Here's my code. The win variable is always undefined. how to fix it.?
please help
Ext.define('MyDesktop.Modules.Itemmanagement.Client.Itemmanagement', {
requires: ['Ext.tab.Panel',
'Ext.ux.CheckColumn'],
id: 'itemmanagement-win',
init: function () {
var me = this;
this.launcher = {
text: 'Itemmanagement Module ',
iconCls: 'icon-itemmanagement',
handler: this.createWindow,
scope: this
};
},
createWindow: function () {
var me = this;
var desktop = this.app.getDesktop();
var win = desktop.getWindow('itemmanagement-win');
if (!win) {
Ext.application({
name: 'USER',
appFolder: '/modules/',
controllers: [
"User"
],
launch: function () {
win = desktop.createWindow({
id: 'itemmanagement-win',
title: 'Item Management',
width: 600,
height: 505,
iconCls: 'icon-itemmanagement',
animCollapse: false,
constrainHeader: true,
layout: 'fit'
});
}
});
}
win.show();
return win;
}
});
Create the window in your current application and don't create a new application.
createWindow: function () {
var me = this;
var desktop = this.app.getDesktop();
var win = desktop.getWindow('itemmanagement-win');
if (!win) {
win = desktop.createWindow({
id: 'itemmanagement-win',
title: 'Item Management',
width: 600,
height: 505,
iconCls: 'icon-itemmanagement',
animCollapse: false,
constrainHeader: true,
layout: 'fit'
});
}
win.show();
return win;
}
Define a controller in your controller folder (e.g. app/controller/ItemmanagementWindow.js).
Add it to your controller section in your Application.
Call in the init function this.control() with component queries you are interested and listen to the events.
Ext.define('MyDesktop.controller.ItemmanagementWindow',{
extend: 'Ext.app.Controller',
init: function(){
this.control({
// selector of window we want to add listeners to
'#itemmanagement-win' : {
// events we listen to
afterrender: this.onAfterRender
}
});
},
// handler function of the afterrender event
onAfterRender: function(window, eOpts){
//do some stuff in the after render event ...
}
});
See Application, ComponenQueries and MVC architecture for more informations

handle click on Ext.js panel header

I am trying to handle clicks on ext.js panel header (living inside of an accordion with other panels..), now the header is an extended header, and it contains a number of items (not tools) in it. Problem is that when I set titleCollapse:true, clicks on my items are propagated to the header, which collapses.
I want to set titleCollapse:true so I the users will be able to collapse/expand by clicking the header and not only the collapse tool. But, then, this problem..
let me answer myself...
Ext.define("WebPhone.view.CallLogListHeader", {
extend: 'Ext.panel.Header',
xtype: 'callLogListHeader',
layout:
{
type: 'hbox',
align: 'middle',
pack: 'end'
},
//titlePosition: 0,
items:
[
{
xtype: 'button',
text: '',
cls: 'ClearCallLogButtonCls',
handler: function () {
var me = this;
me.container.component.handledByTool = true;
var view = Ext.create('WebPhone.view.ApproveClearLogs');
view.show();
}
}
],
initComponent: function()
{
var me = this;
me.callParent( arguments );
me.handledByTool = false;
},
listeners:
{
click: function()
{
var me = this;
if( me.handledByTool )
{
me.handledByTool = false;
return;
}
var parent = me.findParentByType( 'contact-list-view' );
if( parent.collapsed )
parent.expand();
else
parent.collapse();
}
}
});

Set dialog field value as selected text

I want to code CKEditor plugin. I have added button on panel and when I press it dialog is shown. In this dialog I can set text and after OK pressed this text inserted to the editor.
But I want add functionality. When I select text in editor and press this button I want see selected text in that dialog field. And after editing and press Ok selected text must be replaced with new one.
Thanks!
This is not 100% working, the first part is working, the final replacement isn't..
CKEDITOR.plugins.add( 'example',
{
init: function( editor )
{
editor.addCommand( 'exampleDialog', new CKEDITOR.dialogCommand( 'exampleDialog' ) );
editor.ui.addButton( 'example',
{
label: 'Insert a Link',
command: 'exampleDialog'//,
//icon: this.path + 'images/icon.png'
} );
CKEDITOR.dialog.add( 'exampleDialog', function( editor )
{
return {
title : 'example Properties',
minWidth : 400,
minHeight : 200,
contents :
[
{
id : 'general',
label : 'Settings',
elements :
[
{
type : 'text',
id : 'mystring',
label : 'text',
commit : function( data )
{
data.text = this.getValue();
}
}
]
}
],
onShow : function() {
//this._ranges = editor.getSelection().getRanges()
var mySelection = editor.getSelection().getSelectedText();
this.setValueOf("general","mystring",mySelection);
},
onOk : function()
{
var data = {};
this.commitContent( data );
var txt = data.text;
editor.insertText(txt); //this is not correct, since selection is being cleared...
}
};
});
}
});
My solution was to simply set it inide the onShow function:
onShow: function () {
this.setValueOf('my-tab-id', 'my-element-id', editor.getSelection().getSelectedText());
// ...
},
Full code skeleton:
(function () {
CKEDITOR.dialog.add('mySelectorDialog', function (editor) {
return {
contents: [
{
id: 'my-tab-id',
label: 'My Tab Label',
elements: [
{
id: 'my-element-id',
type: 'text',
label: 'My Element Label'
}
// ...
]
}
],
onShow: function () {
this.setValueOf('my-tab-id', 'my-element-id', editor.getSelection().getSelectedText());
// ...
},
onOk: function () {
// ...
}
// ...
};
});
})();

SenchaTouch2 - Listening to store load event, set tab panel item "badgeText"

I'am trying to build my first little Sencha Touch 2 app. I've created some stuff that is working as expected and now I could like to create some event handling stuff.
I've created the following store:
Ext.define('Mobile.store.Blogs', {
extend: 'Ext.data.Store',
config: {
},
listeners: {
'load' : function(store,records,options) {
store.loaded = true;
console.log("fired blogCountAvailable");
store.fireEvent("blogCountAvailable");
},
'blogCountAvailable': function(store, records, options) {
console.log("blogCountAvailable has been fired");
}
}
});
This stuff works as expected, but now comes the next step.
Here is the code of my tab panel bar:
Ext.create("Ext.tab.Panel", {
xtype:'mainTabPanelBottom',
tabBarPosition: 'bottom',
fullscreen: true,
items: [
{
title: 'Blog',
iconCls: 'home',
xtype:'mainpanel'
},
{
title: 'Users',
iconCls: 'user',
xtype:'userpanel'
}
],
listeners: {
blogCountAvailable: function(tabpanel, newTab) {
var tab = newTab.tab,
badge = 10;
tab.setBadge(badge);
console.log("blogCountAvailable has been fired");
}
}
});
My question now is how I could achieve it to "fire" my custom event blogCountAvailable to the tab panel?
The easiest way is just set an id for your TabPanel and then:
Ext.getCmp('your_TabPanel_id').fireEvent("blogCountAvailable");

Categories