I have a function inside a toolbar, let's call it:
Ext.define('MyArchive.Toolbar', {
search: function() {
console.log('searching');
}
}
Now I'd like to call this function when clicking a button. So I'm adding some click handlers in the afterRender on the toolbar setup:
afterRender: function() {
Ext.getCmp('search-button').on('click', this.search);
}
However, this doesn't work and I ultimately need to go the full route of:
afterRender: function() {
Ext.getCmp('search-button').on('click', function() {
quick_search();
)};
}
Any particular reason why my first attempt doesn't apply the click handler as I expect?
Thanks for any explanations or refactorings! Additional patterns/idioms welcome...
Next try:
var panelOverall = new Ext.form.FormPanel({
html: 'bla',
search: function() {
console.log('searching');
},
buttons: [
{
text: 'Moo',
id: 'button1',
handler: function(){
//window.destroy();
}
}
],
afterRender: function() {
Ext.getCmp('button1').on('click', this.search);
}
});
is working for me.. am I missing something?
Related
I'm confused. I can open the modal using this:
onNext: function() {
$('#modal').modal('toggle');
}
But I can't close the modal with the same function with another $('#modal').modal('toggle'); or $('#modal').modal('hide').
I even tried creating a registerHelper but it still doesn't.
hopscotch.registerHelper('closeModal', function() {
$('#modal').modal('toggle');
});
Oops, I made a mistake. I can close the modal using the onEnd setting.
var tour = {
id: 'tour1',
steps: [{
target: 'Target',
title: 'Target Title',
content: 'Target Content'
}
],
onEnd: ["closeModal"]
}
Made a callback helper to close the modals.
hopscotch.registerHelper('closeModal', function() {
$('.modal').modal('hide');
});
I am writing a script for a project, it has a function to collapse or open the sidebar on click on hamdurger icon but when I click it gives me error
TypeError: this.CollapseSidebar is not a function
The following is my code:
(function($) {
'use strict';
var Prtm = {
Constants: {
LEFTMARGIN:'315px',
COLLAPSELEFTMARGIN: '63px',
},
PrtmEle:{
BODY: $('body'),
SIDEBAR: $('.prtm-sidebar'),
SIDENAV: $('.sidebar-nav'),
MAIN: $('.prtm-main'),
HEADER: $('.prtm-header'),
CONTENTWRAP: $('.prtm-content-wrapper'),
CONTENT: $('.prtm-content'),
PRTMBLOCK: $('.prtm-block'),
FOOTER: $('.prtm-footer'),
HAMBURGER: $('.prtm-bars'),
},
Init:function(){
this.BindEvents();
},
BindEvents:function(){
this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,function(){
this.CollapseSidebar();
});
},
CollapseSidebar: function(){
this.PrtmEle.HAMBURGER.toggleClass("prtm-sidebar-closed is-active");
this.PrtmEle.BODY.toggleClass("prtm-sidebar-closed is-active");
this.PrtmEle.SIDEBAR.toggleClass('collapse');
},
};
Prtm.Init();
})(jQuery);
When I change this.CollapseSidebar to Prtm.CollapseSidebar it works properly. What I am doing wrong here and how it can be resolved?
Why it do not work? Because a function() binds its own this.
One thing you can do is to use Arrow function which do not bind its own this - like this:
BindEvents:function(){
this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,() => {
this.CollapseSidebar();
});
}
Inside you click function this will refer to the window - so either you can create a temporary variable like the below or use the arrow function:
BindEvents:function() {
let $this = this;
this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,function() {
$this.CollapseSidebar();
});
}
I'm using button to move between tabs. But for that I have to remember the user's tab position. So my buttons keep working when the user leaves the screen and returns later.
The tabchange event should be the event to use for that, however I cannot get it to trigger.
View:
Ext.define('MyApp1.view.Home',
{
extend: 'Ext.form.Panel',
requires:
[
'Ext.tab.Panel'
],
xtype: 'home',
config:
{
itemId: 'home',
layout: 'fit',
items:
{
xtype: 'tabpanel',
tabBarPosition: 'top',
height: 500,
renderTo: document.body,
listeners:
{
beforetabchange: function (tabs, newTab, oldTab)
{
console.log('tab is going to change');
},
tabchange: function ()
{
console.log('recorded tab change from listener');
},
change: function ()
{
console.log('change of tab from listener');
}
},
items:
[
{
title: 'one'
},
{
title: 'two'
}
]
}
}
});
Controller:
Ext.define('MyApp1.controller.HomeController',
{
extend: 'Ext.app.Controller',
requires:
[
'MyApp1.view.Main'
],
config:
{
refs:
{
home: 'home'
},
control:
{
home:
{
beforetabchange: 'onTabChange',
tabchange: 'onTabChange',
change: 'onTabChange'
}
}
},
init: function()
{
console.log('HomeController initialized');
},
onTabChange: function ()
{
console.log('active tab changed');
}
});
So I see the initialization text in the log but none of the tab change events when I click the tab buttons.
First off it seems you can only implement these listeners on the tabBar of the tabPanel
Having looked through the source code though it seems that this never get's fired even though it is documented. http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/source/Bar3.html#Ext-tab-Bar-event-tabchange
What I could suggest is either as you pointed out to hook into the activeitemchange event on the panel or activetabchange (which strangely is firing twice) event of the tabbar as activeitemchange also seems not to work as intended.
https://fiddle.sencha.com/#fiddle/g44
Turns out I was looking at the ExtJs 5 docs, instead of the Sencha 2.4.1 docs...
Which only has the 'activeitemchange' event.
Ive just started to explore sencha. Stuck up with this. Help Appreciated :)
This is my java script code, in the below line handler function i am calling the following the method, which in under items and parent xtype form-panel.
{
xtype:'panel',
defaults:{
xtype:'button',
style:'margin: 0.1em',
flex:1
},
layout:{
type:'hbox',
align:'center'
},
items:[
{
text:'Submit',
handler:this.makeReq,
scope:this
},
{
text:'Terms & Conditions',
}
]
}
This is the method that am calling in the above function, but it seems does not happen anyting.
makeReq: function() {
alert("Hey There");
}
I really suggest you follow the Sencha Touch 2 MVC model in this case. You can give your button an action like this:
{
text:'Submit',
action: 'submit'
}
Then you can refer this button and set the function for it inside your app's controller:
config: {
refs: {
submitButton: 'button[action=submit]',
},
control: {
submitButton: {
tap: 'makeReq'
},
},
makeReq: function() {
alert("Hey There");
}
}
I have an issue with the next code block:
run: function(e, row){
var me = this;
var container = Ext.getCmp('centercontainer');
try {
container.removeAll();
} catch(e) { }
// This block is called from another file, I just put it here to show you.
me.panels = [{
xtype: 'tabpanel',
id: 'containertabpanel',
items: [{
itemId: 'package',
title: me.PackageTitle
},{
itemId: 'excursion',
title: me.ExcursionTitle
}]
}];
// Reset
container.setTitle(me.EditDestinationTitle + row.data.name);
container.add(me.panels);
me.tabs = container.getComponent('containertabpanel');
// console.log(Ext.ComponentQuery.query('#containertabpanel > #package'))
me.control({
// Work with
// 'tab': {
// Doesn't work
'containertabpanel > package': {
mouseover: me.doPackage
}
})
},
Anyone knows how do I get to catch the click event of "package" item of tabpanel component?
I saw when I use just "tab" selector on this.control query, that work, but I can't get only "package" tab component.
Thank you in advance.
In your definition of your tabpanel you can specify -
listeners:{
click:{
fn: function(){
//click handling code goes here
}
}
}
If I understood correctly this is controller code and you are trying to catch an item click on the panel which is one of many in a tabpanel
What you can do is identify your panel by any property that is unique to it via the component query syntax like this: button[myprop=blah]
This syntax will match any buttons on the page with the following config:
{
xtype:'button'
myprop:'blah'
}
In your case you can try tab[itemId=package]
What you also need to be careful about is controller can listening only for events that are fired by the components. Make sure the event you are listening for is fired (check the docs). You can always fire custom events if necessary.
You need to do this
me.control({
// Work with
// 'tab': {
// Doesn't work
'containertabpanel > #package': {
mouseover: me.doPackage
}
})