I am trying to get my Ext.Menu with a list to respond to my event in my Controller.
I am not sure why I can not get a response from the list in the Ext.Menu.
Could someone please tell me what I am missing.
Thanks
Ext.define('Pear.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.Menu'
],
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Sliding Menu',
items: [
{
xtype: 'button',
id: 'listButton',
iconCls: 'list',
ui: 'plain',
handler: function(){
if(Ext.Viewport.getMenus().left.isHidden()){
Ext.Viewport.showMenu('left');
}
else
{
Ext.Viewport.hideMenu('left');
}
}
}
]
}
]
},
initialize: function(){
Ext.Viewport.setMenu(this.createMenu(),{
side: 'left',
reveal: true
});
},
createMenu: function(){
var menu = Ext.create('Ext.Menu', {
layout: 'fit',
width: 220,
xtype:'menuList',
items: [{
xtype: 'titlebar',
title: 'Side menu'
}, {
xtype: 'list',
itemTpl: '{title}',
//store: 'Beginning',
data: [{
title: 'Menu item 1'
}, {
title: 'Menu item 2'
},
{
title: 'Menu item 3'
}, {
title: 'Menu item 4'
}]
}]
});
return menu;
}
});
My Controller
Ext.define( 'Pear.controller.Main', {
extend:'Ext.app.Controller',
config:{
refs: {
Main: 'main',
},
control: {
'main list ':{
itemtap:function(list,index,target,record){
console.log("Option 2 Tapped");
}
},
},
}
});
Your list reference is wrong. Best way to get the reference of an item is to set a config name property to that item like this:-
{
xtype: 'list',
itemTpl: '{title}',
name: 'menu_list', // add this property to get the reference
data: [{
title: 'Menu item 1'
}, {
title: 'Menu item 2'
},
{
title: 'Menu item 3'
}, {
title: 'Menu item 4'
}]
}
Add the control in the controller:-
Ext.define( 'Pear.controller.Main', {
extend:'Ext.app.Controller',
config:{
refs: {
menuList : "list[name='menu_list']"
},
control: {
menuList : {
itemtap: function(list,index,target,record){
console.log("Option 2 Tapped");
}
}
}
}
});
I'm working on a Sencha Touch App. This App have 3 lists: clients, tasks and asignations. Each one has its own model and store. The 3rd one, asignations lists, is an asignations of a task to a client, so that list must show which task and client are asignated.
Models
Ext.define('TasksApp.model.Asignation',{
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'asignID'},
{name: 'nombreasignacion', type: 'string'},
{name: 'clienteasignacion', type: 'string'},
{name: 'tareaasignacion', type: 'string'},
{name: 'finasignacion', type: 'date'},
{name: 'obsasignacion', type: 'string'},
{name: 'recordatorio', type: 'string'},
{name: 'estadoasignacion', type: 'string'}
],
}
});
Ext.define('TasksApp.model.Client',{
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'clientID'},
{name: 'nombrecliente', type: 'string'},
{name: 'obscliente', type: 'string'},
{name: 'tlfcliente', type: 'int'},
{name: 'emailcliente', type: 'string'},
{name: 'urlcliente', type: 'string'},
{name: 'asigncliente', type: 'int', defaultValue: 0}
],
}
});
Ext.define('TasksApp.model.Task',{
extend: 'Ext.data.Model',
config:
{
idProperty: 'id',
fields: [
{name: 'tareaID'},
{name: 'nombretarea', type: 'string'},
{name: 'descripciontarea', type: 'string'},
{name: 'tdesarrollotarea', type: 'int'},
{name: 'asigntarea', type: 'int', defaultValue: 0}
],
}
});
Asignations List View + Asignation Template
var plantillaAsignacion = new Ext.XTemplate(
'<tpl for=".">',
'<div class="tplAsignacion">',
'<div class="asignacionCabecera">',
'<DIV ALIGN=center><B><I>{nombreasignacion}</i></B></DIV>',
'</div>',
'<div class="clienteCuerpo">',
'<div class="asignacionImagen" style= "float: left;"><img src="resources/images/asign_icon.png"/></div>',
'<ol>',
'<li><pre> Cliente: {clienteasignacion}</a></pre></li>',
'<li><pre> Tarea: {tareaasignacion}</pre></li>',
'<li><pre> Finalización: {finasignacion:date("d/m/Y")}<div align="right">Estado: {estadoasignacion} <span class="status {estadoasignacion}"></span> </pre></li>', //("l, F d, Y")("d/m/Y")
'</ol>',
'</div>',
'</div>',
'</tpl>'
);
Ext.define('TasksApp.view.AsignationsList', {
extend: 'Ext.Container',
requires: [ 'Ext.TitleBar', 'Ext.dataview.List' ],
alias: 'widget.asignationslistview',
config: {
layout: {
type: 'fit',
},
items:
[
{
xtype: 'titlebar',
title: 'Lista de asignaciones',
docked: 'top',
items:
[
{
xtype: 'button',
iconCls: 'add',
ui: 'action',
itemId: 'newButton',
align: 'right'
},{
xtype: 'button',
text: 'Clientes',
ui: 'action',
itemId: 'goToClients', iconCls: 'team',
align: 'left'
},
{
xtype: 'button',
text: 'Tareas',
ui: 'action',
itemId: 'goToTasks', iconCls: 'bookmarks',
align: 'left'
},
]
},
{
xtype: 'list',
store: 'Asignations',
itemId: 'asignationsList',
cls: 'estado-asignacion',
loadingText: 'Cargando Asignaciones...',
emptyText: 'No hay asignaciones actualmente',
onItemDisclosure: true,
//grouped: true,
itemTpl: plantillaAsignacion,
}
],
listeners:
[
{
delegate: '#newButton',
event: 'tap',
fn: 'onNewButtonTap'
},
{
delegate: '#asignationsList',
event: 'disclose',
fn: 'onAsignationsListDisclose'
},
{
delegate: '#goToClients',
event: 'tap',
fn: 'onGoToClients'
},
{
delegate: '#goToTasks',
event: 'tap',
fn: 'onGoToTasks'
}
]
},
onNewButtonTap: function () {
console.log('newAsignationCommand');
this.fireEvent('newAsignationCommand', this);
},
onAsignationsListDisclose: function (list, record, target, index, evt, options) {
console.log('editAsignationCommand');
this.fireEvent('editAsignationCommand', this, record);
},
onGoToClients: function () {
console.log ('goToClientsCommand');
this.fireEvent('goToClientsCommand', this);
},
onGoToTasks: function () {
console.log ('goToTasksCommand');
this.fireEvent('goToTasksCommand', this);
}
});
Asignation Editor View ( form of the asignation )
Ext.define('TasksApp.view.AsignationEditor', {
extend: 'Ext.form.Panel',
requires: [
'Ext.TitleBar', 'Ext.form.FieldSet', 'Ext.field.Text','Ext.field.Select', 'Ext.field.DatePicker', 'Ext.field.TextArea','Ext.form.Panel'
],
alias: 'widget.asignationeditorview',
config: {
scrollable: 'vertical',
items:
[
{
xtype: 'titlebar',
docked: 'top',
title: 'Editar Asignación',
items:
[
{
xtype: 'button',
ui: 'back',
text: 'Volver',
itemId: 'backButton',
align: 'left'
},
{
xtype: 'button',
ui: 'action',
text: 'Guardar',
itemId: 'saveButton',
align: 'right'
}
]
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
xtype: 'button',
iconCls: 'trash',
iconMask: true,
itemId: 'deleteButton'
}
]
},
{
xtype: 'fieldset',
items:
[
{
xtype: 'textfield',
name: 'nombreasignacion',
label: 'Nombre',
required: true,
autoCapitalize: true,
placeHolder: 'Nombre de la asignación...'
},
{
xtype: 'selectfield',
name: 'clienteasignacion',
label: 'Cliente',
valueField: 'clientID',
displayField: 'nombrecliente',
store: 'Clients',
autoSelect: false,
placeHolder: 'Seleccione un cliente...',
required: true,
},
{
xtype: 'selectfield',
name: 'tareaasignacion',
label: 'Tarea',
valueField: 'tareaID',
displayField: 'nombretarea',
store: 'Tasks',
autoSelect: false,
placeHolder: 'Seleccione una tarea...',
required: true,
},
{
xtype: 'datepickerfield',
name: 'finasignacion',
label: 'Vencimiento',
dateFormat: 'd/m/Y',
value: (new Date()),
picker:
{
yearFrom: new Date().getFullYear(),
yearTo: 2040,
slotOrder: [ 'day', 'month', 'year' ]
}
},
{
xtype: 'textareafield',
name: 'obsasignacion',
label: 'Observaciones',
autoCapitalize: true,
autoCorrect: true,
placeHolder: 'Observaciones de la asignación...',
maxRows: 5
},
{
xtype: 'selectfield',
name: 'recordatorio',
label: 'Recordatorio',
autoSelect: true,
placeHolder: 'Seleccione el método recordatorio...',
required: true,
options:
[
{
text: 'Ninguno',
value: 0
},
{
text: 'eMail',
value: 2
},
{
text: 'SMS',
value: 1
},
{
text: 'Notificación',
value: 3
}
]
},
{
xtype: 'selectfield',
name: 'estadoasignacion',
label: 'Estado',
autoSelect: true,
placeHolder: 'Seleccione el estado...',
required: true,
options:
[
{
text: 'Activa',
value: 'Activa'
},
{
text: 'Caducada',
value: 'Caducada'
},
{
text: 'Cancelada',
value: 'Cancelada'
},
{
text: 'Realizada',
value: 'Realizada'
}
]
},
]
}
],
listeners: [
{
delegate: '#saveButton',
event: 'tap',
fn: 'onSaveButtonTap'
},
{
delegate: '#deleteButton',
event: 'tap',
fn: 'onDeleteButtonTap'
},
{
delegate: '#backButton',
event: 'tap',
fn: 'onBackButtonTap'
}
]
},
onSaveButtonTap: function () {
console.log('saveAsignationCommand');
this.fireEvent('saveAsignationCommand', this);
},
onDeleteButtonTap: function () {
console.log('deleteAsignationCommand');
this.fireEvent('deleteAsignationCommand', this);
},
onBackButtonTap: function () {
console.log('backToHomeCommand');
this.fireEvent('backToHomeCommand', this);
}
});
Asignation Controller
Ext.define('TasksApp.controller.Asignations', {
extend: 'Ext.app.Controller',
config: {
refs: {
asignationsListView: 'asignationslistview',
asignationEditorView: 'asignationeditorview'
},
control: {
asignationsListView: {
newAsignationCommand: 'onNewAsignationCommand',
editAsignationCommand: 'onEditAsignationCommand'
},
asignationEditorView: {
saveAsignationCommand: 'onSaveAsignationCommand',
deleteAsignationCommand: 'onDeleteAsignationCommand',
backToHomeCommand: 'onBackToHomeCommand'
}
}
},
getSlideLeftTransition: function () {
return { type: 'slide', direction: 'left' };
},
getSlideRightTransition: function () {
return { type: 'slide', direction: 'right' };
},
getRandomInt: function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
activateAsignationEditor: function (record) {
var asignationEditorView = this.getAsignationEditorView();
asignationEditorView.setRecord(record); // load() is deprecated.
Ext.Viewport.animateActiveItem(asignationEditorView, this.getSlideLeftTransition());
},
activateAsignationsList: function () {
Ext.Viewport.animateActiveItem(this.getAsignationsListView(), this.getSlideRightTransition());
},
onNewAsignationCommand: function () {
console.log('onNewAsignationCommand');
var now = new Date();
var asignationId = (now.getTime()).toString() + (this.getRandomInt(0, 100)).toString();
var newAsignation = Ext.create('TasksApp.model.Asignation', {
id: asignationId,
nombreasignacion: '',
clienteasignacion: '',
tareaasignacion: '',
finasignacion: '',
obsasignacion: '',
recordatorio: '',
estadoasignacion: ''
});
this.activateAsignationEditor(newAsignation);
},
onEditAsignationCommand: function (list, record) {
console.log('onEditAsignationCommand');
this.activateAsignationEditor(record);
},
onSaveAsignationCommand: function () {
console.log('onSaveAsignationCommand');
var asignationEditorView = this.getAsignationEditorView();
var currentAsignation = asignationEditorView.getRecord();
var newValues = asignationEditorView.getValues();
currentAsignation.set('nombreasignacion', newValues.nombreasignacion);
currentAsignation.set('clienteasignacion.nombrecliente', newValues.clienteasignacion);
currentAsignation.set('tareaasignacion.nombretarea', newValues.tareaasignacion);
currentAsignation.set('finasignacion', newValues.finasignacion);
currentAsignation.set('obsasignacion', newValues.obsasignacion);
currentAsignation.set('recordatorio', newValues.recordatorio);
currentAsignation.set('estadoasignacion', newValues.estadoasignacion);
var asignationsStore = Ext.getStore('Asignations');
if (null == asignationsStore.findRecord('id', currentAsignation.data.id)) {
asignationsStore.add(currentAsignation);
}
asignationsStore.sync();
asignationsStore.sort([{ property: 'dateCreated', direction: 'DESC'}]);
this.activateAsignationsList();
},
onDeleteAsignationCommand: function () {
console.log('onDeleteAsignationCommand');
var asignationEditorView = this.getAsignationEditorView();
var currentAsignation = asignationEditorView.getRecord();
var asignationsStore = Ext.getStore('Asignations');
asignationsStore.remove(currentAsignation);
asignationsStore.sync();
this.activateAsignationsList();
},
onBackToHomeCommand: function () {
console.log('onBackToHomeCommand');
this.activateAsignationsList();
},
launch: function () {
this.callParent(arguments);
var asignationsStore = Ext.getStore('Asignations');
asignationsStore.load();
console.log('launch');
},
init: function () {
this.callParent(arguments);
console.log('init');
}
});
I want the asignations list to show the client name ( nombrecliente ) and the task name ( nombretarea ), but it shows nothing at all. I don't know how to refer to this values so the list shows them. I tried to modify the asignations controller, the selectfield int the asignation editor ( form ) and the asignations template, but I simply don't know how this works and what I have to do to show that values ( if they are saved in the asignations store at this moment via selectfield, or am I doing anything wrong? )
I would appreciate any help. Thank you in advance.
PS: sorry for my English, it's not my native language :)
Please create array in the key value pair with the key name as your model field and then set that data into your asign Asignations store like:
Asignations.setdata({fieldName:"value"});
I'm experimenting with Sencha Touch 2 at the moment. I made a simple json-store with more items than my screen can display to test scrolling, but every time i try to scroll i get following error:
Uncaught TypeError: Cannot call method 'getCount' of null
I tried to find out whats wrong but could not find a solution yet. Maybe anyone can help?
Here are my sample files:
host.json:
{
"hosts": [
{
"host_name": "host 1",
"status": "pending"
},
{
"host_name": "host 2",
"status": "normal"
},
{
"host_name": "host 3",
"status": "critical"
}
...
]
}
My Store:
Ext.define('myapp.store.MyStore', {
extend: 'Ext.data.Store',
config: {
storeId: 'mystore',
model: 'myapp.model.MyModel',
proxy: {
type: 'ajax',
url: 'host.json',
reader: {
type: 'json',
rootProperty: 'hosts'
}
},
autoLoad: true
}
});
The List-View:
Ext.define('myapp.view.MyListView', {
extend: 'Ext.dataview.List',
alias: 'widget.mylistview',
config: {
items: {
xtype: 'list',
store: 'mystore',
itemTpl: '<div class="service_status_{status}">{host_name}</div>'
}
}
});
And the view where the List-View is called:
Ext.define('myapp.view.Main', {
extend: 'Ext.Container',
config: {
layout: {
type: 'vbox',
aligh: 'stretch'
},
items: [
{
xtype: 'mytoolbar',
docked: 'top',
height: 50
},
{
xtype: 'mylistview',
flex: 1
}
]
}
});
Use 'fit' layout might solve it.
Here is something you definately should change too:
This already defines a list
Ext.define('myapp.view.MyListView', {
extend: 'Ext.dataview.List',
xtype: 'mylistview',
This is the config of the list:
config: {
Here you add a list inside the list, which you are actually using.
This will not go well. This would be a good reason something is not working as expected.
items: {
xtype: 'list',
store: 'mystore',
itemTpl: '<div class="service_status_{status}">{host_name}</div>'
}
I'm trying to write simple view with list on container but i have some problems.
First of all, the List is not visible when I'm trying to do it like this:
Ext.define('App.view.News', {
extend: 'Ext.Container',
but when it's written like this:
Ext.define('App.view.News', {
extend: 'Ext.navigation.View',
it works.
The problem is that when I write it with extend of navigation.View, im getting two toolbars on top and I can't find solution to disable the second one (added by the list).
Full code:
Ext.define('App.view.News', {
extend: 'Ext.Container', //Ext.navigation.View
xtype: 'news',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
config: {
style: ' background-color:white;',
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'News',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backButton',
text: 'Back',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype: 'list',
itemTpl: '{title},{author}',
store: {
autoLoad: true,
fields : ['title', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
]
}
});
Help please!
You need to give your container a layout and your list a flex property. The flex is important on lists as they don't have a viewable height since they scroll. I added a couple properties to your code below. Hope this helps.
Ext.define('App.view.News', {
extend: 'Ext.Container', //Ext.navigation.View
xtype: 'news',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
config: {
style: ' background-color:white;',
layout: 'vbox', // add a layout
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'News',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backButton',
text: 'Back',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype: 'list',
itemTpl: '{title},{author}',
flex: 1, // add a flex property
store: {
autoLoad: true,
fields : ['title', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
]
}
});