Develop Reference

ExtJS - How do I pass new config item to component without inheriting a class?

In ExtJS 6.02, I would like to add a new item currentPage to the config of a component:
{
xtype : 'button'
, text : 'Next'
, iconCls : 'arrow-right'
, config: {
currentPage : 1
}
, bind: {
currentPage : '{currentPage}'
, hidden : '{hideNextButton}'
, disabled : '{disableNextButton}'
}
, publishes : 'currentPage'
, handler: function(btn) {
this.setCurrentPage(this.getCurrentPage()++);
},
}
This is not working, this.getCurrentPage() and this.setCurrentPage() aren't available.

How to access parent component ExtJS?

For some reason, the blur event doesn't get fired when the below floating panel loses focus. However, when I listen to the 'el' of the panel for the blur event, it gets registered as shown in the listeners config. What I want to do is hide the panel when the blur event occurs. How do I get access to the parent panel ?
Ext.define('NoteKeeper.view.tabs.AttachmentPanel',{
extend : 'Ext.panel.Panel',
alias : 'widget.attachmentPanel',
itemId : 'attachmentPanel',
floating : true,
focusable : true,
width : 200,
height : 150,
layout : {
type : 'vbox'
},
items : [
{
xtype : 'grid',
store : null,
columns : [
{
text : 'File Name',
dataIndex : 'fileName'
},
{
dataIndex : 'remove'
}
]
},
{
xtype : 'button',
text : '+'
}
],
listeners : {
el: {
blur: {
fn: function()
{
console.log( this );
//how do I access the 'attachmentPanel' from here
//so I can hide it ?
}
}
}
},
noteId : null,
initComponent : function()
{
this.callParent(arguments);
}
});
Please note that there can be multiple instances of these 'attachmentPanel's.

The following appears to work fine:
listeners : {
el: {
blur: {
fn: function()
{
console.log(this);
var elId = this.id;
var attachmentPanels = Ext.ComponentQuery.query('#attachmentPanel');
Ext.Array.forEach( attachmentPanels, function(cmp){
if(cmp.id == elId)
{
cmp.hide();
return false;
}
});
}
}
}
Please let me know if there is better/more efficient solution. Thanks!

There is a reference from the element to the owning component, in form of the component property, so from the scope of the element, you can access the panel like so:
var attachmentPanel = this.component;

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 :