I have a main panel that is comprised of sub panels and I would like to fire an event in the main panel and listen to it on the sub panel.
I can fire the event within the subpanel and everything works but i can't seem the fire the event from the main panel.
My namespace for the sub panel is "test.testCard" and I've tried to fire the event on it with no success.
Here is an example of how to do this:
Ext.setup({
onReady: function() {
var mainPanel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
renderTo: Ext.getBody(),
listeners: {
'mycustomevent': function() {
alert('event fired!');
}
},
items: [
{
items: [
{
html: 'My inner panel'
},
{
xtype: 'button',
text: 'Click me!',
handler: function() {
mainPanel.fireEvent('mycustomevent', this);
}
}
]
}
]
});
}
});
You can see that I am creating a reference to mainPanel and then referencing it later in my code in the button handler, where I then call fireEvent with my custom event. Then in my mainPanel, I am adding a listener for mycustomevent.
And as previously noted, it is best to post on the Sencha Forums, as you will get a much faster response.
Related
I have up and down arrows in my Kendo UI grid. For the first item on the grid I do not want do allow the item to move down (it is impossible) and for the last item I do not want the item to move up (also impossible).
How can I do this?
$(document).ready(function() {
//Set URL of Rest Service
var loc = (location.href);
var url = loc.substring(0,loc.lastIndexOf("/")) + "/xpRest.xsp/xpRest1";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: url,
type: 'GET'
},batch: false
}});
dataSource.read();
$("#gridIDNoScroll").kendoGrid({
dataSource: dataSource,
pageSize: 15,
noRecords: true,
selectable : false,
columns : [{
field : "name"
},{
field : "strDate",
width : 150
},{
field : "$10",
width : 150
},{
command: [
{
text: " ",
//click: moveDown,
imageClass: "k-icon k-i-arrow-s",
icon: "k-icon k-i-arrow-s",
title: "Up",
enable: false
},
{
text: " ",
//click: moveUp,
imageClass: "k-icon k-i-arrow-n",
icon: "k-icon k-i-arrow-n"
}
],
width:"90px"
},
]
});
});
This worked for me when I needed to disable the button. Use the databound event to basically change the state, use off to remove the event handler, and then override the click event. Something like this:
$('.k-grid-add').addClass('k-state-disabled');
$('.k-header').off('click').on('click', '.k-grid-add', function (e) {
// add new logic here or ignore it
});
If you have multiple buttons in the toolbar, the something like this:
$('.k-grid-add').addClass('k-state-disabled');
$('a.k-grid-add').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
});
You can use the dataBound event of the Grid to apply a k-state-disabled CSS class to the desired buttons in the first and last row of the Grid.
Keep in mind that k-state-disabled only applies a "disabled" look, but the click event will still fire and the command function will execute. You can skip the row move logic for disabled buttons.
On a side note, you can use a command name to find buttons in the DOM more easily. For example, a command button with a name foo will have a CSS class of k-grid-foo.
I have declared a view as shown below:
Ext.define('App.view.About', {
extend: 'Ext.Panel',
id: 'about',
xtype: 'aboutpanel', // used as reference from Main.js
config: {
title: 'About',
iconCls: 'icon-file',
scrollable: true,
styleHtmlContent: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'About'
},
html: 'This page will contain basic information.'
}
});
I have also declared a controller as shown below:
Ext.define('App.controller.About', {
extend : 'Ext.app.Controller',
config : {
refs : {
about : '#about'
}
},
init : function () {
var me = this;
me.getAbout().setHtml('Hello'); // just for testing
}
});
However in the Developer Tools of Chrome am getting an error "Cannot call method 'setHtml' of undefined". Therefore as I understand it, the controller is not getting the view by id. Am using Sencha Touch 2.2.1.
Any help please? Thanks in advance,
You won't have access to the refs in the init() function of the controller. To get similar functionality, you could do your code as an initialize listener on the about panel:
Ext.define('App.controller.About', {
extend : 'Ext.app.Controller',
config : {
refs : {
about : '#about'
},
control: {
about: {
initialize: 'initAbout'
}
}
},
initAbout: function () {
var me = this;
me.getAbout().setHtml('Hello'); // works now!
}
});
As a side note, it is redundant to give your components an id in in the definition. You should reserve id for when you're instantiating components (and you should probably use itemId instead of id in that case anyway).
I've got a problem with the JQuery events in one of my Backbone.Marionette Views. I have defined some click and keyboard events. But some of them are not working. For example I want that the fetch-function is called every time the keyup event is triggered.
So here is the code:
return Backbone.Marionette.ItemView.extend({
tagName: 'div',
template: Template,
events:{
'click .yes': 'yes',
'click .no': 'no',
'keyup #citySearch': 'fetch'
},
yes : function() {
this.close();
},
no : function() {
this.close();
},
initialize: function(){
this.collection = new AreaCollection();
this.collection.on('sync', this.onShow, this);
this.sourceArr = [];
},
onShow: function() {
var that = this;
$('#citySearch').typeahead({
source: that.sourceArr
});
},
fetch: function(ev) {
var that = this;
that.collection.fetch({
data : {
query : $(ev.currentTarget).val(),
type : 'cities'
},
success: function(response) {
for (var i = 0; i < response.length; i++) {
that.sourceArr.push(response.models[i].get('name'));
}
}
});
}
});
But the keyup-Event is never fired. I also tried it with the "change"-event, which is also not working. When i use "keydown" or "keypress" instead then everything is fine and the fetch-function is called correctly.
I also tried to bind the event to that input-field manually in the initialize-function with
$('input#citySearch').bind('keyup',function() {
console.log('keyup');
});
But this is also not working. It only works if I bind the event to the input field within my underscore-Template file. But that couldn't be the solution.
Does anybody have an idea what the problem could be?
I can think of only one reason for this. And that is:
input#citySearch is not part of your itemView. This means you are NOT binding your fetch function to keyup event inside the container element of your view.
If you want to bind to something outside your view, you can trigger an event to the View in which the element resides.
I cant register any events with the "on" Mehotd.
Uncaught TypeError: Cannot call method 'on' of undefined
Ext.define('faragoo.view.Main', {
extend: 'Ext.Container',
alias: 'widget.stream',
xtype: 'stream',
id : 'stream',
requires: [
'Ext.TitleBar',
'Ext.form.Panel'
],
initialize: function () {
this.on('afterrender', function() { alert('rendered'); } );
}
}
And this simple example doesnt work also :
Ext.Viewport.on('orientationchange', function() { console.log("orientationchange"); }, this, {buffer: 50 });
Same Error :-(
This guide explains how to properly add events to a component.
Bind the event after the component is created:
var myButton = Ext.Viewport.add({
xtype: 'button',
text: 'Click me'
});
myButton.on('tap', function() {
alert("Event listener attached by .on");
});
Or bind an event with using a listener config:
Ext.Viewport.add({
xtype: 'button',
text: 'My Button',
listeners: {
tap: function() {
alert("You tapped me");
}
}
});
All I want to do is handle a click on an extJS panel.
I've tried all the of suggestions on this question plus all I could find elsewhere but each of them fail in the ways described below.
What is the correct syntax to add a click event handler to a extJS panel?
[Edit: For the sake of others who may find this question later, I'll add some comments inline to make this easier to decipher --#bmoeskau]
doesn't execute handler:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem',
listeners: {
click: function() {
alert('ok');
}
}
});
[Ed: click is not a Panel event]
doesn't execute handler:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem',
listeners: {
render: function(c) {
c.body.on('click', function() {
alert('ok');
});
}
}
});
[Ed: The Panel is never being rendered -- add renderTo config. Next, you'll hit a null error telling you that c is not a valid variable. Do you mean menuItem1 instead?]
doesn't execute handler:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem'
});
Ext.getCmp('panelStart').on('click', function() {
alert('ok');
});
[Ed: click is not a Panel event. Also, the Panel is not yet rendered, so if you switched the callback to be on the element rather than the Component you'd get a null error.]
gets error: Ext.get('panelStart') is null:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem'
});
Ext.get('panelStart').on('click', function() {
alert('ok');
});
[Ed: It's not rendered, see above. Switching from getCmp to get means you are switching from referencing the Component (which does exist, but does not have a click event) to referencing the Element (which does have a click event, but is not yet rendered/valid).]
makes the panel disappear:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem',
listeners: {
'render': {
fn: function() {
this.body.on('click', this.handleClick, this);
},
scope: content,
single: true
}
},
handleClick: function(e, t){
alert('ok');
}
});
[Ed: The scope being passed into the callback (content) is not a valid ref in this code (this was copy-pasted incorrectly from another sample). Since the Panel var is created as menuItem1 and the callback is intended to run in the panel's scope, scope var should be menuItem1. Also, this Panel is never rendered, see prev comments.]
gives the error "Ext.fly(menuItem1.id) is null":
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem'
});
Ext.fly(menuItem1.id).addListener('click', Ext.getCmp(menuItem1.id) , this);
[Ed: Panel is not rendered, see above]
...put outside Ext.onReady()...
gets error: Ext.getCmp('panelStart') is null
Ext.getCmp('panelStart').on('click', function() {
alert('okoutside');
});
[Ed: Panel is likely not rendered at the time this code is run. Also, click is not a Panel event.]
...put outside Ext.onReady()...
gets error: Ext.get('panelStart') is null
Ext.get('panelStart').on('click', function() {
alert('okoutside');
});
[Ed: See above]
...put outside Ext.onReady()...
gets error: Ext.fly('panelStart') is null
Ext.fly('panelStart').on('click', function() {
alert('okoutside');
});
[Ed: See above]
For the last three, I checked in Firebug and <div id="startPanel"> exists:
It works with JQuery:
So with JQuery I simply have to do this and it works:
$('body').delegate(('#panelStart'), 'click', function(){
alert('ok with jquery');
});
[Ed: This is not a good approach. It's simply delaying attaching of the handler until later, when the element actually shows up in the DOM (which could also be done via Ext btw, but would still not be the proper approach). I spelled out the correct approach, as linked in my answer below. The OP's attempts are all very close, but each is missing one or two key pieces.]
How can I attach a click handler like this with extJS?
try this:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem',
listeners: {
afterrender: function (comp) {
var element = comp.getEl();
element.on('click', function() {
alert('ok')
});
}
}
});
[For anyone else reading this, I went through a fairly thorough explanation of this already here.]
You are missing a few key concepts:
click is not a valid Panel event, so adding a click handler on a Panel will do nothing (this is the issue in most of the code you posted above).
In this code:
var menuItem1 = new Ext.Panel({
...
});
content.body
You copy-pasted from another answer, but incorrectly. content in the other code referenced the Panel that was created -- it is a variable. In this code you created the Panel as menuItem1 but then are trying to reference it as content?
Please re-read my previous explanation about how rendering works in the other answer I gave you. You must either add a Panel to a container that renders it, or render it directly (via the renderTo config). If you do neither, the Panel will not show up.
Using jQuery's delegate function is not the proper approach with Ext JS components.
If you want to listen to events on Ext.Elements inside of a panel, you use the element property when calling addListener or passing in listeners config, instead of waiting for the afterrender event just to set the listeners
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem',
listeners: {
click: {
element: 'el', // could be 'body', or any other Ext.Elements
// that are available from the component
fn: function() {}
}
}
});
Or a more simple approach:
listeners: { 'expand': {fn: adminSelected }}