Related
I have created one sencha touch application in my localserver.
In that application, there are one textfield, and three buttons.
The following is my app.js file
Ext.application({
name: 'MyApp',
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
controllers: [
'CalcController'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('MyApp.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
The following is my Main.js file
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
items: [
{
xtype:'textfield',
name:'txtDisplay',
id:'idDisplay',
readOnly:true,
},
{
xtype:'button',
name:'btnClear',
id:'idClear',
width:'25%',
text:'C',
style:'float:left;',
},
{
xtype:'button',
name:'btnSeven',
id:'idSeven',
width:'25%',
text:'7',
style:'float:left; clear:both;',
//action:
handler: function()
{
var x = Ext.getCmp('idSeven')._text;
Ext.getCmp('idDisplay').setValue(x);
}
},
{
xtype:'button',
name:'btnEight',
id:'idEight',
width:'25%',
text:'8',
style:'float:left;',
action:'displayNum',
}
]
}
});
The following is my CalcController.js file
Ext.define('MyApp.controller.CalcController', {
extend: 'Ext.app.Controller',
config: {
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
},
}
},
displayNum: function()
{
console.log("This click event works");
}
});
Now my question is as following:
When i press button named btnSeven it display digit 7 in textfield means handler function works.
Now i want click event code in CalcController.js file instead of writing handler function in Main.js file for that i created second button named btnEight and give action:'displayNum' so when that button clicked event goes to the CalcController.js file.
When i pressed button named btnEight then i want to display digit 8 in textfield with the help of writing code in CalcController.js file instead of writing hander function in Main.js file. So how to do this?
Instead of defining Id for component , define Item Id
In Controller you have to define references in config.
config: {
refs: {
'idDisplay': 'main #idDisplay' // idDisplay is itemId not Id here
},
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
}
}
},
and in displayNum function write code like this.
displayNum: function(btn)
{
var display = this.getIdDisplay();
display.setValue(btn.getText());
}
I solved above my question as the following method:
Now my Main.js file is as following:
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
items: [
{
xtype:'textfield',
name:'txtDisplay',
id:'idDisplay',
readOnly:true,
},
{
xtype:'button',
name:'btnClear',
id:'idClear',
width:'25%',
text:'C',
style:'float:left;',
action: 'clearDisplay',
},
{
xtype:'button',
name:'btnSeven',
id:'idSeven',
width:'25%',
text:'7',
style:'float:left; clear:both;',
action: 'displayNum',
/*handler: function()
{
var x = Ext.getCmp('idSeven')._text;
Ext.getCmp('idDisplay').setValue(x);
}*/
},
{
xtype:'button',
name:'btnEight',
id:'idEight',
width:'25%',
text:'8',
style:'float:left;',
action:'displayNum',
}
]
}
});
and CalcController.js file is as following:
Ext.define('MyApp.controller.CalcController', {
extend: 'Ext.app.Controller',
config: {
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
},
'button[action=clearDisplay]' : {
tap: 'clearDisplay'
},
}
},
displayNum: function(button, e, eOpts)
{
var x = Ext.getCmp('idDisplay')._value + button._text;
Ext.getCmp('idDisplay').setValue(x);
},
clearDisplay: function(button, e, eOpts)
{
Ext.getCmp('idDisplay').setValue('');
}
});
Using this method i pass my button's properties in the controller file using the button's tap event.
My button click event subscribed in the controller is getting fired. Here is the code.
WebAppMasterController.js
Ext.define('P.e.w.controller.WebAppMasterController', {
extend: 'P.e.w.controller.IController',
views: [
'WebAppMasterView'
],
refs: [
{
ref: 'webAppView',
selector: 'WebAppMasterView'
}
],
init: function () {
this.control({
'WebAppMasterView': {
afterrender: this.viewafterrender
}
}, {
'button[action=save]': {
click: function () {
alert('dslksd');
}
}
}
},
viewafterrender: function (panel) {
alert();
}
});
IController extends "Ext.app.Controller".
In the above code, the "afterrender" event is getting triggered, but the button click event is not getting triggered.
The view: WebAppMasterView.js
Ext.define('P.e.w.view.WebAppMasterView', {
extend: 'P.w.l.Header',
alias: 'widget.WebAppMasterView',
constructor: function (config) {
var me = this;
me.centerregion = me.createCenterRegion(config);
Ext.applyIf(config, {
favoriteBar: true,
items: [me.centerregion],
menuWidth: 0
});
this.callParent([config]);
},
createBody: function () {
var me = this;
if (!me.controlPanel) {
me.controlPanel = Ext.create('Ext.Panel', {
layout: 'fit'
});
}
return me.controlPanel;
},
createCenterRegion: function (config) {
var me = this,
centerPanel = Ext.create('Ext.Panel', {
region: 'center',
layout: 'fit',
tbar: {
xtype: 'WorkRequestMenuBar',
id: 'workrequestmenubar'
},
defaults: {
border: false
},
items: [me.createBody()]
});
return centerPanel;
}
});
WorkRequestMenuBar.js
Ext.define('P.e.w.view.WorkRequestMenuBar', {
extend: 'Ext.Toolbar', alias: 'widget.WorkRequestMenuBar',
constructor: function (config) {
config = config || {};
Ext.apply(config, {
defaults: {
scale: 'large',
cls: 'x-btn-text-icon',
iconAlign: 'top'
},
items: [
{
text: 'NEW_WORK_REQUEST',
iconCls: 'menubar-createWorkRequest',
action: 'save'
},
{
text: 'OVERVIEW',
iconCls: 'menubar-overview'
}, '->', {
iconCls: 'icon-biggerHelp',
width: 80,
text: 'HELP'
}
]
});
this.callParent([config]);
}
});
You have several issues.
1st. there is a syntax error in your controller
this.control({
'WebAppMasterView': {
afterrender: this.viewafterrender
}
},
{
'button[action=save]': {
click: function () {
alert('dslksd');
}
}
}
//missing --> );
},
2nd. The toolbar config method should be initComponent method instead.
I'm new to sencha touch.I wrote code for number keypad,but the buttons are displayed vertically.my code is
Ext.define("exercise.view.Numberplate",{
extend: "Ext.SegmentedButton",
requires:['Ext.Button'],
xtype:'Numberplate',
allowMultiple: true,
config: {
pack:'center',
centered:true,
height:30,
width:100,
xtype:'button',
items: [
{
xtype:'segmentedbutton',
allowDepress:true,
scroll:true,
//layout:'vbox',
items:[
{
text:'1',
width:100
},
{
text : '2',
width:100
},
{
text: '3',
width:100
}
]
},
{
xtype:'segmentedbutton',
//centered:true,
pack:'center',
items:[
/* {
centered:true,
html: [
'<br><br><br><br>'
].join("")
},*/
{
text:'4',
width:100
},
{
text:'5',
width:100
},
{
text:'6',
width:100
}
]
}
]
},
constructor: function() {
this.on({
scope: this,
delegate: 'button',
tap: 'tapHandler'
});
this.callParent(arguments);
},
tapHandler: function(button) {
alert(button.getText());
// this.setHtml("<span class=action>User tapped " + button.getText() + "</span>");
}
});
I tried ,but i didnt get this .I think it's easy but i don't know how to do this.can anyone help me.thanks in advance
Just add layout:vbox to your config:
Ext.define("exercise.view.Numberplate",{
extend: "Ext.SegmentedButton",
requires:['Ext.Button'],
xtype:'Numberplate',
allowMultiple: true,
config: {
layout: 'vbox', // Add right here
pack:'center',
centered:true,
height:30,
width:100,
xtype:'button',
items: [
{
xtype:'segmentedbutton',
allowDepress:true,
scroll:true,
//layout:'vbox',
items:[
{
text:'1',
width:100
},
{
text : '2',
width:100
},
{
text: '3',
width:100
}
]
},
{
xtype:'segmentedbutton',
//centered:true,
pack:'center',
items:[
/* {
centered:true,
html: [
'<br><br><br><br>'
].join("")
},*/
{
text:'4',
width:100
},
{
text:'5',
width:100
},
{
text:'6',
width:100
}
]
}
]
},
constructor: function() {
this.on({
scope: this,
delegate: 'button',
tap: 'tapHandler'
});
this.callParent(arguments);
},
tapHandler: function(button) {
alert(button.getText());
// this.setHtml("<span class=action>User tapped " + button.getText() + "</span>");
}
});
Hope it helps :)
I'm trying out the new dataview component and I'm working with this Sencha example:
http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/
In KittensListItem, I removed the image and now I want to add three
buttons that say: "Email", "Facebook", and "Twitter", and not the
value in the Store. When the user clicks on each button, I'd like to
show each button's respective Store value. How can this be accomplished?
Here's what the screen looks like at the moment:
Example.view.KittensListItem:
Ext.define('Example.view.KittensListItem', {
extend: 'Ext.dataview.component.DataItem',
xtype : 'contactslistitem',
requires: [ 'Ext.Button', 'Ext.slider.Slider' ],
config: {
dataMap: {
getName: { setHtml: 'name' },
getSlider: { setValue: 'cuteness' },
getEmail: { setHtml: 'email' },
getTwitter: { setHtml: 'twitter' },
getFacebook: { setHtml: 'facebook' }
},
name: { flex: 1 },
slider: { flex: 1 },
email: {
text: 'Email',
style: 'font-size: 12px;',
flex: 1
},
facebook: {
text: 'Facebook1',
style: 'font-size: 12px;',
flex: 1
},
twitter: {
text: 'Twitter',
style: 'font-size: 12px;',
flex: 1
},
layout: {
type: 'hbox',
align: 'center'
}
},
applyName: function(config) { return Ext.factory(config, Ext.Component, this.getName()); },
updateName: function(newName, oldName) {
if (newName) { this.add(newName); }
if (oldName) { this.remove(oldName); }
},
applySlider: function(config) { return Ext.factory(config, Ext.slider.Slider, this.getSlider()); },
updateSlider: function(newSlider, oldSlider) {
if (newSlider) { this.add(newSlider); }
if (oldSlider) { this.remove(oldSlider); }
},
applyEmail: function(config) { return Ext.factory(config, Ext.Button, this.getEmail()); },
updateEmail: function(newEmailButton, oldEmailButton) {
if (newEmailButton) { this.add(newEmailButton); }
if (oldEmailButton) { this.remove(oldEmailButton); }
},
applyTwitter: function(config) {return Ext.factory(config, Ext.Button, this.getTwitter()); },
updateTwitter: function(newTwitterButton, oldTwitterButton) {
if (newTwitterButton) { this.add(newTwitterButton); }
if (oldTwitterButton) { this.remove(oldTwitterButton); }
},
applyFacebook: function(config) { return Ext.factory(config, Ext.Button, this.getFacebook()); },
updateFacebook: function(newFacebookButton, oldFacebookButton) {
if (newFacebookButton) { this.add(newFacebookButton); }
if (oldFacebookButton) { this.remove(oldFacebookButton); }
}
});
Model:
Ext.define('Example.model.Kitten', {
extend: 'Ext.data.Model',
config: {
fields: [
"name",
"email",
"twitter",
"facebook",
{ name: "cuteness", type: 'int' }
]
}
});
Store:
Ext.define('Example.store.Kittens', {
extend: 'Ext.data.Store',
requires: ['Example.model.Kitten'],
config: {
model: 'Example.model.Kitten',
data: [
{ name: 'one', email: 'email#addr', twitter: '#twitter', facebook: 'Facebook...', cuteness: 70 },
{ name: 'two', email: 'email#addr', twitter: '#twitter', facebook: 'Facebook...', cuteness: 90 },
{ name: 'three', email: 'email#addr',twitter: '#twitter', facebook: 'Facebook...',cuteness: 40 }
]
}
});
After scouring the Internet I found a solution to the 'tap' event for each button. The trick is to add a tap listener in the update* functions. I'm still not sure how to set the static labels on each button.
Btw, a better answer gets someone else the upvote and check.
updateEmail: function(newEmailButton, oldEmailButton) {
if (newEmailButton) {
newEmailButton.on('tap', this.onEmailButtonTap, this);
this.add(newEmailButton);
}
if (oldEmailButton) {
this.remove(oldEmailButton);
}
},
onEmailButtonTap: function(button, event) {
var record = this.getRecord();
Ext.Msg.alert(record.get('email') + ", " + record.get('facebook') );
}
Hi I'm new to Sencha Touch and having problems too getting started. I came across this post looking for ways to access dataview item components/values from a controller. In my case I'm looking to use a slider and editbox value together and automatically update either value after updates.
Dataview has an itemtap listener which is handy returning the row index and the record as mentioned in this post. I still found it was a problem to pin down the component that was tapped so ended up just filtering the component by event object name.
Controller:
control: {
'contactslistitem': {
itemtouchend: 'tapItem',
}
}
tapItem: function(dataview, index, target, record, e, eOpts) {
if('facebookbutton'==e.target.name)
alert('Tapped facebook button on row '+index);
}
The dataview config for the facebook button element includes the name attribute:
facebook: {
name: 'facebookbutton'
text: 'Facebook1',
style: 'font-size: 12px;',
flex: 1
},
I still feel there must be a better way with ST2 to process dataview rows components together without having to look up the index/component each time.
I've been trying for two days to add a list or NestedList to one of my tabs in Sencha Touch and I can't do it :( My tab code is:
Darsnameh.views.Coursecard = Ext.extend(Ext.Panel,{
title: "Courses",
iconCls: "bookmarks",
style:"background:red",
dockedItems:[{
xtype:'toolbar',
title:'Courses'
}]
})
Ext.reg('coursecard',Darsnameh.views.Coursecard);
and my list code is
Ext.regModel('Contact',{
fields:['firstName','lastName']
});
Darsnameh.CoursesStore = new Ext.data.Store({
model: 'Contact',
data:[
{firstName:'Domino', lastName:'Derval' },
{firstName:'Domino2', lastName:'Derval2' },
{firstName:'Domino3', lastName:'Derval3' },
{firstName:'Domino4', lastName:'Derval4' },
{firstName:'Domino5', lastName:'Derval5' },
{firstName:'Domino6', lastName:'Derval6' }
]
});
Darsnameh.coursesList = new Ext.List({
id:'courseslist',
store: Darsnameh.CoursesStore,
itemTpl:'<div class="contact">{firstName}</div>'
});
When I add anything like
items:[Darsnameh.coursesList]
the application page is blank and nothing is shown, what should I add to have the list, or nested list in a tab?
In accordance to my previous answer i've added how to create list panel... just have a look at this
NotesApp.views.noteEditor = new Ext.form.FormPanel({
id:'noteEditor',
items: [
{
xtype: 'textfield',
name: 'title',
label: 'Title',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: 'Narrative'
} ,
],
dockedItems: [
NotesApp.views.noteEditorTopToolbar,
]
});
NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
title: 'Edit Note',
items: [
{
text: 'Save',
ui: 'action',
handler: function () {
var noteEditor = NotesApp.views.noteEditor;
var currentNote = noteEditor.getRecord();
noteEditor.updateRecord(currentNote);
var errors = currentNote.validate();
if (!errors.isValid()) {
Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
return;
}
var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore(); // where i've declared my store
if (notesStore.findRecord('id', currentNote.data.id) === null) {
notesStore.add(currentNote);
} else {
currentNote.setDirty();
}
notesStore.sync();
}
}
]
});
var NotesStore=new Ext.data.Store({
model: 'Note',
storeId:'noteid',
sorters: [{
property: 'date',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'notes-app-localstore'
},
});
NotesApp.views.notesList = new Ext.List({
id: 'notesList',
store: NotesStore,
itemTpl: '<div class="list-item-title">{title}</div>'+
'<div class="list-item-narrative">{narrative}</div>',
onItemDisclosure:function(listrecord){
var selectedNote = listrecord;
NotesApp.views.noteEditor.load(selectedNote);
NotesApp.views.viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
},
listeners: {
'render': function (thisComponent) {
thisComponent.getStore().load();
}
}
});