I want to 2 forms, & I want to use card layout, so that when the user submits form1, he is taken to form2. But, when I try to MyApp.container.setActiveItem(2) (using console), it does not move to form2(card2).
Ext.define('MyApp.view.Forms', {
extend: 'Ext.Container',
xtype: 'formsPage',
id: 'formsForm',
config: {
title: 'Patient Registration',
iconCls: 'user',
layout:{
type: 'card'
},
items: [
{
xtype: 'fieldset',
title: 'Patient Registration1',
items: [
{
xtype: 'textfield',
label: 'Names',
name: 'name'
},
{
xtype: 'textfield',
label: 'City',
name: 'city'
}
]
},
{
xtype: 'fieldset',
title: 'Patient Registration1',
items: [
{
xtype: 'textfield',
label: 'Phone',
name: 'phone'
},
{
xtype: 'textfield',
label: 'Country',
name: 'conutry'
}
]
}
],
constructor:function(config) {
this.initConfig(config);
return this;
}
}
});
MyApp.container = Ext.create('MyApp.view.Forms', {});
Please note that array items in Sencha Touch 2 are indexed from 0, so if you want to activate second one, it should be something like this:
MyApp.container.setActiveItem(1)
Edited: I've figured it out. You should add another config to your view: fullscreen:true and it should work well :)
Is your form xtype of 'formsPage' custom, I can't seem to find it in the doco? If it's not, that might be contributing to the issue.
The doco also suggests that you don't create the card layout directly, but instead use carousel or tab panel. Maybe use a carousel as your base component, then make each card a separate form? This would make your intentions clear that each card/form is to be independent.
Hope that helps
do the following:
extend the carousel
extend: 'Ext.Carousel',
change the config section to:
config: {
title: 'Patient Registration',
iconCls: 'user',
cls: 'card'
----
guess that should fix it
Related
I want to select row by simulating mouse click or firingEvent mouse click from Chrome console, unfortunately, all previous attempts were unsuccesfully and don't work.
document.getElementById('#....').click() and etc..
Afterwards, I found that I need to rewrite/use fire event handling from ext-all.js (4.0.2a), but didn't figure it out how to implement this explicitly in my case.
Could you please assist?
Thank you in advance.
Illustration of the desired state
You use grid.getSelectionModel() and inside of Ext.selection.Model have method select();
In this FIDDLE, I have created a demo using your code. I hope this will help/guide you.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Grid manually selection',
store: 'gridStore',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
renderTo: Ext.getBody(),
bbar: [{
text: 'Assign',
itemId: 'assignBtn',
disabled: true// See initially button is disabled I have enable when record has been selected.
}],
listeners: {
afterrender: function () {
this.getSelectionModel().select(this.getStore().getAt(0));
},
select: function (grid, rec, index) {
this.down('#assignBtn').setDisabled(false);
}
}
});
}
});
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
In another question here on Stack Overflow (this one) I have seen this piece of code:
Ext.define("App.view.leaders.MyViewName", {
extend: 'App.view.basePopup',
xtype: 'MyViewName',
config: <Ext.form.IPanel>{
scrollable: 'vertical',
items: [
{
xtype: 'fieldset',
title: 'Add New Auto Asset',
instructions: '<hr class="separate" />',
items: [
<Ext.field.ISelect>{
xtype: 'selectfield',
label: 'Borrower Position',
store: 'BorrowerPositionSelectorStore',
},
<Ext.field.ISelect>{
xtype: 'selectfield',
label: 'Asset Type',
store: 'AssetTypeSelectorStore',
},
{
xtype: 'textfield',
name: '',
label: 'Description'
},
{
xtype: 'numberfield',
name: '',
label: 'Value'
}
]
}
]
}
});
What is the purpose of the <Ext.form.IPanel>, <Ext.form.ISelect> tags before the components definitions? Can you point me to any documentation on that?
It's a TypeScript construct for generics, see: http://www.typescriptlang.org/Handbook
To indicate the type of the object literal, they use:
var square = <Square>{};
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'.
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.