Wednesday, April 11, 2012

Using Controller to Attach Events (sencha touch / extjs)

My experience in web programming is limited to intermediate, self-taught JS and jQuery with a dash of PHP. ExtJS is turning out to be an entirely different animal.



I can't figure out why my controller isn't doing what I expect, especially since I'm following the syntax that is used in the documentation (which is becoming increasingly useless as they fail to describe what is actually happening in the examples... but I digress).



Main.js



    Ext.define("cs.view.Main", {
extend: 'Ext.TabPanel',
tabBarPosition: 'bottom',

requires: [
'cs.view.form',
'cs.view.location',
'Ext.TitleBar',
'cs.controller.geolocate'
],

config: {
tabBar: {
docked: 'bottom',
},
defaults: {
flex: 1
},
items: [
{ xtype: 'form' },
{ xtype: 'location' }
]
},
});


form.js



Ext.define('cs.view.form', {
extend: 'Ext.form.Panel',
requires: 'cs.controller.geolocate',
xtype: 'form',
alias: 'widget.getLoc',

config: {
title: 'Home',
iconCls: 'home',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Client Finder'
},
{
xtype: 'textfield',
name: 'address',
label: 'address'
},
{
xtype: 'textfield',
name: 'dist',
label: 'distance(mi)'
},
{
xtype: 'button',
ui: 'confirm',
text: 'submit',
id: 'submitButton',
alias: 'widget.submitButton',
}
]
},
});


geolocate.js



Ext.define('cs.controller.geolocate', {
extend: 'Ext.app.Controller',

config: {
views: ['Main', 'form', 'location'],
control: {
aButton: {
tap: 'message'
}
},//control
refs: {
aButton: '#submitButton'
},//refs
},//config

message: function(){
Ext.Msg.alert("Success", "Finally!");
}
});




No comments:

Post a Comment