Am I missing something? Generated code below image.
List works fine independantly of the tab... can you not put a list inside a tab container or is there an option i additionally need? Thanks Greg
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
items: [
{
xtype: 'container',
title: 'Home',
iconCls: 'info',
html: 'Welcome',
itemId: 'home'
},
{
xtype: 'container',
title: 'About',
iconCls: 'info',
html: 'Awsome',
itemId: 'about'
},
{
xtype: 'container',
title: 'Stylists',
iconCls: 'info',
html: '',
itemId: 'contact',
scrollable: true,
items: [
{
xtype: 'list',
docked: 'top',
styleHtmlContent: true,
itemTpl: [
'<div>{fname} {lname} {title}</div>'
],
store: 'LSstylistStore'
}
]
}
],
tabBar: {
docked: 'bottom'
}
}
});
Needed to Add Layout: Type: Fit, which made the list display inside the tab container. In Architect select the tab containing the list and in Ext.Container layout option select "fit"
xtype: 'container',
title: 'Stylists',
iconCls: 'info',
html: '',
itemId: 'Stylists',
layout: {
type: 'fit'
},
scrollable: true,
Related
Below is my view. how can I make my menu scroll separate and my view scroll separate
Ext.define('HaBoMobile.view.AboutView', {
extend: 'Ext.Container',
xtype: 'aboutViewType',
html: 'Learn more about me',
styleHtmlContent: true,
scrollable : {
direction : 'vertical',
directionLock : true
},
overflowY: 'auto',
autoScroll: true,
config: {
fullscreen: true,
items: [{
docked: 'top',
xtype: 'titlebar',
items: [{
text: 'Menu',
action: 'nav',
iconCls: 'list'
}]
}]
}
});
I tried all these settings, none worked
scrollable : {
direction : 'vertical',
directionLock : true
},
overflowY: 'auto',
autoScroll: true,
here is a Sencha fiddle
Just try with scrollable: true, like this:-
var menu = Ext.create('Ext.Menu', {
scrollable: true, // add this property
width: 200, // Need to set a width
items: [{
text: 'Close',
ui: 'decline'
}, {
text: 'Home',
action: 'nav_option',
iconCls: 'home'
}, {
text: 'Settings',
action: 'nav_option',
iconCls: 'settings'
}]
});
Containers:-
Ext.define('Fiddle.view.Main', {
extend: 'Ext.Container',
xtype: 'mainview',
config: {
scrollable: true,
html: 'Main page',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Main',
items: [{
text: 'Nav',
action: 'nav'
}]
}]
}
});
I have a problem to integrate map in this view:
Ext.define('Sample.view.MainMenu', {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar','Ext.Video'],
alias: 'widget.mainmenuview',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to sencha' ,items: [
{
xtype: 'button',
text: 'Log Off',
itemId: 'logOffButton',
align: 'right'
}
]
},
html: [
"Hello to dawini plateforme"
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
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'
}
]
}
], listeners: [{
delegate: '#logOffButton',
event: 'tap',
fn: 'onLogOffButtonTap'
}]
},onLogOffButtonTap: function () {
this.fireEvent('onSignOffCommand');
}
});
Can someone help me how to integrate map in this view and think you very much.
I am a developer with SIMpalm (www.simpalm.com), and I think you should try map type in your Sencha component within the Items. Others attribute also can be configured like height, current location etc. And also you need to configure google map api in your Index.html page like, .
Example : items: [
{
xtype: 'map',
height: 200,
useCurrentLocation: true
}
]
Here you can find how to include map in Sencha Touch. Though it is focused on infobubble but it is also showing the map integration. Let me know if you have any difficulty implementing this.
i am trying to give space between the components here is the screen shot , i want to give vertical space between lables , TextFields and button but i dont find a way to do it
here is my code
Ext.define('test.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Label'
],
config: {
items: [
{
docked: 'top',
title: 'Test',
ui: 'dark',
xtype: 'titlebar'
},
{
xtype:'panel',
style:'padding:10%',
items:[ {
xtype: 'label',
html: 'User Name/Mobile Number',
},
{
xtype: 'textfield',
},{
xtype: 'label',
html: 'Password'
},{
xtype: 'textfield',
},{
xtype:'button',
text:'Login'
}]
}
]
}
});
Use the margin property to get the space between fields:
{
xtype:'panel',
defaults: {
margin: '20 0'
},
items: [
{
xtype: 'label',
html: 'User Name/Mobile Number'
},
....
I want to create a custom toolbar using sencha touch. Using Ext.Toolbar, i am able to create a decent screen titlebar. But my requirement is to place my company brand image logo in the center of the title bar not the simple text as provided by the code below.
{
xtype : 'toolbar',
docked: 'top',
title: 'My Toolbar'
}
can anyone help me how to do this ?
Try this
{
xtype: 'toolbar',
docked: 'top',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{
xtype: 'image',
width:218,
height:44,
src:'http://cdn.sstatic.net/careers/gethired/img/careers2-ad-header-so-crop.png'
}
]
}
You can add the image in your toolbar by using the title attribute. Here is some modified code from one of my apps doing just this. Also, by defining a custom class you can assign a custom xtype and reuse the main toolbar... Either way the code should have what you are looking for:
Ext.define('myApp.view.Maintoolbar', {
extend: 'Ext.Toolbar',
xtype: 'maintoolbar',
requires: [
//any necessary requirements
],
config: {
docked: 'top',
title: '<div style="text-align:center;"><img src="images/logoSmall.png" width="185" height="36" alt="Company Name"></div>',
padding: '5 5 5 5',
items: [{
iconCls: 'arrow_down',
iconMask: true,
ui: 'normal',
//left: true,
text: 'Menu',
action: 'openmenu'
},{
xtype: 'spacer'
},{
xtype: 'button',
iconCls: 'arrow_down',
iconMask: true,
ui: 'normal',
align: 'right',
text: 'Logout',
action: 'logout'
}]
},
initialize: function() {
this.callParent();
}
});
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',