When I try to pass value of FormPanel to controller, I get error message.
"Object #< HTMLFormElement> has no method 'getValues' "
Ext.define('MyApp.view.LoginPage', {
extend: 'Ext.form.FormPanel',
id: 'loginPanel',
standardSubmit: true,
config: {
fullscreen: true,
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Kullanıcı Adı'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Şifre'
}
How can i access loginPanel.getValues() in controller object?
When I use Ext.getCmp('loginPanel').getValues(), the problem solved.
Related
I have created a view
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'
}
]
}
]
}
});
and an instance of that view in a controller like:
var newObject = Ext.create("App.view.leaders.MyViewName");
and add it to another view dynamically like this:
var newAdd = this.getLeadDetail1003()
.down('leadDetail1003AssetsLiab')
.down('fieldset[itemId=AddCashAsset]');
newAdd.add(newObject);
but it is not added to the form! Can anyone please tell me what am I doing wrong or what I need to do now?
In my SenchaTouch 2.3.1 app I have build a login panel for the user. It looks like this:
Ext.define('MyApp.view.LoginPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.loginPanel',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.Button'
],
config: {
layout: 'vbox',
items: [
{
xtype: 'fieldset',
title: 'Business Login',
itemId: 'login',
items: [
{
xtype: 'emailfield',
itemId: 'email',
label: 'E-Mail',
name: 'email',
required: true
},
{
xtype: 'passwordfield',
itemId: 'password',
label: 'Passwort',
name: 'password',
required: true
}
]
},
{
xtype: 'button',
itemId: 'loginButton',
cls: 'button-blue',
text: 'Login'
},
{
xtype: 'panel',
itemId: 'loggedInPanel',
cls: 'logged-in-panel',
tpl: [
'Sie sind eingeloggt als {firstname} {lastname} (ID: {agentId})'
],
hidden: true,
margin: '10 0'
}
]
}
});
In my controller, I want to use a reference to this panel like this:
config: {
refs: {
loginPanel: 'loginPanel',
navigationView: '#morenavigation',
loggedInPanel: '#loggedInPanel',
loginButton: '#loginButton'
}
}
In the launch function of the controller, I want to check if the user already logged in to show his id and show a logout button. But when I try to get the panel ref, it's undefined. But why?
launch: function() {
var me = this,
sessionInfo = Ext.getStore('SessionInfo');
console.log(me.getLoginPanel()); <-- undefined
if (null !== sessionInfo.getAt(0).get('sessionId')) {
me.successfullLogin(sessionInfo.getAt(0).get('sessionId'));
}
}
Is anything actually creating an instance of your view?
Inside your application's launch method, you'll probably have to create an instance of it, and then either give your view the fullscreen: true config, or add it to the viewport. The examples on the Sencha Touch API docs for Ext.app.Application have the main view being created from the application's launch function.
The correct way of using the ref in my example would be:
refs: {
loginPanel: {
autoCreate: true,
forceCreate: true,
xtype: 'loginPanel'
}
}
I am new to sencha touch and I am having trouble loading a form into a view.
In my app.js I am loading the main view as such
Ext.Viewport.add(Ext.create('app.view.Main'));
My full app.js is as follows
Ext.application({
name: 'app',
requires: [
'Ext.MessageBox',
'Ext.form.FieldSet',
],
views: ['Main'],
launch: function() {
// Initialize the main view
Ext.Viewport.add(Ext.create('PlanPouch.view.Main'));
},
});
My main view is:
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
form
]
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
I took the form from the official documentation and the form doesn't load for some reason. So how can I add the form to my main view?
First let it solve by your approach. Make the following changes & it should work in your system (Running on mine):-
1.) In app.js
Ext.Viewport.add(Ext.create('app.view.Main'));
2). In Main.js
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
{
xtype: form
}
]
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
But i will not prefer to call the formpanel in the way you are doing. Rather you can follow ARolek answer OR follow this approach :-
1) app.js
Ext.application({
name: "app",
views: ["Main","second"],
launch: function () {
Ext.Viewport.add(Ext.create('app.view.Main'));
}
});
2) Main.js
Ext.define("app.view.Main", {
extend: "Ext.Container",
requires:["app.view.second"],
config:{
fullscreen: true,
layout:
{
type: 'fit'
},
items:[
{
xtype: "form"
}
]
}
});
3) second.js
Ext.define("app.view.second", {
extend: "Ext.form.Panel",
requires:['Ext.form.FieldSet','Ext.Toolbar'],
alias: "widget.form",
config:
{
items:
[
{
xtype: 'fieldset',
title: 'About You',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
}
]
}
});
If you want the form to always be in app.view.Main, then simply do:
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
{
xtype:'formpanel',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
}
]
}
});
I am new to extjs 4.0 and trying to make a hbox layout containing a list and a form,but the form is not displaying properly, only labels are visible but textfield is not visible,please rectify the code
Ext.define("Screener.view.PharmacyView", {
extend: 'Ext.Container',
requires : [ 'Screener.view.Pharmacyform' ],
xtype: 'pharmacylist',
config: {
fullscreen: true,
layout: 'hbox',
title: 'Patient Assignments',
items: [
//our patient list is built on the Patients store, and has a title and sort button
{
xtype: 'list',
id: 'patientList',
itemTpl: '{lastname}, {firstname}',
store: Ext.create('Screener.store.Patients',{
storeId: 'patientStore'
}),
items:[{
xtype: 'titlebar',
docked: 'top',
title: 'Patients',
items:[{
xtype: 'button',
text: 'Sort',
id: 'sortButton',
align: 'left'
}]
}],
flex:1,
},
{xtype : 'pharmacyform',
flex:2
}
]
}
});
and the form is as follows
Ext.define("Screener.view.Pharmacyform", {
xtype:'pharmacyform', extend: 'Ext.form.Panel', config:{ items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name', placeholder: 'nametext'
},
]} });
You need to use the alias config to declare your own xtypes I believe, try this
Ext.define("Screener.view.Pharmacyform", {
extend: 'Ext.form.Panel',
alias:'widget.pharmacyform',
I have taken the form example from Sencha Touch API
var form = new Ext.form.FormPanel({
items: [
{
xtype: 'textfield',
name : 'first',
label: 'First name'
},
{
xtype: 'textfield',
name : 'last',
label: 'Last name'
},
{
xtype: 'numberfield',
name : 'age',
label: 'Age'
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website'
}
]
});
and I have created a timeline object using
timeline = new Ext.Component({
title: 'Loan Details',
cls: 'timeline',
scroll: 'vertical',
tpl: ['<div></div>']
});
and then added the timeline to the panel as:
panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'light',
items: [timeline]
});
How can I add the form object to the timeline? Like how I can show that on it? Where I should add it?
Thanks for the response in advance.
I'm not sure what you are trying to do. Are you trying to have some kind of continuous carousel where you will put the FormPanel?
If so you should extend the Ext.Panel to make that timeline object and then as item use the xtype:'fieldset' and have the form items there.
For example:
App.views.Timeline = Ext.extend(Ext.Panel, {
initComponent: function() {
Ext.apply(this, {
title: 'Loan Details',
cls: 'timeline',
scroll: 'vertical',
items:[
{
xtype: 'fieldset',
defaults: {
labelAlign: 'left',
labelWidth: 'auto',
}
items: [
{
xtype: 'textfield',
name : 'first',
label: 'First name'
},
{
xtype: 'textfield',
name : 'last',
label: 'Last name'
},
{
xtype: 'numberfield',
name : 'age',
label: 'Age'
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website'
}
]
}
]
});
}});
the Ext.Component is for showing data through the data property. The data is display according to the template you provide i.e. the tpl property but you need to specify the property of the objects you want to show. For example tpl:<div>{text}</div> and data:[{text:'Example'}]