Scope issue in extjs 4 - javascript

I have this treepanel and i want to call this.getId() method of mainpaneltree from inside "Expand all" button But all i get is method undefined.I tried to put scope:thisin config objects but no success.
Ext.define('MA.view.patient.Tree', {
extend : 'Ext.tree.Panel',
alias : 'widget.EditPatientTree',
title : 'Simple Tree',
width : 150,
store:'Tree',
dockedItems : [ {
xtype : 'toolbar',
items : [ {
text : 'Expand All',
scope: this,
handler : function() {
//this.expandAll gives "Uncaught TypeError: Object [object DOMWindow] has no method 'getId'"
this.expandAll();
//the same error for this.getId();
this.getId();
}
} ]
} ],
rootVisible : false,
initComponent : function() {
this.callParent(arguments);
}
});
So my question is how to get reference to the current component and call its methods while you are inside nested methods or config objects of current component

The handler has arguments that are passed in, 1 of them is normally the button. From the button you can get the container.
Ext.define('MA.view.patient.Tree', {
extend : 'Ext.tree.Panel',
alias : 'widget.EditPatientTree',
title : 'Simple Tree',
width : 150,
store:'Tree',
dockedItems : [ {
xtype : 'toolbar',
items : [ {
text : 'Expand All',
scope: this,
handler : function(button, event) {
var toolbar = button.up('toolbar'), treepanel = toolbar.up('treepanel');
treepanel.expandAll();
treepanel.getId();
}
} ]
} ],
rootVisible : false,
initComponent : function() {
this.callParent(arguments);
}
});

You can make use of the methods like up, down for get references of components that are parent or child. In your case, you could get the reference of the tree panel by:
myTree = this.up('treepanel');
Similarly, you could use the down method, to get hold of any child reference.

Related

ExtJs 3.4 - how to ToolTip a content of a textField component that was pre-loaded

This is the component where I'm trying to put a Tooltip:
this.textFieldStreet = new Ext.form.TextField({
id : 'idTextFieldStreet',
fieldLabel : 'Street',
autoCreate : limitChar(30,30),
listeners : {
render : function(c){
Ext.QuickTips.register({
target : c.getEl(),
html : '' + Ext.getCmp('idTextFieldStreet').getValue()
}
});
}
}
});
In another .js I created the function that define every component like you see before and invoke the function as you see forward:
var componentFormCustomer = new ComponentFormCustomer();
Then I set value like:
componentFormCustomer.textFieldStreet.setValue('Some street info')
Now, here's the problem, I was looking for some ideas to do that and found nothing, I don't know if this is the right way to accomplish the tooltip. Help!
Solution:
Define show listener for created tooltip. In this listener get the value of textfield and update tooltip.
With this approach, the tooltip's content will change dynamically and will show the content of tooltip's target.
Ext.onReady(function(){
Ext.QuickTips.init();
var textFieldStreet = new Ext.form.TextField({
renderTo : Ext.getBody(),
id : 'idTextFieldStreet',
fieldLabel : 'Street',
value : 'Initial value',
bodyCfg : {
tag: 'center',
cls: 'x-panel-body',
html: 'Message'
},
listeners : {
render : function(c) {
new Ext.ToolTip({
target : c.getEl(),
listeners: {
'show': function (t) {
var value = t.target.getValue();
t.update(value);
}
}
});
}
}
});
var button = new Ext.Button({
renderTo : Ext.getBody(),
text : 'Change Tooltip',
handler : function () {
textFieldStreet.setValue('New value');
}
});
});
Notes:
Tested with ExtJS 3.4.1.

How come my ExtJS 5 panel cannot resolve a show listener via it's VC? W/ Fiddle

ExtJS 5.1.3 - I'm slightly baffled that a simple Panel cannot resolve its VC on 'show' event. The attached fiddle will work - it has a panel with VC. Click the button to see the VC correctly resolved.
If you un-comment the 'show' event however, the code will fail in the console because the function can't be found (Unable to dynamically resolve scope for "show" listener on mypanel-xxxx). Lots of my code works like this already, am I doing something stupid?
I've tried using add() instead of widget() in case it's some kind of MVC nesting issue but Ext just seeks the function in the wrong VC - the top-level VC applied to the viewport.
Any help very much appreciated. Thx
https://fiddle.sencha.com/#view/editor&fiddle/1kvd
Ext.define('Admin.view.TheController', {
extend : 'Ext.app.ViewController',
alias : 'controller.thecontroller',
doShowStuff : function() {
Ext.Msg.alert('SHOW STUFF!', 'yep, this works');
},
doOkStuff : function() {
Ext.Msg.alert('OK STUFF!', 'yep, this works');
}
});
Ext.define('Admin.view.Panel.MyPanel', {
extend : 'Ext.panel.Panel',
alias : 'widget.mypanel',
autoRender : true,
autoShow : true,
controller : 'thecontroller',
width : 200,
height : 200,
html : 'I am your panel',
buttons : [
{ text : 'OK', handler : 'doOkStuff', scope : 'controller' }
],
listeners : [
// This listener causes an error
//{ show : 'doShowStuff', scope : 'controller' },
]
});
Ext.widget('mypanel');
listeners: {
// This listener causes an error
show:{
fn: 'doShowStuff',
scope: 'controller'
}
}
here's the fiddle
Your listeners are misconfigured, they should be an object, not an array. Also, you should omit the scope, it will be automatically determined:
Ext.define('Admin.view.Panel.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
autoShow: true,
controller: 'thecontroller',
width: 200,
height: 200,
html: 'I am your panel',
buttons: [{
text: 'OK',
handler: 'doOkStuff'
}],
listeners: {
show: 'doShowStuff'
}
});

Combobox store load after updating form with Model data

I noticed that there are a lot of ways to populate a form with data.
I want to do it the ExtJS4 MVC style.
However I now see something unwanted happening.
My form has a combobox tied to a store.
The store is filled after populating the form with the model data.
My view / form
Ext.define('WWT.view.settings.Form', {
extend : 'Ext.form.Panel',
alias : 'widget.settingsform',
title : 'WWT Instellingen',
bodyPadding : 5,
defaultType : 'textfield',
initComponent : function() {
var me = this;
me.dockedItems = me.buildToolbars();
me.items = me.buildItems();
me.callParent();
},
buildItems : function() {
var lovEdities = Ext.create('WWT.store.lov.Edities');
return [{
fieldLabel : 'Huidige Editie',
xtype : 'combo',
emptyText : 'Kies een Editie',
name : 'huidige_editie_id',
store : lovEdities,
queryMode : 'local',
displayField : 'naam',
valueField : 'id',
forceSelection : true
}, {fieldLabel : 'Scorebord Slogan',
name : 'scorebord_slogan_regel',
width: 200,
maxLength : 10
}, {
fieldLabel : 'Tijd Offset Scorebord',
name : 'scorebord_tijdoffset'
}];
},
buildToolbars : function() {
return [{
xtype : 'toolbar',
docked : 'top',
items : [{ xtype:'button',
text : 'Save',
iconCls : 'save-icon',
action : 'save'
}]
}];
}
});
My Controller
Ext.define('WWT.controller.settings.Settings', {
extend : 'Ext.app.Controller',
models : ['secretariaat.Settings'],
views : ['settings.Form'],
init : function() {
var me = this;
me.control({
'#settingsId button[action=save]' : {
click : me.save
},
'settingsform' : {
afterrender : function(view) {
Ext.ModelMgr
.getModel('WWT.model.secretariaat.Settings')
.load(1, {
success : function(record) {
view.loadRecord(record);
}
});
}
}
});
},
save : function() {
var form = this.container.down('form');
var model = this.getModel('settings.Settings').set(form.getForm()
.getValues());
model.save();
},
addContent : function() {
this.container.add({
id : 'settingsIDQ',
xtype : 'settingsform',
itemId : 'settingsId'
});
}
});
In my Chrome Network window, I can see that the store request is fired later.
Any thoughts on how to load the store before updating the form ?
I thought of doing it in the afterRender too, but I think that even then the order is not guaranteed.
Seemed that there was nothing wrongs with the (load) mechanism.
There was an issue in the data type of the ID field of the Combobox and the field which was part of the settings. Int vs String.
This caused the issue.
I get around the form loading issue in a few different ways.
If the store is used a lot throughout the application, I load the store early in the loading of the application by looking it up with Ext.getStore('my store name here') and then calling .load() during startup. If you want the store or stores to load only when you reach the form itself, I would hook the component's initialization in initComponent and then you can get the form's fields and with a for-loop can walk through the fields and initialize all stores with .load() before the form component accesses server data.
Here are my edits to your initComponent method. I haven't debugged this code, but it should work great for you.
initComponent() {
var me = this;
// this is where we will load all stores during init
var fields = me.getForm().getFields();
for (var i = 0; i < fields.length; i++) {
var store = fields[i].getStore();
if (store && !store.isLoaded()) {
store.load();
}
}
me.dockedItems = me.buildToolbars();
me.items = me.buildItems();
me.callParent();
},

Sencha Tap listener not firing

I have a test application with a couple of views. I am trying to invoke a simple 'tap' listener on my buttons. Even though the controller is instantiated and launched, the tap event does not seem to fire.
Here's my app.js
Ext.application({
name: 'MyApp',
requires: [
'Ext.MessageBox',
'Ext.form.FormPanel',
'Ext.navigation.View'
],
views: [
'Main',
'Tasks'
],
controllers: [
'Main'
],
models: [
'Task',
'Schedule'
],
stores: [
'Tasks',
'Schedules'
],
launch: function() {
// Destroy the #appLoadingIndicator element
try{
Ext.fly('appLoadingIndicator').destroy();
}catch(err){
console.warn("[CUSTOMWARN]Could not destroy loading indicator because of -- \n"+err);
}
var DEBUG=false;
if(!DEBUG){
// Initialize the main view
Ext.Viewport.add(Ext.create('MyApp.view.Main'));
}
}
});
Main.js -- controller
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
requires: [
'MyApp.view.Main'
],
init: function(){
// download and parse data from server here.
console.log('controller initiated!');
},
config: {
refs: {
loginBtn: 'button[action=login]'
},
control: {
loginBtn: {
tap: 'loginBtnHandler'
}
}
},
loginBtnHandler: function(){
this.callParent(arguments);
Ext.Msg.alert('here');
}
});
Main.js -- view
Ext.define('MyApp.view.Main', {
extend: 'Ext.navigation.View',
alias: 'customnavigationview',
requires: [
'MyApp.form.Login'
],
config: {
navigationBar: {
hidden: true
},
items: [
{
xtype: 'logincard',
flex: 1
}
],
}
});
Login.js -- for xtype: 'logincard'
Ext.define('MyApp.form.Login', {
extend: 'Ext.form.Panel',
xtype: 'logincard',
requires: [
'Ext.field.Password',
'Ext.field.Email',
'Ext.form.FieldSet',
'Ext.field.Toggle',
'Ext.Label'
],
// id: 'loginForm',
config: {
items: [
{
xtype : 'label',
html : 'Login failed. Please enter correct credentials.',
itemId : 'signInFailedLabel',
hidden : true,
hideAnimation : 'fadeOut',
showAnimation : 'fadeIn',
style : 'color:#990000;',
margin : 10
},
{
title: 'Please log in',
xtype: 'fieldset',
items:[
{
xtype: 'textfield',
name : 'username',
label: 'UserName'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
},
{
xtype: 'fieldset',
items: [
{
xtype : 'togglefield',
name : 'rememberLogin',
label : 'Remember Me '
}
]
},
{
xtype : 'button',
id : 'loginSubmitBtn',
itemId : 'loginSubmitItemBtn',
text : 'Login',
ui : 'action',
action : 'login',
margin : 10
}
]
}
});
Any help would be highly appreciated!
EDIT: So I tried to use Ext.ComponentQuery.query("#loginSubmitBtn") and on printing the output on console, I can see that it is pointing to the correct button. Here's the output.
0: Class
_badgeCls: "x-badge"
_baseCls: "x-button"
_disabledCls: "x-item-disabled"
_floatingCls: "x-floating"
_hasBadgeCls: "x-hasbadge"
_hiddenCls: "x-item-hidden"
_icon: false
_iconAlign: "left"
_itemId: "loginSubmitItemBtn"
_labelCls: "x-button-label"
_margin: 10
_pressedCls: "x-button-pressing"
_pressedDelay: 0
_styleHtmlCls: "x-html"
_text: "Login"
_ui: "action"
action: "login"
badgeElement: Class
bodyElement: Class
config: objectClass
currentUi: "x-button-action"
element: Class
eventDispatcher: Class
getEventDispatcher: function () {
getId: function () {
getObservableId: function () {
getUniqueId: function () {
iconElement: Class
id: "loginSubmitBtn"
initConfig: function (){}
initialConfig: Object
initialized: true
innerElement: Class
managedListeners: Object
observableId: "#loginSubmitBtn"
onInitializedListeners: Array[0]
parent: Class
referenceList: Array[4]
refreshFloating: function () {
refreshSizeState: function () {
renderElement: Class
rendered: true
textElement: Class
usedSelectors: Array[1]
__proto__: Object
length: 1
**EDIT 3: ** Found it! See answer here: Sencha Tap listener not firing
The listener for a button tap should be just 'tap' instead of 'itemtap'
tap: 'loginBtnHandler'
Hope it helps-
I think I've had this problem in the past. Try qualifying the ref in the controller with the view name to narrow the query down:
loginBtn: 'logincard button[action=login]'
Not the best, but should work:
First remove the tap listener on the controller. Also remove the 'action' property on the button, and set the handler on the button:
{
xtype : 'button',
id : 'loginSubmitBtn',
itemId : 'loginSubmitItemBtn',
text : 'Login',
ui : 'action',
//action : 'login',
margin : 10,
handler : function () {
MyApp.app.getController('Main').loginBtnHandler()
}
}
Ok, this is weird, but I found out why my buttonclick was not being handled properly. I usually use Google Chrome as my testing browser with web inspector on. I downloaded Safari and tried the same code and it worked like its supposed to. I looked at both the browsers, and the only difference was that Chrome had web inspector on, while Safari didn't. I closed the web inspector in Chrome and the button handler worked great (without reloading). I restarted the browser, pushed the inspector to a separate window, none of them worked. However, Safari works great even with inspector on. Probably a Chrome bug?
Google Chrome version: 27.0.1453.110
*EDIT: * I had the touch emulation turned on in the web inspector. With this turned on, we have to close the web inspector for the touch event to register. Otherwise, we have to turn off the touch emulation to register for the events while the web inspector is open.
TL;DR: Close your web inspector in Chrome before testing, if you have touch emulation turned on.

How to call this onclick javascript function in my architecture

I am using this article of architecture http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/
In my one class of Dashboardgrid i have two functions are :
,linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
if (data != null) {
return ''+ data +'';
}
return data;
},
resellerwindow : function (cityname) {
// render the grid to the specified div in the page
// resellergrid.render();
resellerstore.load();
wingrid.show(this);
}
when the click event of linkrendrer function is called it gives error
this.resellerwindow is not a function
where and how should i put resellerwindow function ?
My ResellerDashBoard Class
Application.DashBoardGrid = Ext.extend(Ext.grid.GridPanel, {
border:false
,initComponent:function() {
var config = {
store:new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :true,
url: 'api/index.php?_command=getresellerscount',
storeId: 'getresellerscount',
// reader configs
root: 'cityarray',
idProperty: 'cityname',
fields: [
{name: 'cityname'},
{name: 'totfollowup'},
{name: 'totcallback'},
{name: 'totnotintrested'},
{name: 'totdealsclosed'},
{name: 'totcallsreceived'},
{name: 'totcallsentered'},
{name: 'totresellerregistered'},
{name: 'countiro'},
{name: 'irotransferred'},
{name: 'irodeferred'}
]
})
,columns: [
{
id :'cityname',
header : 'City Name',
width : 120,
sortable : true,
dataIndex: 'cityname'
},
{
id :'countiro',
header : ' Total Prospect',
width : 100,
sortable : true,
dataIndex: 'countiro'
},
{
id :'irotransferred',
header : 'Calls Transfered By IRO',
height : 50,
width : 100,
sortable : true,
dataIndex: 'irotransferred'
},
{
id :'irodeferred',
header : ' Calls Deferred By IRO',
width : 100,
sortable : true,
dataIndex: 'irodeferred'
},
{
id :'totcallsentered',
header : ' Total Calls Entered',
width : 100,
sortable : true,
dataIndex : 'totcallsentered',
renderer : this.linkRenderer
},
{
id :'totfollowup',
header : ' Follow Up',
width : 100,
sortable : true,
dataIndex: 'totfollowup'
},
{
id :'totcallback',
header : ' Call Backs',
width : 100,
sortable : true,
dataIndex: 'totcallback'
},
{
id :'totnotintrested',
header : ' Not Interested',
width : 100,
sortable : true,
dataIndex: 'totnotintrested'
},
{
id :'totdealsclosed',
header : ' Deals Closed',
width : 100,
sortable : true,
dataIndex: 'totdealsclosed'
},
{
id :'totresellerregistered',
header : ' Reseller Registered',
width : 100,
sortable : true,
dataIndex: 'totresellerregistered'
}
]
,plugins :[]
,viewConfig :{forceFit:true}
,tbar :[]
,bbar :[]
,height : 350
,width : 1060
,title : 'Reseller Dashboard'
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.DashBoardGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
/**
* It is the renderer of the links of cell
* #param data value of cell
* #param record object of data has all the data of store and record.id is unique
**/
,linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
if (data != null) {
return ''+ data +'';
}
return data;
},
resellerwindow : function (cityname) {
// render the grid to the specified div in the page
// resellergrid.render();
resellerstore.load();
wingrid.show(this);
}
,onRender:function() {
// this.store.load();
Application.DashBoardGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('DashBoardGrid', Application.DashBoardGrid);
Your scope is messed up, when the function in your <a> tag is called this does not point to your object where you defined the function but to your <a>-dom node.
It's pretty hard to call member functions from within a html fragment like the fragment returned by a grid renderer. I suggest you take a look at Ext.grid.ActionColumn to solve this problem. When you look at the code in this column type you should be able to write your own column type that renders a link instead of an icon like the ActionColumn.
Another option is using my Ext.ux.grid.ButtonColumn which doesn't render links but buttons in your grid.
more info on scope in ExtJS (and js in general): http://www.sencha.com/learn/Tutorial:What_is_that_Scope_all_about
this.resellerwindow is not a function
because 'this', in the onclick function is in fact a reference to the 'a' dom element;
In order to access the 'resellerwindow' function from the onclick handler, you need to make the function accessible from the global scope, where your handler is executed:
var globalObj =
{
linkRenderer : function (data, cell, record, rowIndex, columnIndex, store)
{
if (data != null)
return ''+ data +'';
return data;
},
resellerwindow : function (cityname)
{
// render the grid to the specified div in the page
// resellergrid.render();
resellerstore.load();
wingrid.show(this);
}
}
so use the globalObj.resellerwindow(......);
The problem is that this does not point to the class itself. Should you need to render the a element as a string instead of JavaScript object you will need to call a global function in which to call the resellerwindow function (after obtaining correct reference). However, I believe a much more efficient way would be to abandon the string and use JavaScript object instead. Then you can do something like the following:
var a = document.createElement("a");
a.onclick = this.resselerwindow;
If you use jQuery something like the following can be used:
return $("<a />").click(this.resselerwindow)[0];
instead of building and passing direct html, try these.
Create Anchor object
{ tag: 'a',
href: '#',
html: 'click me',
onclick: this.resellerWindow }
Make sure that, scope in linkRenderer is grid, by settings 'scope: this' in that column definition. So that this.resellerWindow refers to grid's function.
try returning created object.

Categories