This My Code, but only the tree panel is displayed(please help me):
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name']
});
var tree = Ext.create('Ext.tree.Panel', {
height: 300,
renderTo: Ext.getBody(),
width: 300, region: 'east',
columns: [
{dataIndex: 'name', flex: 1, header: 'Tree Panel', xtype: 'treecolumn'}
],
store: {
model: 'User',
root: {
name: 'Rumah',
children: [
{name: 'Gavin Renaldi', children: [{name: 'Benar Sekali', age: 2, children: []}]},
{name: 'Gavin Ripharbowo', children: []}
]
}
},
viewConfig: {
plugins: {
ddGroup: 'user-dd',
ptype: 'treeviewdragdrop'
}
}
});
Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: 'Page Title',
autoHeight: true,
border: false, width:100, height:100,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: false,
html: '<h1 class="x-panel-header">Page Title</h1>',
title: 'Navigation',
width: 150, height:100, items:'tree'
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: [{
title: 'First Tab',
html: 'For A While',
},{ title: 'Second Tab', html : 'The Second Tab Content' }]
}] }) })
This is why:
renderTo: Ext.getBody(),
Just get rid of this line in the tree definition, and add it normally to the viewport. For example:
{
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: tree
}
(You might have to add the renderTo to the viewport definition)
by this, i can insert treepanel to viewport
<html>
<head>
<title> <Getting Started Example </title>
<link rel ="stylesheet" type="text/css"
href="resources/css/ext-all.css" />
<script src="extjs/adapter/ext/ext-base.js"> </script>
<script src="ext-all-debug.js"> </script>
<script src="/src/tree/Panel.js"> </script>
<script src="/src/windows/Window.js"> </script>
<script src="/src/panel/Panel.js"> </script>
<script type="text/javascript" src="reorder.js"></script>
<script>
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name']
});
var tpanel = new Ext.create('Ext.tree.Panel', {
height: 100,
renderTo: Ext.getBody(),
width: 200,
region: 'west',
columns: [
{dataIndex: 'name', flex: 1, header: 'Tree Panel', xtype: 'treecolumn'}
],
store: {
model: 'User',
root: {
name: 'Rumah',
children: [
{name: 'Gavin Renaldi', children: [{name: 'Benar Sekali', age: 2, children: []}]},
{name: 'Gavin Ripharbowo', children: []}
]
}
},
viewConfig: {
plugins: {
ddGroup: 'user-dd',
ptype: 'treeviewdragdrop'
}
}
});
Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
width:100,
height:100,
margins: '0 0 5 0'
}, tpanel, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: [{
title: 'First Tab',
html: 'The first tab\'s content. Others may be added dynamically',
},{
title: 'Second Tab',
html : 'Tab berfungsi untuk sdfkjdf'
}]
}]
});
})
</script>
</head>
<body>
</body>
Related
I got the below reference of CustomHTML App for Rally and added into my custom report page in my project workspace. UI Worked, but somehow whatever simple query I give in, there is no result shown. Please review and correct me if I am doing any wrong.
Find fixed defects within certain dates
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
layout: {
type: 'vbox',
align: 'stretch'
},
items:[
{
xtype: 'panel',
layout: 'anchor',
border: true,
fieldDefaults: {
labelWidth: 40
},
defaultType: 'textfield',
bodyPadding: 5,
items: [
{
fieldLabel: 'Query',
itemId: 'queryField',
anchor:'100%',
width: 700,
height: 100,
xtype: 'textarea',
value: '{\n'+
' "_TypeHierarchy": "Defect",\n'+
'"__At": "2016-10-14T00:00:00Z"'+
'}'
},
{
fieldLabel: 'Fields',
itemId: 'fieldsField',
anchor: '100%',
width: 700,
value: "ObjectID, _ValidFrom, Name, State, Resolution"
},
{
fieldLabel: 'Sort',
itemId: 'sortField',
anchor: '100%',
width: 700,
value: "{'ObjectID' : -1, '_ValidFrom': 1}"
},
{
fieldLabel: 'Page Size',
itemId: 'pageSizeField',
anchor: '100%',
width: 700,
value: '10'
},
{
fieldLabel: 'Hydrate',
itemId: 'hydrate',
anchor: '100%',
width: 700,
value: "State, Resolution"
},
],
buttons: [
{
xtype: 'rallybutton',
text: 'Search',
itemId: 'searchButton'
}
]
},
{
xtype: 'panel',
itemId: 'gridHolder',
layout: 'fit',
height: 400
}
],
launch: function() {
var button = this.down('#searchButton');
button.on('click', this.searchClicked, this);
},
searchClicked: function(){
var queryField = this.down('#queryField');
var query = queryField.getValue();
var selectedFields = this.down('#fieldsField').getValue();
if(selectedFields){
if(selectedFields === 'true'){
selectedFields = true;
}
else{
selectedFields = selectedFields.split(', ');
}
}
var sort = this.down('#sortField').getValue();
var pageSize = this.down('#pageSizeField').getValue();
var parsedPageSize = parseInt(pageSize, 10);
// don't allow empty or 0 pagesize
pageSize = (parsedPageSize) ? parsedPageSize : 10;
var callback = Ext.bind(this.processSnapshots, this);
this.doSearch(query, selectedFields, sort, pageSize, callback);
},
createSortMap: function(csvFields){
var fields = csvFields.split(', ');
var sortMap = {};
for(var field in fields){
if(fields.hasOwnProperty(field)){
sortMap[field] = 1;
}
}
return sortMap;
},
doSearch: function(query, fields, sort, pageSize, callback){
var transformStore = Ext.create('Rally.data.lookback.SnapshotStore', {
context: {
workspace: this.context.getWorkspace(),
project: this.context.getProject()
},
fetch: fields,
find: query,
autoLoad: true,
hydrate: ["State","Resolution"],
listeners: {
scope: this,
load: this.processSnapshots
}
});
},
processSnapshots: function(store, records){
var snapshotGrid = Ext.create('Rally.ui.grid.Grid', {
title: 'Snapshots',
store: store,
columnCfgs: [
{
text: 'ObjectID',
dataIndex: 'ObjectID'
},
{
text: 'Name',
dataIndex: 'Name'
},
{
text: 'Project',
dataIndex: 'Project'
},
{
text: '_ValidFrom',
dataIndex: '_ValidFrom'
},
{
text: '_ValidTo',
dataIndex: '_ValidTo'
},
{
text: 'State',
dataIndex: 'State'
},
{
text: 'Resolution',
dataIndex: 'Resolution'
},
],
height: 400
});
var gridHolder = this.down('#gridHolder');
}
gridHolder.removeAll(true);
gridHolder.add(snapshotGrid);
});
Rally.launchApp('CustomApp', {
name: 'lbapi'
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>
There were a couple syntax errors in the posted code above. It was also written using a super old version of the sdk. I updated to the latest 2.1 and it seems to work pretty well now. More than likely most of the issues with the old app was the Lookback API request timing out. The new SDK has a longer default timeout.
<!DOCTYPE html>
<html>
<head>
<title>Lookback API Query</title>
<script type="text/javascript" src="/apps/2.1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
layout: 'anchor',
border: true,
fieldDefaults: {
labelWidth: 40
},
defaultType: 'textfield',
bodyPadding: 5,
items: [{
fieldLabel: 'Query',
itemId: 'queryField',
anchor: '100%',
width: 700,
height: 100,
xtype: 'textarea',
value: '{\n' +
' "_TypeHierarchy": "Defect",\n' +
'"__At": "2016-10-14T00:00:00Z"\n' +
'}'
}, {
fieldLabel: 'Fields',
itemId: 'fieldsField',
anchor: '100%',
width: 700,
value: "ObjectID, _ValidFrom, Name, State, Resolution"
}, {
fieldLabel: 'Sort',
itemId: 'sortField',
anchor: '100%',
width: 700,
value: "{'ObjectID' : -1, '_ValidFrom': 1}"
}, {
fieldLabel: 'Page Size',
itemId: 'pageSizeField',
anchor: '100%',
width: 700,
value: '10'
}, {
fieldLabel: 'Hydrate',
itemId: 'hydrate',
anchor: '100%',
width: 700,
value: "State, Resolution"
}, ],
buttons: [{
xtype: 'rallybutton',
text: 'Search',
itemId: 'searchButton'
}]
}, {
xtype: 'panel',
itemId: 'gridHolder',
layout: 'fit',
height: 400
}],
launch: function() {
var button = this.down('#searchButton');
button.on('click', this.searchClicked, this);
},
searchClicked: function() {
var queryField = this.down('#queryField');
var query = queryField.getValue();
var selectedFields = this.down('#fieldsField').getValue();
if (selectedFields) {
if (selectedFields === 'true') {
selectedFields = true;
} else {
selectedFields = selectedFields.split(', ');
}
}
var sort = this.down('#sortField').getValue();
var pageSize = this.down('#pageSizeField').getValue();
var parsedPageSize = parseInt(pageSize, 10);
// don't allow empty or 0 pagesize
pageSize = (parsedPageSize) ? parsedPageSize : 10;
var callback = Ext.bind(this.processSnapshots, this);
this.doSearch(query, selectedFields, sort, pageSize, callback);
},
createSortMap: function(csvFields) {
var fields = csvFields.split(', ');
var sortMap = {};
for (var field in fields) {
if (fields.hasOwnProperty(field)) {
sortMap[field] = 1;
}
}
return sortMap;
},
doSearch: function(query, fields, sort, pageSize, callback) {
var transformStore = Ext.create('Rally.data.lookback.SnapshotStore', {
context: {
workspace: this.context.getWorkspace(),
project: this.context.getProject()
},
fetch: fields,
pageSize: pageSize,
find: query,
autoLoad: true,
hydrate: ["State", "Resolution"],
listeners: {
scope: this,
load: this.processSnapshots
}
});
},
processSnapshots: function(store, records) {
var snapshotGrid = Ext.create('Rally.ui.grid.Grid', {
title: 'Snapshots',
store: store,
columnCfgs: [{
text: 'ObjectID',
dataIndex: 'ObjectID'
}, {
text: 'Name',
dataIndex: 'Name'
}, {
text: 'Project',
dataIndex: 'Project'
}, {
text: '_ValidFrom',
dataIndex: '_ValidFrom'
}, {
text: '_ValidTo',
dataIndex: '_ValidTo'
}, {
text: 'State',
dataIndex: 'State'
}, {
text: 'Resolution',
dataIndex: 'Resolution'
}, ],
height: 400
});
var gridHolder = this.down('#gridHolder');
gridHolder.removeAll(true);
gridHolder.add(snapshotGrid);
}
});
Rally.launchApp('CustomApp', {
name: 'lbapi'
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>
Rally Lookback API:
I need to query using the Rally Lookback API in a custom HTML App inside Rally.
I dont know how to call the Lookback API, in the overall HTML.
Could anyone please send me a sample App HTML ?
Lookback API works with App SDK 2.
Rally App SDK 2.0 RC1 documentation on Lookback API and a link to Lookback API manual are available here:
This app builds a grid of defects fixed between certain dates. You may directly modify the default query after you deploy the app in Rally.
<!DOCTYPE html>
<html>
<head>
<title>Find fixed defects within certain dates</title>
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
layout: {
type: 'vbox',
align: 'stretch'
},
items:[
{
xtype: 'panel',
layout: 'anchor',
border: true,
fieldDefaults: {
labelWidth: 40
},
defaultType: 'textfield',
bodyPadding: 5,
items: [
{
fieldLabel: 'Query',
itemId: 'queryField',
anchor:'100%',
width: 700,
height: 100,
xtype: 'textarea',
value: '{\n'+
' "State":"Fixed",\n'+
'"_PreviousValues.State":{$gte:"Submitted"},\n'+
'"_ValidFrom":{$gte:"2013-06-01TZ",$lt:"2013-07-01TZ"}\n'+
'}'
},
{
fieldLabel: 'Fields',
itemId: 'fieldsField',
anchor: '100%',
width: 700,
value: "ObjectID, _ValidFrom, Name, State, Resolution"
},
{
fieldLabel: 'Sort',
itemId: 'sortField',
anchor: '100%',
width: 700,
value: "{'ObjectID' : -1, '_ValidFrom': 1}"
},
{
fieldLabel: 'Page Size',
itemId: 'pageSizeField',
anchor: '100%',
width: 700,
value: '10'
},
{
fieldLabel: 'Hydrate',
itemId: 'hydrate',
anchor: '100%',
width: 700,
value: "State, Resolution"
},
],
buttons: [
{
xtype: 'rallybutton',
text: 'Search',
itemId: 'searchButton'
}
]
},
{
xtype: 'panel',
itemId: 'gridHolder',
layout: 'fit',
height: 400
}
],
launch: function() {
var button = this.down('#searchButton');
button.on('click', this.searchClicked, this);
},
searchClicked: function(){
var queryField = this.down('#queryField');
var query = queryField.getValue();
var selectedFields = this.down('#fieldsField').getValue();
if(selectedFields){
if(selectedFields === 'true'){
selectedFields = true;
}
else{
selectedFields = selectedFields.split(', ');
}
}
var sort = this.down('#sortField').getValue();
var pageSize = this.down('#pageSizeField').getValue();
var parsedPageSize = parseInt(pageSize, 10);
// don't allow empty or 0 pagesize
pageSize = (parsedPageSize) ? parsedPageSize : 10;
var callback = Ext.bind(this.processSnapshots, this);
this.doSearch(query, selectedFields, sort, pageSize, callback);
},
createSortMap: function(csvFields){
var fields = csvFields.split(', ');
var sortMap = {};
for(var field in fields){
if(fields.hasOwnProperty(field)){
sortMap[field] = 1;
}
}
return sortMap;
},
doSearch: function(query, fields, sort, pageSize, callback){
var transformStore = Ext.create('Rally.data.lookback.SnapshotStore', {
context: {
workspace: this.context.getWorkspace(),
project: this.context.getProject()
},
fetch: fields,
find: query,
autoLoad: true,
hydrate: ["State","Resolution"],
listeners: {
scope: this,
load: this.processSnapshots
}
});
},
processSnapshots: function(store, records){
var snapshotGrid = Ext.create('Rally.ui.grid.Grid', {
title: 'Snapshots',
store: store,
columnCfgs: [
{
text: 'ObjectID',
dataIndex: 'ObjectID'
},
{
text: 'Name',
dataIndex: 'Name'
},
{
text: 'Project',
dataIndex: 'Project'
},
{
text: '_ValidFrom',
dataIndex: '_ValidFrom'
},
{
text: '_ValidTo',
dataIndex: '_ValidTo'
},
{
text: 'State',
dataIndex: 'State'
},
{
text: 'Resolution',
dataIndex: 'Resolution'
},
],
height: 400
});
var gridHolder = this.down('#gridHolder');
gridHolder.removeAll(true);
gridHolder.add(snapshotGrid);
}
});
Rally.launchApp('CustomApp', {
name: 'lbapi'
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>
I want to add panel to one of tabs of tabPanel, I use border layout for panel but when i add panel to tab it can't fill it's parent body.
panel code:
var viewport = Ext.create('Ext.panel.Panel', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true,
anchor:'100%'
},
id:'viewPort',
width:600,
height:600,
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
layout:{
type:'vbox',
align:'stretch'
},
items: [show,treePanel,propGrid]
},tabs]
});
tab code that is parent of panel and when user click on it panel loaded to it dynamically:
var mainTabs = Ext.create('Ext.tab.Panel', {
layout: 'anchor',
id:'mtabs',
defaults: {
split: true,
anchor: '100%'
},
items: [{
title: 'Layout Window',
closeAction: 'hide',
layout: {
type: 'border',
padding: 5
},
//anchor: '100%',
width:600,
height:600,
listeners: {
activate:function (tab) {
}
},
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
layout:'vbox',
items: [historyTreePanel,propGrid]
},tabs]
},{
title: 'History',
//xtype:'panel',
width:2000,
height:1024,
html: 'Please Wait...',
id:'history-tab',
layout:'fit',
layout: 'hbox',
default: {
anchor:'100%'
},
//iconCls: 'favorites',
//cls: 'card1',
listeners: {
activate:function (tab) {
if(!flag){
flag = true;
$.getScript("/FleetManagement/js/history/fleethistory.js", function(data, textStatus, jqxhr) {
Ext.getCmp('history-tab').add(viewport);
});
}
}
}
}],
renderTo : Ext.getBody()
});
});
in the above code tab with id:'history-tab' is my mentioned tab.How can i fix this problem?
It seems your code missing some of the components. Your tab should have correct layout. Sample code. jsfiddle example here . Hope this helps
Ext.onReady(function() { var resultsPanel = Ext.create('Ext.Panel',{
frame:false,
border:false,
collapsible:false,
title:'tab main',
layout:'border',
items:[{
region: 'center',
id:'centerPanel',
title:'center',
xtype:'panel',
layout:'fit',
border: true,
items:[{id:'grid',xtype:'panel'}]
},
{
region: 'west',
id:'westPanel',
title:'facets',
xtype:'panel',
width:'15%',
collapseMode: 'mini',
collapsible:true,
autoScroll: true,
border: false,
baseCls:'x-plain',
split: true ,
items:[{id:'facet',xtype:'panel'}]
}
]
}); var subtab = { xtype:'tabpanel',
title:'moretabs',
activeTab: 0,//tabActive,
closable:true,
border:false,
id:'idd',
items: [{border:false,layout: 'fit',cls: 'inner-tab-custom', autoShow:true, id:'sub1-',title: 'nested1',items:[resultsPanel]}] };
var tabPanel = Ext.create('Ext.tab.Panel', {
layout:'fit',
height:200,
msgDisplay: 'block',
//deferredRender:false,
border:false,
items: [subtab]
}).render(Ext.getBody());
});
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();
}
}
});
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