Cant call method from listeners list

[K4T]

Hello coders! If somebody could look at my code and give me some answers on few questions it would be very helpful for me. I`m new with ExtJS so sorry for trivial questions. At the bottom of that post you can see code with red and bolded fragments - I`m asking about those lines of code.

Q1: How should I call my methods from listeners list?
As you can see I declared method called onAddClick which I`m trying to call when user pressed enter key when some controls have focus. It doesnt work, dont know how should I call that method. I can only use it as handler.

Q2: I have methods which are actions: onAddClick, onDeleteClick etc. So I think they should be inside controller class not a view. But how should I call them from that view (from listeners list and handler property declared inside view) when I will move them to controller? Please correct me if I`m wrong. I care about correct coding.

Thank you for answers.


Ext.define('ToDo.view.todo.List', {
extend: 'Ext.grid.Panel',


alias: 'widget.todolist',
title: 'What To Do List:',
enableColumnHide: false,
columnLines: true,
multiSelect: true,


store: 'ToDos',


viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragText: 'Drag and drop to reorganize'
}
},


plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,
listeners: {
edit: function(editor, e) {
var store = Ext.getStore('ToDos');
store.sync();
}
}
})
],


selModel: Ext.create('Ext.selection.CheckboxModel'),


initComponent: function() {
this.columns = [{
header: 'Job',
dataIndex: 'toDo',
flex: 3,
renderer: Ext.util.Format.htmlEncode,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Due Date',
dataIndex: 'dueDate',
xtype: 'datecolumn',
format: 'Y-m-d',
renderer: Ext.util.Format.htmlEncode,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Y-m-d'
}
}, {
xtype: 'actioncolumn',
width: 40,
align: 'center',
items: [{
icon : 'images/delete.gif',
tooltip: 'Delete',
handler: this.onRowDeleteClick
}]
}];


this.dockedItems = [{
xtype: 'toolbar',
items: [{
xtype: 'textfield',
name: 'todo',
id: 'toDoTextField',
allowBlank: false,
width: 250,
emptyText: 'What to do, sir?',
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
//this.onAddClick(); <- NOT WORKING!
}
}
}
}, {
xtype: 'datefield',
name: 'dueDate',
id: 'dueDateField',
width: 100,
format: 'Y-m-d',
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
//this.onAddClick(); <- NOT WORKING!
}
}
}
}, {
text: 'Add',
iconCls: 'add-icon',
tooltip: 'Add New',
handler: this.onAddClick
},
'-',
{
text: 'Delete',
iconCls: 'delete-icon',
tooltip: 'Delete Selected',
handler: this.onDeleteClick
}]
},
{
xtype: 'pagingtoolbar',
store: 'ToDos',
dock: 'bottom',
displayInfo: true,
id: 'toDoPagingTB'
}];


this.callParent();
},


onAddClick: function()
{
var pagingTB = Ext.getCmp('toDoPagingTB'),
toDoTextField = Ext.getCmp('toDoTextField'),
dueDateField = Ext.getCmp('dueDateField'),
toDo = toDoTextField.getValue(),
dueDate = Ext.util.Format.date(dueDateField.getValue(), 'Y-m-d'),
model = new ToDo.model.ToDo({toDo: toDo, dueDate: dueDate}),
store = Ext.getStore('ToDos');

if (toDoTextField.isValid() && dueDateField.isValid())
{
store.insert(0, model);
store.totalCount++;
store.sync();
pagingTB.updateInfo();

toDoTextField.reset();
dueDateField.reset();
}
},


onDeleteClick: function()
{
var store = Ext.getStore('ToDos'),
pagingTB = Ext.getCmp('toDoPagingTB'),
list = Ext.getCmp('toDoList'),
selections = list.getSelectionModel().getSelection();


if (selections.length > 0) {
Ext.MessageBox.confirm('Confirm', 'Are you sure?', function(btn) {
if (btn == 'yes'){
store.remove(selections);
store.totalCount -= selections.length;
store.sync();
pagingTB.updateInfo();
list.getSelectionModel().deselectAll();
}
});
}
},


onRowDeleteClick: function(grid, rowIndex)
{
var store = Ext.getStore('ToDos'),
pagingTB = Ext.getCmp('toDoPagingTB');


Ext.MessageBox.confirm('Confirm', 'Are you sure?', function(btn) {
if (btn == 'yes') {
store.remove(store.getAt(rowIndex));
store.totalCount--;
store.sync();
pagingTB.updateInfo();
}
});
}
});


Here is my controller code (empty):
Ext.define('ToDo.controller.ToDos', {
extend: 'Ext.app.Controller',


stores: ['ToDos'],
models: ['ToDo'],
views: ['todo.List'],


init: function() {


}
});

[evant]

You need to specify



scope: this


On both the listener & the button config.

[K4T]

Thank you! Anyway I decided to move all my methods (onAddClick etc) to controller. I think it`s a way how it should be done before. Correct me if I`m wrong.

I have two buttons inside view with id: #toDoTextField and #dueDateField. I`m using this.control function to bind functions to specific event. Could somebody explain me why



this.control({
'#toDoTextField, #dueDateField': {
specialkey: this.onSpecialKey
},


doesnt work? ExtJs starts looping forever and blocking browser - maybe it`s a ExtJS bug?

My next question is about actioncolumn:



this.control({
...
'actioncolumn': { //works!
click: this.onRowDeleteClick
}


Why actioncolumn[action=onRowDeleteClick] doesnt work? I set action property for that column inside my view.

Actioncolumn declaration inside view:

...
xtype: 'actioncolumn',
width: 40,
align: 'center',
items: [{
icon: 'images/delete.gif',
tooltip: 'Delete',
action: 'onRowDeleteClick'
}]
...

[Mayor_McCheese]

this.control({
'#toDoTextField, #dueDateField': {
specialkey: this.onSpecialKey
},


doesnt work? ExtJs starts looping forever and blocking browser - maybe it`s a ExtJS bug?



Yes I have noticed this too. I don't think ExtJS supports comma separating selectors. Change it to:



this.control({
'#toDoTextField': {
specialkey: this.onSpecialKey
}
});
this.control({
'#dueDateField': {
specialkey: this.onSpecialKey
}
});




Why actioncolumn[action=onRowDeleteClick] doesnt work? I set action property for that column inside my view.


I don't think ExtJS supports this type of selector (others may correct me if I'm wrong - I haven't actually tried it. As I understand it the selectors in ExtJS are "CSS like selectors" but not exactly CSS selectors (i.e they copied the syntax but not all CSS selectors are implemented.

[K4T]

Yes I have noticed this too. I don't think ExtJS supports comma separating selectors. Change it to:



this.control({
'#toDoTextField': {
specialkey: this.onSpecialKey
}
});
this.control({
'#dueDateField': {
specialkey: this.onSpecialKey
}
});



This is my temporary solution - I think not good.
My idea with comma was based on code from documentation.



// retrieve all grids and trees
var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');