Moving from one view to another using sencha touch - sencha-touch

I'm very new to sencha touch and ive having difficulty in moving in moving from one view to another when i click the add button in my mainview in my practice application.ive tried searching for errors in my console panel but Chrome just shows and empty console. I'm sorry if this seems like a noob query but any help is gratefully accepted.
MainView.js
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
requires: [
'Ext.navigation.Bar',
'Ext.Button'
],
config: {
itemId: 'MainView',
navigationBar: {
docked: 'top',
itemId: 'navbar',
items: [
{
xtype: 'button',
align: 'right',
itemId: 'addButton',
iconAlign: 'center',
iconCls: 'add'
}
]
}
}
});
AddForm.js
Ext.define('MyApp.view.AddForm', {
extend: 'Ext.form.Panel',
requires: [
'Ext.form.FieldSet',
'Ext.field.DatePicker',
'Ext.picker.Date',
'Ext.Button'
],
config: {
items: [
{
xtype: 'fieldset',
itemId: 'myForm',
title: 'Insert Data',
items: [
{
xtype: 'textfield',
label: 'ID',
name: 'id',
required: true
},
{
xtype: 'textfield',
label: 'Name',
name: 'username',
required: true,
autoCapitalize: true
},
{
xtype: 'datepickerfield',
label: 'Date Of Birth',
labelWrap: true,
placeHolder: 'mm/dd/yyyy'
}
]
},
{
xtype: 'button',
itemId: 'saveButton',
margin: 10,
ui: 'confirm',
text: 'SAVE'
},
{
xtype: 'button',
itemId: 'declineButton',
margin: 10,
ui: 'decline',
text: 'DELETE'
}
]
}
});
FirstControl.js(Controller)
Ext.define('MyApp.controller.FirstControl', {
extend: 'Ext.app.Controller',
config: {
refs: {
MainView: 'mainview',
addButton: 'mainview #addButton'
},
control: {
"mainview #addButton": {
tap: 'add'
}
}
},
add: function(button, e, eOpts) {
console.log('inside the add function');
this.getMainView().push({
xtype:'AddForm',
title:'Insert'
});
}
});

forgot to add the alias:'field'

Change your add function in FirstControl.js(Controller file) file to below.
add: function(button, e, eOpts) {
console.log('inside the add function');
this.getMainView().push(Ext.create('MyApp.view.AddForm'));
}
It should work.

Related

FormPanel getValues() not working on button tap event in sencha touch2?

I’ve created a FormPanel form for submitting some record in our database.
FormPanel Code:
Ext.define('MyApp.view.NIForm', {
extend: 'Ext.form.Panel',
config: {
id: 'NIForm',
items: [
{
xtype: 'panel',
items: [
{
xtype: 'textfield',
docked: 'left',
id: 'ORDNUM_39',
width: '95%',
label: 'Order#',
name: 'ORDNUM_39'
},
{
xtype: 'button',
docked: 'right',
itemId: 'browseOrder',
width: '5%',
text: '...'
}
]
},
{
xtype: 'textfield',
id: 'DESC',
style: 'margin-top:2px;',
label: 'Description',
name: 'DESC'
},
{
xtype: 'numberfield',
id: 'TNXQTY_39',
style: 'margin-top:2px;',
label: 'Quantity',
name: 'TNXQTY_39'
},
{
xtype: 'panel',
items: [
{
xtype: 'textfield',
docked: 'left',
style: 'margin-top:2px;',
width: '95%',
label: 'GL Code',
name: 'GLREF_39'
},
{
xtype: 'button',
docked: 'right',
width: '5%',
text: '...'
}
]
},
{
xtype: 'textfield',
id: 'REFDSC_39',
style: 'margin-top:2px;',
label: 'Reference',
name: 'REFDSC_39'
},
{
xtype: 'button',
action: 'niProcess',
itemId: 'mybutton3',
style: 'margin-top:6px;',
ui: 'confirm',
text: 'Process'
}
],
listeners: [
{
fn: 'onBrowseOrderTap',
event: 'tap',
delegate: '#browseOrder'
}
]
}
});
Now I want to get all textfields value on process button tap event, To get the formpanel value I've written following line of code.
var me = this;
var form = this.getNIForm();
var values = form.getValues();
var record = form.getRecord();
Can you tell me what am I doing wrong? Please explain.
Added another listener and it seems to work fine.
listeners: [{
fn: function () {
console.info('sdfsd');
},
event: 'tap',
delegate: '#browseOrder'
}, {
fn: function () {
console.info(this.getValues());
},
event: 'tap',
delegate: '#mybutton3'
}]
Here is the fiddle
If you want to retrieve particular TextField value use
Ext.getCmp('ORDNUM_39').getValue();
To get all form field values u can use like,
var form = this.getNav();
//if ur ref name inside ur controller is nav

Modal view in sencha touch 2

I am trying to show a view as a "modal" within my application. The main application is a tab panel and when the user does a certain action, I want to popup a view ontop of this tabpanel. I know on native iOS you can do this by pushing a view as a modal but how do I do this in Sencha?
Any ideas?
You can do this:
Ext.define('MyApp.controller.MyController4', {
extend: 'Ext.app.Controller',
config: {
control: {
"button#mybutton": {
tap: 'onMybuttonTap'
}
}
},
onMybuttonTap: function(button, e, options) {
Ext.Viewport.add({xtype:'modalpanel'});
}
});
Views:
Ext.define('MyApp.view.ModaPanel', {
extend: 'Ext.Panel',
alias: 'widget.modalpanel',
config: {
centered: true,
height: 300,
html: 'Cool Story Bro....',
itemId: 'modalPanel',
width: 300,
hideOnMaskTap: true,
modal: true,
scrollable: true,
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Blah Blah'
}
]
}
});
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
items: [
{
xtype: 'container',
title: 'Tab 1',
items: [
{
xtype: 'button',
itemId: 'mybutton',
text: 'MyButton10'
}
]
},
{
xtype: 'container',
title: 'Tab 2'
},
{
xtype: 'container',
title: 'Tab 3'
}
]
}
});
EDIT:
You are probably looking for an actionsheet if this is not exactly what you want. See the Sencha Touch Kitchensink for the different types of Overlays.

Changing Displayed Card In Sencha Touch From The Controller

Once I have signed in I want the sign in page to be replaced with the dashboard page but for some reason I can't get the card to change as I cant get a refrence to it that will accept the setActiveItem method.
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
views: [
'MainPanel'
],
name: 'MyApp',
controllers: [
'MainController'
],
launch: function() {
Ext.create('MyApp.view.MainPanel', {fullscreen: true});
}
});
MainController.js
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
alias: 'controller.mainController',
config: {
},
init: function(application) {
this.control({
'button[action=submitSigninemEmail]': {
tap: 'signinemEmailFnc'
}
});
},
signinemEmailFnc: function() {
var email_fld = Ext.getCmp('signinemEmail').getValue();
var password_fld = Ext.getCmp('signinemPassword').getValue();
var md5password = MD5(password_fld);
Ext.data.JsonP.request({
url: 'http://www.solumac.co.uk/clients/uwana/v2/ajax/sencha.php',
params: {
method: 'signinem',
callback: 'signinem',
email: email_fld,
password: md5password
},
callback: function(result, params) {
if (result === true) {
if (params.status === true){
console.log('signed in');
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
} else {
console.log(params.message);
}
}
}
});
}
});
MainPanel.js
Ext.define('MyApp.view.MainPanel', {
extend: 'Ext.Panel',
alias: 'widget.mainPanel',
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'container',
id: 'signinem',
layout: {
type: 'fit'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
id: 'signinemTitleBar',
title: 'Sign In',
items: [
{
xtype: 'button',
id: 'signinemButtonBack',
ui: 'back',
text: 'Back'
},
{
xtype: 'button',
align: 'right',
id: 'signinemButtonSignUp',
text: 'Sign Up'
}
]
},
{
xtype: 'container',
id: 'signinemPadding',
padding: 10,
width: '100%',
items: [
{
xtype: 'fieldset',
id: 'signinemFacebookSet',
title: 'Sign In with Facebook',
items: [
{
xtype: 'button',
id: 'signinemFacebook',
margin: 10,
width: '',
text: 'Facebook'
}
]
},
{
xtype: 'fieldset',
id: 'signinemEmailSet',
title: 'Sign In with Email',
items: [
{
xtype: 'textfield',
id: 'signinemEmail',
margin: 10,
label: 'email'
},
{
xtype: 'passwordfield',
id: 'signinemPassword',
margin: 10,
label: 'Password'
},
{
xtype: 'checkboxfield',
action: 'changeField',
id: 'signinemShow',
itemId: 'mycheckbox',
margin: 10,
label: 'show password',
labelWidth: '80%'
},
{
xtype: 'button',
action: 'submitSigninemEmail',
id: 'signinemSubmit',
margin: 10,
text: 'Submit'
}
]
}
]
}
]
},
{
xtype: 'container',
id: 'dashboard',
layout: {
type: 'fit'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
id: 'dashboardBar',
title: 'Dashboard'
}
]
},
listeners: [
{
fn: 'onSigninemShowCheck',
event: 'check',
delegate: '#signinemShow'
},
{
fn: 'onSigninemShowUncheck',
event: 'uncheck',
delegate: '#signinemShow'
}
]
},
onSigninemShowCheck: function(checkboxfield, e, options) {
alert('show password');
},
onSigninemShowUncheck: function(checkboxfield, e, options) {
alert('hide password');
}
});
I believe the problem lies with the line...
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
...which doesn't work, but have drawn a complete blank as to what should replace it.
if you change
Ext.create('MyApp.view.MainPanel', {fullscreen: true});
to
Ext.Viewport.add(Ext.create('MyApp.view.MainPanel'));
in your app.js, then in your controller change
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
to
Ext.Viewport.setActiveItem(Ext.create('dashboard'),{
// other stuff
});
and add dashboard to your views array in app.js I believe it should work
You can't just do a setActiveItem of the id string like you did above:
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
You first have to get the reference to the component using Ext.getCmp().
Also, MyApp.views.MainPanel is a class name, and not an instance. You would need to get the specific instance object, and then use it to set the active item.
Here's some code that will work for you:
var mypanel = Ext.ComponentQuery('mainPanel')[0];
var active = Ext.getCmp('dashboard');
mypanel.setActiveItem(active, {type: 'slide', direction: 'left'});
I'm also including a 1 file application that does what you want:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
alias: 'widget.mypanel',
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'button',
handler: function(button, event) {
var comp = Ext.ComponentQuery.query('mypanel')[0];
var active = Ext.getCmp('c1');
comp.setActiveItem(active);
},
text: 'one'
},
{
xtype: 'button',
handler: function(button, event) {
var comp = Ext.ComponentQuery.query('mypanel')[0];
var active = Ext.getCmp('c2');
comp.setActiveItem(active);
},
text: 'two'
}
]
},
{
xtype: 'container',
html: 'Hello, first container',
id: 'c1'
},
{
xtype: 'container',
html: 'hello, second container',
id: 'c2'
}
]
}
});

Controller for Buttons Sencha Touch 2

I have this problem that I can ref a button for control it. I don't understand the logic of Controllers, see my example code:
Ext.define('myMoney.controller.Inicio', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: '#loginForm',
logButton: '#logButton',
},
control: {
logButton: {
tab: "autenthic"
}
}
},
autenthic: function(){
console.log("Wazzup!?");
}
});
I have my view:
Ext.define('myMoney.view.Inicio', {
extend: 'Ext.form.Panel',
xtype: 'inicio',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password'
],
config: {
title: 'Inicio',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
xtype: 'toolbar',
title: 'Money Tracker',
docked: 'top'
},
{
xtype: 'fieldset',
title: 'Inicio de Sesion',
id: 'loginForm',
instructions: '(Por favor coloca tu usuario y clave)',
items: [
{
xtype: 'textfield',
name: 'us',
label: 'Usuario'
},
{
xtype: 'passwordfield',
name: 'pw',
label: 'Clave'
}
]
},
{
xtype: 'button',
width: '50%',
centered: true,
text: 'Aceptar',
ui: 'confirm',
id: 'logButton'
}
]
}
});
What is wrong?
Instead of
tab: "autenthic"
write
tap: "autenthic"

I can't group a list

Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
xtype:'mypanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Lezzet Dunyasi',
items: [
{
xtype: 'button',
docked: 'right',
height: 29,
hidden: true,
ui: 'back',
text: 'back'
}
]
},
{
xtype: 'list',
docked: 'left',
id: 'mylist',
ui: 'round',
grouped:true,
pinHeaders:false,
width: 331,
itemTpl: [
'<img src="{img_url}" width="60" heigh="60"></img><span>{label}</span>'
],
store: 'Menius',
items: [
{
xtype: 'searchfield',
docked: 'top',
placeHolder: 'Search...',
}
]
},
{
xtype: 'panel',
styleHtmlContent:true,
style: {
backgroundImage: 'url(resources/img/Landscape.png)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
},
id:'mypanel'
}
]
}
});
My Store
I use some codes in my store
sorters:'id',
grouper:function(record) {
return record.get('id')[4];
When i write grouped:true into the list config , app doesn't run. I don't understand the reason.
I want to see same result like kitchensink example userinterface/list/disclosure section.
add this configartion in your store
groupField:'label'