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");
}
}
});
Related
I would like to use an AJAX call (via jQuery) to change the HTML of a widget during the upcast function of a CKEditor widget. Here is what I have tried:
CKEDITOR.plugins.add('mywidget', {
requires: 'widget',
icons: 'mywidget',
init: function (editor) {
editor.widgets.add('mywidget', {
button: 'My widget',
template: '<p class="mywidget">Initial text.</p>',
allowedContent: 'p(!mywidget)',
upcast: function (element) {
if (element.hasClass('mywidget')) {
element.setHtml('After upcasting.');
$.get('http://example.com')
.done(function (response) {
element.setHtml('Updated text after AJAX.');
});
return true;
}
return false;
},
});
}
});
When the widget is first instantiated, as expected, it says:
"Initial text."
After I click "Source" and then click "Source" again, as expected again, the text has changed to:
"After upcasting"
However, when the AJAX request comes back, the text does not change to "Updated text after AJAX".
Does anyone know how I can get at the element from inside the AJAX callback? If it is too late to access the element from the AJAX callback, is there any way to use the response from the callback to retroactively edit the markup of the already-upcasted widget? Thank you!
$.get() is asynchronous so the .done part is called after the upcasting had already completed. Use $.ajax() instead and set async: false.
The modified widget code:
CKEDITOR.plugins.add('mywidget', {
requires: 'widget',
icons: 'mywidget',
init: function (editor) {
editor.widgets.add('mywidget', {
button: 'My widget',
template: '<p class="mywidget">Initial text.</p>',
allowedContent: 'p(!mywidget)',
upcast: function (element) {
if (element.hasClass('mywidget')) {
element.setHtml('After upcasting.');
$.ajax({
url: 'http://www.example.com',
async: false,
success: function (result) {
element.setHtml('Updated text after AJAX.');
}
});
return true;
}
return false;
},
});
}
});
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 have created a custom component, in that there is a textfield on its keyup event i need to filter the store but i m not getting any variable at event generation, but at the time of object creation i am getting the objects.
Below is the code-:
WildCardWindow = Ext.extend(Ext.Window, {
width : 300,
height : 265,
resizable:true,
closeAction:'hide',
title:'WildCard Selection Window',
autoScroll:true,
iconCls:'icon-wildcard',
bodyStyle:'background-color:#FFFFFF',
//#cfg{Array} data-The array of fields/items to show in the window
data: null,
store:null,
/**
* #property
* #type String
* The message displayed when mouse over on an uncommitted field
*/
uncommittMsg : '<b>Warning!</b> This field has been newly added in
the form designer. ' + 'It <i>can</i> be used now,
but you should be sure to save the uncommitted
changes ' + 'in the open form designer window.',
defaultIconCls : '',
initComponent : function(){
this.createStore(this.data);
this.items = this.createDataView();
WildCardWindow.superclass.initComponent.call(this);
},
createDataView: function(){
this.dataView = new Ext.DataView({
store: this.store,
autoWidth:true,
tpl: this.createTpl(),
autoHeight:true,
singleSelect : true,
overClass:'icon-view-over',
selectedClass:'icon-view-selected',
itemSelector:'.icon-dataview-item',
style:'cursor:pointer'
});
this.textField = new Ext.form.TextField({
fieldLabel: 'To',
tabTip:'Start typing to filter by field name',
name: 'f_to',
enableKeyEvents :true,
listeners: {
keyup: function () {
this.store.filter('name',this.textField.getValue(),true,false);
//Here I am not getting this.store and this.textField ???
}}
});
return [this.dataView,this.textField]
},
createStore: function(data){
this.store = new Ext.data.JsonStore({
data:data,
autoDestroy:true,
fields:[
{name: 'id'},
{name: 'name'},
{name: 'fieldclass'},
{name: 'type'},
{name: 'options'},
{name: 'isMultiMember',type:'boolean'},
{name: 'isUnCommitted',type:'boolean'}
]
});
return this.store;
},
listeners:{
close: function(){
this.store.filter('name','',true,false);
}
}
})
In the keyup of textfield i am not getting this.store and this.textfield ??
Any suggestions or where i am wrong.
Please reply soon
Because you lose your scope when that function is called.
You can do two things:
Use the bind function to copy the scope:
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.Function-method-bind
I think this also works and is a more elegant solution:
var me = this;
this.textField = new Ext.form.TextField({
fieldLabel: 'To',
tabTip:'Start typing to filter by field name',
name: 'f_to',
enableKeyEvents :true,
listeners: {
keyup: function () {
me.store.filter('name',this.getValue(),true,false);
}}
});
The new release of ExtJS can make your chrome unstable (Or is it my code?)! Let me explain my situation.
I am working on the new MVC architecture of ExtJS 4.0. I have a tree panel displaying my applications menu or navigation. As per the architecture, I tried to split my tree panel into controller, view and a separate store.
Here is my view:
Ext.define('CRM.view.menu.View', {
alias: 'widget.menutree',
extend: 'Ext.tree.Panel',
initComponent: function() {
console.log('initComponent of View...');
Ext.apply(this, {
title: 'Simple Tree',
width: 200,
store: 'MainMenu',
rootVisible: false
});
this.callParent(arguments);
}
});
My tree's store:
Ext.define('CRM.store.MainMenu', {
extend: 'Ext.data.TreeStore',
constructor: function() {
console.log('Constructor of MainMenu TreeStore');
config = Ext.apply(this,{
proxy: {
type: 'ajax',
url: 'data/menu.json'
},root: {
text: 'Menu',
id: 'src',
expanded: true
}
});
this.callParent(arguments);
}
});
And in my controller I have provided my store info as well. Here is part of my controller config:
Ext.define('CRM.controller.MainMenu',{
extend: 'Ext.app.Controller',
stores: ['MainMenu'],
refs: [
{ref:'menu',selector: 'menutree'},
{ref:'cp',selector: 'centerpane'}
],
.
.
.
On initial execution, I get the following error:
Object MainMenu has no method
'getRootNode'
But now, I get more weird error:
Notice that chrome stops execution in the constructor of the tree store.
At the same time, in firefox:
Firefox executes better, but there is no application rendered!
After some trail and error.. I did find a way to get my application running.. and that is to avoid using my store and directly provide the store information as shown below:
Ext.define('CRM.view.menu.View', {
alias: 'widget.menutree',
extend: 'Ext.tree.Panel',
initComponent: function() {
console.log('initComponent of View...');
Ext.apply(this, {
title: 'Simple Tree',
width: 200,
store: {
proxy: {
type: 'ajax',
url: 'data/menu.json'
},root: {
text: 'Menu',
id: 'src',
expanded: true
}
},
rootVisible: false
});
this.callParent(arguments);
}
});
Now the application executes with no issues at all!
Did anybody try creating tree panel using MVC architecture? I have no clue into how to fix this!
Looks like this is a known problem!!! Quoting from the ExtJS forums:
The parent class of "Ext.tree.Panel"
looks for the store in the store
manager in the "initComponent" method,
but "Ext.tree.Panel" tries to use it
before.
So, One way would be to code your store into your tree another way is to reassign the store in initComponent method. Here is the code:
initComponent: function(){
this.store = Ext.data.StoreManager.lookup(this.store);
this.callParent(arguments);
}
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.