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 have added two buttons to my container and now tap on list items not working.Please help.
Code
Ext.define('X.SelectCategories', {
extend: 'Ext.Container',
xtype: 'selectcategorypanel',
id: 'SelectCategories',
requires:[
],
initialize:function(){
this.callParent();
jsonObject = Ext.create('Tablet').make_webservice_call('get_categories');
Ext.getCmp('select_category_list').setData(jsonObject.info);
console.log(jsonObject.info);
//this.getNavigationBar.hide();
},
config: {
//title : 'Select Categories',
//iconCls: 'team',
//styleHtmlContent: true,
// scrollable: true,
layout: {
type: 'fit'
},
items: [
{
//fullscreen: true,
mode: 'MULTI',
/*
layout: {
type: 'fit'
},
*/
//title:'Select Categories',
xtype: 'list',
itemTpl: '{name}',
autoLoad: true,
id:'select_category_list',
store: {
fields: ['name','title']
}
},
{
xtype: 'container',
//fullscreen: true,
layout: {
type: 'vbox'
},
flex : 1,
layout: {
type : 'hbox',
align: 'bottom'
},
defaults: {
xtype : 'button',
flex : 1,
margin: 10
},
items: [
{ui: 'round',ui:"confirm" ,text: 'Save',id: 'categorysaveButton'},
{ui: 'round', ui:"decline" ,text: 'Reset',id: 'categoryresetButton'}
]
}
]
}
})
Try extend Navigationview extend: 'Ext.navigation.View',
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'
}
}
}
}
]
}
});
I am finaly able to retrieve my datas from the json file BUT the paging system still sucks. The pageSize property seems not to respond therefore when i press on the load more plugin text that appears at the bottom of my list, it appends all my json elements to my list everytime. I am confident about the fact that i am almost there but i can't see how to make it happen.
Here is the code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
var dataLink;
if (Ext.is.Desktop) {
dataLink = "http://127.0.0.1/Appsfan-v2";
} else {
dataLink = "http://appsfan.kreactive.eu";
}
Ext.regModel('Profile', {
fields: [
{name: 'firstname', type: 'string'},
{name: 'lastname', type: 'string'},
{name: 'age', type: 'number'}
]
});
var store = new Ext.data.JsonStore({
model: 'Profile',
autoLoad: false,
remoteFilter: true,
sortOnFilter: true,
//sorters: [{property : 'lastname', direction: 'ASC'}],
pageSize: 1,
clearOnPageLoad: false,
proxy: {
type: 'ajax',
url: dataLink+'/data.json',
reader: {
root: 'profile',
type: 'tree'
}
}
});
console.log(store)
//console.log(store.loadPage(0))
var groupingBase = new Ext.List({
fullscreen: true,
itemTpl: '<div class="contact2"><strong>{firstname}</strong> {lastname} -> {age}</div>',
indexBar: false,
store: store,
plugins: [{
ptype: 'listpaging',
autoPaging: false
}]
});
var panel = new Ext.Panel({
layout: 'card',
fullscreen: true,
items: [groupingBase],
dockedItems: [{
xtype: 'toolbar',
title: 'paging example',
}]
})
//console.log(datas)
}
});
The json
{
"profile": [{
"firstname": "firstname1",
"lastname": "lastname1",
"age": "1"
},{
"firstname": "firstname2",
"lastname": "lastname2",
"age": "2"
},{
"firstname": "firstname3",
"lastname": "lastname3",
"age": "3"
}]
}
Thank you
You can set the clearOnPageLoad config option in your store. This will remove previous records when the next page of the paginated data is loaded.
Here is an example:
Ext.regStore('BarginsStore', {
model: 'BarginModel',
autoLoad: false,
pageSize: 6,
clearOnPageLoad: false,
});