My question s in relation to the possible answer in this post Sencha Touch 2 - How to get form values?
Im having the same issue trying to retrieve the values from a form in a View using a Controller.
My current error is Uncaught TypeError: Object # has no method 'getValues'
View:
Ext.define("App.view.Login", {
extend: 'Ext.form.Panel',
requires: [
'Ext.field.Password'
],
id: 'loginview',
config: {
items: [{
xtype: 'titlebar',
title: 'Login',
docked: 'top'
},
{
xtype: 'fieldset',
id: 'loginForm',
defaults: {
required: true
},
items: [{
items: [{
xtype: 'textfield',
name: 'username',
label: 'Username:'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password:'
}]
}]
},
{
xtype: 'toolbar',
layout: {
pack: 'center'
}, // layout
ui: 'plain',
items: [{
xtype: 'button',
text: 'Register',
id: 'register',
ui: 'action',
}, {
xtype: 'button',
text: 'Login',
id: 'login',
ui: 'confirm',
}] // items (toolbar)
}]
}
});
Controller:
Ext.define('App.controller.Login', {
extend: 'Ext.app.Controller',
requires: [
'App.view.Login',
'Ext.MessageBox'
],
config: {
refs: {
loginForm: '#loginForm',
register: '#register',
login: '#login'
},
control: {
register: {
tap: 'loadRegisterView'
},
login: {
tap: 'loginUser'
}
},
history: null
},
loadRegisterView: function(btn, evt) {
/*var firststep = Ext.create('App.view.Register');
Ext.Viewport.setActiveItem(firststep);*/
},
loginUser: function(btn, evt) {
var values = loginForm.getValues();
console.log(values);
}
});
Thanks
Edit:
So the below code works but its not how i see everyone doing it.
var form = Ext.getCmp('loginview');
console.log(form.getValues());
Everyone else does this.getLoginView().getValues(); . I dont understand "this" is in the wrong scope and where would getLoginView even be declared? No one ever includes this information in their snippets. Here is another example Sencha Touch 2 - How to get form values?
Add xtype in view below the "id":
xtype: 'loginform',
and then replace the reference of loginForm with this:
loginForm: 'loginform',
Your code will work. The mistake you were doing is you were trying to access the method of 'formpanel' in 'fieldset'.
Related
I'm trying to become familiar with Ext JS 5. I took a sencha generated app as
the start point and modified it to see a grid of one line.
But the page is simply blank.
Can anyone, please, show me what am I doing wrong?
I am not familiar with the MVVM pattern but I want to learn it.
Here's my set of files:
And here are the JS sources.
Applications.js
Ext.define('Admin.Application', {
extend: 'Ext.app.Application',
name: 'Admin'
});
Base.js (base class for models)
Ext.define('Admin.model.Base', {
extend: 'Ext.data.Model',
schema: {
namespace: 'Admin.model'
}
});
Item.js (a simple model)
Ext.define('Admin.model.Item', {
extend: 'Admin.model.Base',
fields: [
{ name: 'id', type: 'int' },
{ name: 'title', type: 'string' }
]
});
ItemList.js (a store of items that I want to show in a grid)
Ext.define('Admin.store.ItemList', {
extend: 'Ext.data.Store',
alias: 'store.itemlist',
model: 'Admin.model.Item',
data: [{id: 1, title: 'title1'}]
});
ItemListGrid.js (the panel with the grid)
Ext.define('Admin.view.main.ItemListGrid', {
extend: 'Ext.grid.Panel',
requires: [
'Admin.store.ItemList'
],
alias: 'widget.itemlistgrid',
bind: {
store: '{itemlist}',
title: '<b>Some title</b>',
columns: [{
text: 'id',
dataIndex: 'id'
},{
text: 'title',
dataIndex: 'title'
}]
}
});
Main.js
Ext.define('Admin.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'Admin.view.main.MainController',
'Admin.view.main.MainModel',
'Admin.view.main.ItemListGrid'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
xtype: 'panel',
//region: 'west',
width: '100%',
items: [{
xtype: 'itemlistgrid'
}]
}]
});
MainController.js
Ext.define('Admin.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main'
});
MainModel.js
Ext.define('Admin.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Admin'
},
bind: {
store: '{itemlist}'
}
});
The sencha app build builds the app without errors. But I don't see the grid.
Before this I tried the default generated app and it showed in my browser OK.
Thank you.
Here's the exact answer to my question https://www.sencha.com/forum/showthread.php?299703-ExtJS-5-first-steps-cannot-see-a-simple-grid-with-one-store&p=1095022&viewfull=1#post1095022
I have a Sencha Touch code base and I wanted to be able to use the "Enter" key to submit the initial log in to the application instead of having to click the button on a desktop. Here is my Login view:
Ext.define('App.view.Login', {
extend: 'Ext.form.Panel',
alias: 'widget.login',
requires:[
'Ext.form.FieldSet',
'Ext.field.Email',
'Ext.field.Password'
],
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'App'
},
{
xtype: 'fieldset',
margin: '.5em .5em 1.5em',
title: 'Login',
items: [
{
xtype: 'emailfield',
name: 'email',
placeHolder: 'email#example.com',
required: true
},
{
xtype: 'passwordfield',
name: 'password',
placeHolder: 'password',
required: true,
}
]
},
{
xtype: 'container',
layout: {
type: 'vbox'
},
margin: '10px',
items:[
{
xtype: 'button',
margin: '10px',
itemId: 'login',
text: 'Login'
}
]
}
]
}
});
And here is my Login controller:
Ext.define("App.controller.Login", {
extend: "Ext.app.Controller",
config: {
views: ["Login", "user.Home"],
stores: ["LoginInstance"],
refs: {
password: 'passwordfield[name="password"]',
login: {
autoCreate: true,
selector: "login",
xtype: "login"
}
},
control: {
password: {
keyup: function(field, e) {
if(e.event.keyCode === 13) {
console.log('Do login');
this.onLoginTap();
}
}
},
"login #login": {
tap: "onLoginTap"
},
// ...
}
},
onLoginTap: function() { ... } // do the login
However, this seems to not do anything (that is, not even the console.log appears in the console!). Does anyone have have suggestion as to what I could be doing wrong?
It looks like there's more than one issue in your code.
control doesn't target your password field. The key password references an component with xtype password. The correct way to reference it is either passwordfield if you never have more than one of them or 'passwordfield[name="password"]'.
the purpose of refs is to create a method of the controller like this.getPassword() to get the password field. Also the way you define it is invalid. It must be like refs: [{ref: 'password', selector: 'passwordfield[name="password"]'
you must not nest configurations inside a config property. extend: "Ext.app.Controller", config: { views: should be extend: "Ext.app.Controller", views:
I don't think this is exhaustive. There must be more issues.
Please read the documentation and don't try to code by trial and error. It is not a good programming practice.
I'm new to Sencha ExtJS. I've just started creating a MVC application. Currently I'm trying to create a login screen for that application, but I can't get reference to my login form from login controller. Here is my code:
app.js
Ext.application({
name: 'Fleximanager',
requires: [
],
controllers: [
'Login'
],
autoCreateViewport: true,
init: function() {
}
});
Viewport.js
Ext.define('Fleximanager.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Fleximanager.view.login.Flexilogin'
],
layout: 'fit',
items: [{
xtype:'flexilogin'
}]
});
Flexilogin.js
Ext.define('Fleximanager.view.login.Flexilogin', {
extend: 'Ext.panel.Panel',
xtype: 'flexilogin',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
id: 'flexilogin',
style: {background: '#8fc33a'},
items: [{
xtype:'panel',
title: 'Login',
frame: true,
width: 350,
height: 200,
layout: 'fit',
items: {
layout: 'anchor',
id: 'flexiloginform',
bodyPadding: 15,
defaultType: 'textfield',
items: [{
fieldLabel: 'Username',
name: 'username',
allowBlank: false
},{
fieldLabel: 'Password',
name: 'password',
inputType: 'password',
allowBlank: false
}],
buttons: [{
text: 'Register',
id: 'registerbtn',
action: 'register'
},{
text: 'Login',
id: 'loginbtn',
formBind: true,
}]
}
}]
});
and the controller's Login.js
Ext.define('Fleximanager.controller.Login', {
extend: 'Ext.app.Controller',
requires: [
'Fleximanager.view.login.Flexilogin',
],
refs:[{
ref: 'loginbtn',
selector: '#loginbtn'
}],
init: function(){
this.control({
'loginbtn': {
'click': function(){
console.log('click');
}
}
})
}
});
The code is supposed to log 'click' to console after you click the login button, but it does nothing. Can anyone help me?
Thanks for any answer.
The problem lies in how you are referencing the button.
refs:[{
ref: 'loginbtn',
selector: '#loginbtn'
}],
Is creating a reference getter method this.getLoginbtn to use in the controller, but it cannot be used in this.control
The string key in this.control is a identifier like defined in Ext.ComponentQuery.query. It searches for xtype/alias and itemId.
this.control({
'flexilogin #loginbtn': {
^ xtype ^ itemId
Note that you should use itemId instead of id because id must be unique on the page at any moment, itemId should be unique inside a component; change like this:
{
text: 'Login',
itemId: 'loginbtn',
^ replace id by itemId
formBind: true,
name: 'login'
}
Just give a name to your button like this,
{
text: 'Login',
id: 'loginbtn',
formBind: true,
name: 'login'
}
and now in controller, put this code:
this.control({
'button[name="login"]': {
click: function(){
console.log('click');
}
}
})
This will serve your purpose.
I'm trying to learn how to use Sencha Touch to build web apps. I've been following the tutorial Here and I am a bit stuck. Below have created one controller, two views and a model (All other code is copy & paste from the tutorial). The first view, Index works great. However if I try to access the second, it brings up a blank page, none of the toolbar buttons work and it doesn't fire the alert.
If I do comment out the line this.application.viewport.setActiveItem(this.editGyms);, the alert will fire, but obviously, it doesn't render the page.
I've looked at a couple other tutorials, and they seem to also be using the setActiveItem member to switch views.. Am I missing something, or do I have to somehow deactivate the first view to activate the second or something?
HomeController.js
Ext.regController('Home', {
//Index
index: function()
{
if ( ! this.indexView)
{
this.indexView = this.render({
xtype: 'HomeIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
editGyms: function()
{
if ( ! this.editGyms)
{
this.editGyms = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGyms);
Ext.Msg.alert('Test', "Edit's index action was called!");
},
});
views/home/HomeIndexView.js
App.views.wodList = new Ext.List({
id: 'WODList',
store: 'WODStore',
disableSelection: true,
fullscreen: true,
itemTpl: '<div class="list-item-title"><b>{title}</b></div>' + '<div class="list-item-narrative">{wod}</div>'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [App.views.wodList]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
views/home/EditGymStore.js
App.views.EditGymStore = Ext.extend(Ext.Panel, {
html: 'Edit Gyms Displayed Here',
});
Ext.reg('EditGymStore', App.views.EditGymStore);
models/appModel.js
Ext.regModel('WOD', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'wod', type: 'string' },
{ name: 'url', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title' }
]
});
Ext.regStore('WODStore', {
model: 'WOD',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'wod-app-localstore'
},
// REMOVE AFTER TESTING!!
data: [
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc1</br><br/>' },
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc2</br><br/>' }
]
});
viewport.js with toolbar
App.views.viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
dockedItems: [
{
xtype: 'toolbar',
title: 'The Daily WOD',
buttonAlign: 'right',
items: [
{
id: 'loginButton',
text: 'Login',
ui: 'action',
handler: function() {
Ext.Msg.alert('Login', "This will allow you to Login!");
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
ui: 'action',
handler: function() {
Ext.Msg.alert('Refresh', "Refresh!");
}
}]
},
],
});
Thanks for the help!!
In HomeController.js your action function (editGyms) is the same name as the variable you're using for your view (this.editGyms) so when it tries to setActiveItem(this.editGyms) its actually passing the controllers action function rather than the results of this.render({...})
Either change the name of the controller action or change the name of the variable you use to hold the view.. like
editGyms: function() {
if ( ! this.editGymView) {
this.editGymView = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}
I am colleagues with the guy that wrote the tutorial you are referring to. You should add a comment on that post because I described your problem to him and he said that he knows the solution.
You can just add a link to this page so that you won't need to describe everything again.
Also he will (very) soon publish the 3rd part of that tutorial that will cover some similar things.
I'm having trouble understanding how I need to define and use the MVC model for my test EXTjs4 app. Consider the following structure.
app.js
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: ['Cards', 'Fourscrum'],
launch: function () {
Ext.create('Ext.container.Viewport', {
defaults: { flex: 1 },
layout: {
type: 'hbox',
align: 'stretch',
},
items:
[
Ext.widget('Fourscrum')
]
});
Controller:
Cards.js
Ext.define('AM.controller.Cards', {
extend: 'Ext.app.Controller',
stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
models: ['Card', 'Priority', 'Size'],
views: ['card.List', 'priority.prioritycombo', 'card.Edit'],
Fourscrum.js
Ext.define('AM.controller.Fourscrum', {
extend: 'Ext.app.Controller',
stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
models: ['Card', 'Priority', 'Size'],
views: ['scrum.Fourscrum', 'card.List'],
view.scrum.Fourscrum.js
Ext.define('AM.view.scrum.Fourscrum', { // *** Variable
extend: 'Ext.panel.Panel',
alias: 'widget.Fourscrum', // *** Variable
width: 400,
height: 300,
layout: 'column',
title: 'Scrum', // *** Variable
items:
[
Ext.widget('cardlist',
{
alias: 'widget.backlogcardlist',
title: "Backlog",
store: 'BacklogCards'
}),
Ext.widget('cardlist',
{
alias: 'widget.backlogcardlist',
title: "Backlog",
store: 'BacklogCards'
}),
Ext.widget('cardlist',
{
alias: 'widget.inprogresscardlist',
title: "In Progress",
store: "InprogressCards"
}),
Ext.widget('cardlist',
{
alias: 'widget.reviewcardlist',
title: "Review",
store: "ReviewCards"
}),
Ext.widget('cardlist',
{
alias: 'widget.donecardlist',
title: "Done",
store: "DoneCards"
})
]
});
My ideal structure for this app is as follows:
Viewport defined (inside app.js)
which contains a Fourscrum.js view (which is just a panel)
which contains 4 different List.js views (which are just grids).
Trying to accomplish this, I currently get a few errors when i start messing with the above code:
Item undefined
namespace undefined
Does anyone know why this doesn't work?
PS. I can get this example to work if I replace my 'cardlist' widgets with panels directly defined in the Fourscrum view.
PPS. This also works properly if I forego the Fourscrum container panel all together :(
EDIT:
I felt my explanation was a little unclear so I've uploaded an image to help describe the program. I'm not sure where I need to define the stores, models, and views with this nested structure. So I've repeated it in both controllers. I hope that's not what is causing the problem.
EDIT2:
Ext.define('AM.view.card.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.cardlist',
//title: 'List',
//store: 'Cards',
//multiSelect: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'ddzone',
dropGroup: 'ddzone'
}
},
// selType: 'cellmodel',
// plugins: [
// Ext.create('Ext.grid.plugin.CellEditing', {
// clicksToEdit: 1
// })
// ],
columns: [
{
header: 'ID',
dataIndex: 'external_id',
field: 'textfield',
width: 30
},
{
header: 'Name',
dataIndex: 'name',
field: 'textfield',
width: 150
},
{
header: 'Priority',
dataIndex: 'priority_id',
renderer: function (value) {
var display = '';
Ext.data.StoreManager.get("Priorities").each(function (rec) {
if (rec.get('id') === value) {
display = rec.get('short_name');
return false;
}
});
return display;
},
width: 60,
field: { xtype: 'PriorityCombo' }
},
{
header: 'Size',
dataIndex: 'size_id',
renderer: function (value) {
var display = '';
Ext.data.StoreManager.get("Sizes").each(function (rec) {
if (rec.get('id') === value) {
display = rec.get('short_name');
return false;
}
});
return display;
},
width: 60
},
{
xtype: 'actioncolumn',
width: 16,
items: [{
icon: 'Styles/Images/zoom.png', // Use a URL in the icon config
tooltip: 'Zoom In',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('name'));
}
}]
}
]
});
I think I see a big problem in your code (if you pasted all of it).
In your view definitions if you are extending Ext components you MUST have the following function that ends in the callParent method like below.
initComponent: function() {
this.items = this.buildMyItems();
this.callParent(arguments);
},
buildMyItems: function(){
//my code
}
Robodude,
According to the Class guide on Sencha.com all widgets must be contained in properly named class files. I don't think you can simultaneously define and create your widgets in the panel definition.
Split out your definitions from the panel config. Also dont forget to enable the auto loader:
Ext.Loader.setConfig({
enabled : true
});