PDA

View Full Version : what's difference between Ext JS and touch controller



vnggui
16 Oct 2013, 11:12 AM
I'm trying to start a very simple Ext JS sample with Architect .

I write a controller with config style (working in Sencha touch) which doesn't work, then change to the following also not, what's the normal ways to write a Ext JS controller?


Ext.define('MyApp.controller.PubSub', {
extend: 'Ext.app.Controller',

/* Touch style
config:{
refs:{
myBtn:'#mybtnid',
myPanel:'#mypanelid',
myWindow:'#windowid'
},
control:{
myBtn:{
tap:this.btnTap
}

}

},
*/
refs:[{
selector:' viewport > #windowid > #mybtnid',
ref:'myButton'
}],
init:function(){
this.control({
'myButton':{
click:this.btnTap
}

});
},

btnTap:function(){
alert(' tap button');

}
});

vnggui
16 Oct 2013, 11:30 AM
Here is the sample:
46359
View:



Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',


height: 250,
hidden: false,
id: 'windowid',
width: 400,
layout: {
type: 'absolute'
},
title: 'My Window',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'panel',
id: 'mypanelid',
layout: {
type: 'fit'
},
title: '',
items: [
{
xtype: 'button',
id: 'mybtnid',
text: 'MyButton'
},
{
xtype: 'form',
id: 'formpanelid',
margin: '50 15 5 5',
bodyPadding: 10,
title: '',
items: [
{
xtype: 'textfield',
anchor: '100%',
id: 'tid',
fieldLabel: 'top'
},
{
xtype: 'textfield',
anchor: '100%',
id: 'lid',
fieldLabel: 'left'
},
{
xtype: 'textfield',
anchor: '100%',
id: 'wid',
fieldLabel: 'width'
},
{
xtype: 'textfield',
anchor: '100%',
id: 'hid',
fieldLabel: 'height'
},
{
xtype: 'textfield',
anchor: '100%',
id: 'zindexid',
fieldLabel: 'zIndex'
}
]
}
]
}
]
});


me.callParent(arguments);
}


});

Controller:




Ext.define('MyApp.controller.PubSub', {
extend: 'Ext.app.Controller',

init:function(){
this.control({
'viewport >panel > button[text=MyButton]':{
click: this.btnClick
}
});

this.application.on({

});
},

btnClick:function(){
alert('click click');

}
});




app.js


Ext.Loader.setConfig({
enabled: true
});




Ext.application({
models: [
'MyModel'
],
stores: [
'MyStore'
],
views: [
'MyWindow'
],
autoCreateViewport: true,
controllers: [
'PubSub'
],
name: 'MyApp'
});



click button no reaction, what's wrong?

Thanks ahead.

vnggui
16 Oct 2013, 11:41 AM
Solved, working code:




Ext.define('MyApp.controller.PubSub', {
extend: 'Ext.app.Controller',

init:function(){
this.control({
/* not working with 'viewport'
'viewport > #mypanelid':{
render:this.panelRender
},
*/
'#mypanelid':{
render:this.panelRender
},

'#mypanelid > button[text=MyButton]':{
click: this.btnClick
}
});

this.application.on({

});
},

panelRender:function(){
console.log('......');
},
btnClick:function(){
console.log('click click');
alert('click click');

}
});