We're currently working with the Sencha Touch Carousel, and we got following problem. We haven't seen any easy way to show more than 3 cards / images (default option). The code looks like this
var gallery = new Ext.Carousel({
cls: 'galleryimage',
xtype: 'carousel',
height: '60px',
width: '65px',
items: [{
html: '<img src="static/images/gallery/ex2.jpg" />',
cls: 'image',
},
{
html: '<img src="static/images/gallery/ex2_2.jpg" />',
cls: 'image',
},
{
html: '<img src="static/images/gallery/ex2_3.jpg" />',
cls: 'image',
},
{
html: '<img src="static/images/gallery/ex2_4.jpg" />',
cls: 'image',
},
{
html: '<img src="static/images/gallery/ex2_5.jpg" />',
cls: 'image',
}]
});
It's pretty disturbing that it isn't clearly documentated, since I think alot of people want to do that. I hope there is anyone who has got a really easy way, without having to change other .scss files.
/* EDIT */
Added this code to it:
var gallerypanel = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [gallery]
});
Here you go, a working example with 4 cards :
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [
{
title: 'Tab 1',
html: '1'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
},
{
title: 'Tab 4',
html: '4'
}]
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1]
});
}
});
Hope it helps
Related
I need the tab-panels to fit browser window size. I have used card layout, and it is not re-sizing to fit the browser window. I think i'm missing some properties in my viewPort.
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'panel',
items: { xtype: 'tabP1' }
},
{
xtype: 'panel',
items: { xtype:'tabP2' }
}
,
{
xtype: 'panel',
items: { xtype:'tabP3' }
}
]
});
},
2.) One of my tabpanels; I am using absolute layout. I am using this layout because it's easy to set form components where i ever i desire it to be. Therefore, i would like a solution that works with the same layout.
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.tabP1',
// height: 250,
// width: 726,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'My Form',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
viewConfig: {
}
}
]
});
me.callParent(arguments);
}
});
UPDATE 2
UPDATE 2
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'tabP1'
},
{
xtype:'tabP2'
}
,
{
xtype:'tabP3'
}
]
});
},
onSuccess: function() {
this.getViewport().getLayout().setActiveItem(1);
},
I get an error when i use your code, saying that this.getViewport().getLayout().setActiveItem(1) is not a function. I think this is because i used border layout. How can i resolve this ?
Your problem is "over-nesting" Why are you putting 'tabPFoo' inside a panel with no layout? They are at best, redundant, also causing the layout system to spend more cycles when it's not needed.
Ext.require('*');
Ext.onReady(function(){
var vp = new Ext.container.Viewport({
layout: 'card',
items: [{
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 1'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.nextSibling();
vp.getLayout().setActiveItem(next);
}
}
}, {
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 2'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.nextSibling();
vp.getLayout().setActiveItem(next);
}
}
}, {
xtype: 'grid',
store: {
fields: ['name'],
data: [{
name: 'Name 3'
}]
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}],
listeners: {
itemclick: function(view){
var grid = view.ownerCt,
next = grid.previousSibling().previousSibling();
vp.getLayout().setActiveItem(next);
}
}
}]
});
});
Obviously that's not MVC style, but that's the structure the layout should take.
I want to add regular Sencha button to TabPanel in Sencha Touch 2
Sencha Fiddle http://www.senchafiddle.com/#tRd76
Code:
//define the application
Ext.application({
launch: function() {
addTabPanel();
}
});
function addTabPanel(){
Ext.Viewport.add({
xtype: 'tabpanel',
tabBarPosition: 'bottom',
fullscreen: true,
tabBar:{
dockedItems:[{
xtype: 'button',
ui: 'round',
text: 'Button1',
dock: 'left',
handler: function(){
alert('Botton1 Working Now');
}
}]
},
items:[
{
title: 'All Market',
iconCls: 'home',
html: 'Home',
},
{
title: 'Favorite',
iconCls: 'favorites',
html:'Favorite',
itemTpl: '{mwRow}',
}
]
});
}
When Adding Button1 to TabPanel button is not shown.
Why Button1 is not Showing ?
Please help?
Here's a quick way to do it. I'm not sure there is another way...
Ext.application({
launch: function() {
addTabPanel();
var tp = Ext.ComponentQuery.query('tabpanel')[0];
var btn = Ext.create('Ext.Button',{
width:80,
height:30,
text:'BTN',
style:'position:absolute;top:auto;bottom:13px;left:5px;z-index:10;'
});
tp.element.insertFirst(btn.element);
}
});
function addTabPanel(){
Ext.Viewport.add({
xtype: 'tabpanel',
tabBarPosition: 'bottom',
fullscreen: true,
tabBar:{
dockedItems:[{
xtype: 'button',
ui: 'round',
text: 'Button1',
dock: 'left',
handler: function(){
alert('Botton1 Working Now');
}
}]
},
items:[
{
title: 'All Market',
iconCls: 'home',
html: 'Home',
},
{
title: 'Favorite',
iconCls: 'favorites',
html:'Favorite',
itemTpl: '{mwRow}',
}
]
});
}
Here's the fiddle : http://www.senchafiddle.com/#HvTek
Hope this helps
put code snippet into Home item, something like this,
....
items:[
{
title: 'All Market',
iconCls: 'home',
html: 'Home',
items: [
{
xtype: 'button',
ui: 'round',
text: 'Button1',
dock: 'left',
handler: function(){
alert('Botton1 Working Now');
}
}
],
},
...
I hope this helps. :)
I am using ExtJS portal code in my application
I want to make portlet in collapsed state at the time of loading the page. So I have done something like
items: [{
id: 'portlet-1',
title: 'Grid Portlet Texsds',
tools: this.getTools(),
height:200,
**collapsed:true,**
autoScroll :true,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this),
'endDrag': Ext.bind(this.onPortletDrag, this),
'resize' :Ext.bind(this.onPortletResize, this)
}
}
I have made collapsed property to true. But because of this when I am trying to expand the portlet [after page load] I can see blank Grid.Plz. refer the attached image.
What is the problem ? do I need to do refresh or something ? because when I set collapsed to false I can see the grid.
Please suggest what is missing here.
This is a code for the getTools: function(){
{
type: 'Minimize',
handler: function(e,target,panelHeader,tool){
//panelHeader.ownerCt.toggleCollapse();
if (panelHeader.ownerCt.collapsed)
{
panelHeader.ownerCt.expand();
}
else {
panelHeader.ownerCt.collapse();
}
}
}
for the first time when the portlet get load it is in collapsed state, Now when I click on cross icon not [the "^" for expand icons ] I can see the Blank grid.
Hope this time I am able to explain well.
I took the Ext JS 4 example portal app and added your code (without the asterisks) to portlet-1. It is properly collapsed on load and expands to show the grid.
I don't think there is anything wrong with the code you've posted. Perhaps you've changed the layout or layout properties of the surrounding container and that is affecting your portlet.
Here is my complete portal.js:
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
//requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
getTools: function(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
portlet.setLoading('Loading...');
Ext.defer(function() {
portlet.setLoading(false);
}, 2000);
}
}];
},
initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: 'Ext Portal'
},{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout:{
type: 'accordion',
animate: true
},
items: [{
html: content,
title:'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
},{
title:'Settings',
html: content,
border: false,
autoScroll: true,
iconCls: 'settings'
}]
},{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.getTools(),
collapsed: true,
height: 200,
autoscroll: true,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
},{
id: 'portlet-2',
title: 'Portlet 2',
tools: this.getTools(),
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.getTools(),
html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-3',
items: [{
id: 'portlet-4',
title: 'Stock Portlet',
tools: this.getTools(),
items: Ext.create('Ext.app.ChartPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
});
this.callParent(arguments);
},
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});
How can I make a carousel scroll vertically on the page?
I don't mean it's items, I mean the whole carousel.
For example, this simple code is a carousel which won't scroll:
var carousel = new Ext.Carousel({
flex: 1,
indicator: false,
dockedItems: [Toolbar],
layout: 'card',
defaults: {
scroll: 'vertical'
},
items: [
{
html: 'Card 1'
},
{
html: 'Card 2'
},
{
html: 'Card 3'
}
]
});
Thanks.
You need to add in the direction attribute:
var carousel = new Ext.Carousel({
flex: 1,
indicator: false,
dockedItems: [Toolbar],
layout: 'card',
direction: 'vertical',
defaults: {
scroll: 'vertical'
},
items: [
{
html: 'Card 1'
},
{
html: 'Card 2'
},
{
html: 'Card 3'
}
]
});
I'm trying to make a small application with sencha-touch and I have a tabpanel with the layout card. when I click on tab Producten a card slides in but what I want is that in that card comes another tabpanel so people can choose between Men and Women with also a layout card.
I tried a lot of stuff and nothing seems to work.
var rootpanel;
var panel;
Ext.setup({
onReady: function() {
var Home = {
cls: 'home',
title: "Home",
html: "Homepagina"
}
var Producten = {
title: "Producten",
html: "Productenpagina",
items: [
panel = new Ext.TabPanel({
cls: 'toolbar',
fullscreen: 'true',
ui: 'plain',
layout: 'card',
items: [Men, Women]
})
]
}
var Men = {
title: "Men",
html: "men"
}
var Women = {
title: "Women",
html: "Women"
}
var Winkelwagen = {
cls: 'winkelwagen',
title: "Winkelwagen",
html: "Winkelwagenpagina"
}
rootpanel = new Ext.TabPanel({
cls: 'toolbar',
fullscreen: true,
ui: 'plain',
layout: 'card',
items: [Home, Producten, Winkelwagen]
})
}
})
try this codes :
Ext.regApplication({
name : 'MyApp',
launch : function(){
window.localStorage.clear();
new MyApp.MainTabPanel({
fullscreen : true
});
}
});
MyApp.MainTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'center'
}
},
cls: 'card1',
html: '',
items: [
{ iconCls: 'time', title: 'Time', xtype: 'TimeTabPanel'},
{ iconCls: 'user', title: 'People', xtype: 'PeopleTabPanel' }
]
});
Ext.reg('MainTabPanel',MyApp.MainTabPanel);
MyApp.PeopleTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'top',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'left'
}
},
cls: 'card1',
items: [
{ iconCls: 'user', title: 'Man' , html: 'MAN TAB'},
{ iconCls: 'user', title: 'Woman', html: 'WOMAN TAB' }
]
});
Ext.reg('PeopleTabPanel',MyApp.PeopleTabPanel);
MyApp.TimeTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'top',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'left'
}
},
cls: 'card1',
items: [
{ iconCls: 'time', title: 'AM', html: 'AM TAB' },
{ iconCls: 'time', title: 'PM', html: 'PM TAB' }
]
});
Ext.reg('TimeTabPanel',MyApp.TimeTabPanel);