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?
Related
I'm new at sencha touch, and i'm having trouble using dataview with an ajax store.
Here follow my code:
On my app.js on the launch part:
Ext.define('SocializeApp.model.Friends', {
extend: 'Ext.data.Model',
config: {
fields: [
{name:'name' ,type:'string'},
{name:'id' ,type:'string'},
{name:'img' ,type:'string'}
]
}
});
Ext.define('SocializeApp.store.FriendStore', {
extend: 'Ext.data.Store',
config: {
model: 'SocializeApp.model.Friends',
storeId: 'FriendStore',
proxy: {
type: 'ajax',
url: 'http://socialize.localhost.com/friends.php',
reader: {
type: 'json',
rootProperty: 'friends'
},
autoLoad: 'true'
},
}
});
Ext.Viewport.add(Ext.create('SocializeApp.view.Main'));
In the Main.js
Ext.define('SocializeApp.view.Main', {
extend: 'Ext.tab.Panel',
fullscreen: true,
xtype: 'main',
requires: ['Ext.TitleBar'],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'Amigos',
iconCls: 'team',
items: [{
xtype: 'dataview',
store: 'FriendStore',
scrollable: {
direction: 'vertical'
},
tpl: ['{img} {id} {name}']
}]
}, {
title: 'time',
iconCls: 'time',
items: [{
html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
}]
}, {
title: 'Interesses',
iconCls: 'bookmarks',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
}, {
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}]
}]
}
});
I'm kind of lost, i used the store as a variable to test and in the console it gave me the correct data, but no optout for this dataview.
FYI the JSON
{"friends":[{"name":"sakai","id":"123","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"124","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"125","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"126","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"127","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"128","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"129","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"110","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"111","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"}]}
I really appreciate any help.
Thx,
Try these (code has the ideas combined).
1 - Give your dataview an itemId, and load the store in your view initialize method. Might also want to try and set autoLoad to false.
2 - Sometimes I also explicitly give the full store reference rather than just the id, for ex Ext.getStore('FriendStore')
3 - Are you using MVC? did you declare your stores /models in your app.js?
Ext.application({
name: 'yourapp',
stores: ['FriendStore'],
models: ['Friends'],
launch: function() {
...
}
});
4 - Or, just thought of this.. change your tpl to 'itemTpl'
Ext.define('SocializeApp.view.Main', {
extend: 'Ext.tab.Panel',
fullscreen: true,
xtype: 'main',
requires: ['Ext.TitleBar', 'SocializeApp.store.FriendStore'],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'Amigos',
iconCls: 'team',
items: [{
itemId: 'FriendsDataview',
xtype: 'dataview',
store: Ext.getStore('FriendStore'),
scrollable: {
direction: 'vertical'
},
itemTpl: ''.concat(
'<div>{img} {id} {name}</div>'
)
}]
}, {
title: 'time',
iconCls: 'time',
items: [{
html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
}]
}, {
title: 'Interesses',
iconCls: 'bookmarks',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
}, {
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}]
}]
},
initialize: function(){
var store = Ext.getStore('FriendStore');
var dv = Ext.ComponentQuery.query('dataview[itemId=FriendsDataview]')[0];
dv.setStore(store);
store.load(function(){
console.log(this);
});
}
});
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'
}
]
}
]
}
});
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.
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'}]