PDA

View Full Version : Cant call method from listeners list



K4T
15 Apr 2012, 7:36 AM
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
15 Apr 2012, 3:23 PM
You need to specify



scope: this


On both the listener & the button config.

K4T
15 Apr 2012, 11:45 PM
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
16 Apr 2012, 2:58 AM
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
16 Apr 2012, 3:57 AM
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');