Adding carousel to panel - extjs

Question

First program logic:
I have a main panel and there is a list at the left side and another panel at the right side.
When user touches the list item some html appears in right panel. What i need to do is using carousel instead of right panel.
My view
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
xtype:'mypanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Lezzet Dunyasi',
},
{
xtype: 'list',
docked: 'left',
id: 'mylist',
ui: 'round',
pinHeaders: false,
grouped: true,
//disableSelection: true,
width: 331,
itemTpl: [
'<img src="{img_url}" width="60" heigh="60"></img><span>{label}</span>'
],
store: 'Menius',
items: [
{
xtype: 'searchfield',
docked: 'top',
placeHolder: 'Search...',
},
]
},
{
xtype: 'panel',
styleHtmlContent:true,
style: {
backgroundImage: 'url(resources/img/Landscape.png)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
},
id:'mypanel'
}
]
}
});
As you can see there is a xtype:panel and i tried to modify that code and i did it like this
xtype: 'carousel',
defaults{
styleHtmlContent:true,
id:'mypanel'},
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
Also i use a controller
Ext.define('MyApp.controller.MeniuController',{
extend:'Ext.app.Controller',
config:{
refs:{
leftMeniu:'mypanel list[id=mylist]',
myPanel:'mypanel panel[id=mypanel]'
},
control:{
leftMeniu:{
itemtap:'onItemTap'
}
}
},
onItemTap:function(list, index, item, record, e , opts)
{
var content = '<h2>' + record.get('label') +'</h2>' + record.get('html');
this.getMyPanel().setHtml( content );
}
});
And i modified this part like this
refs:{
leftMeniu:'mypanel list[id=mylist]',
myPanel:'mypanel carousel[id=mypanel]'
Although these modifications i can't run my code , what should i do ?

Answer 1

A couple of small issues that I see. You are missing a colon on defaults: And I think you want to move that id to one of your carousel elements, right? With your code, I'm only getting one page with the id defined at that level. If you move it down you will see three pages.
defaults: {
styleHtmlContent:true,
id:'mypanel' // IN WRONG PLACE?
},
[UPDATE]
I got it working so that you can write to any of your carousel panels. I just created a direct reference to each id in the refs:{} section. I'm drawing to the second page so drag it into view to see the updates.
Also, I'm adding the model, store, and app.js so that anyone reading this will have a complete working example.
Ext.define('MyApp.controller.MeniuController', {
extend:'Ext.app.Controller',
config:{
refs:{
leftMeniu:'mypanel list[id=mylist]',
// myPanel:'mypanel panel[id=mypanel]'
// myPanel:'mypanel carousel[id=mypanel]'
myFirstPanel:'#mypanel1',
mySecondPanel:'#mypanel2'
},
control:{
leftMeniu:{
itemtap:'onItemTap'
}
}
},
onItemTap:function(list, index, item, record, e, opts) {
var content = '<h2>' + record.get('label') + '</h2>' + record.get('html');
this.getMySecondPanel().setHtml(content);
this.getMyFirstPanel().setHtml(content);
}
});
Complete MyPanel View:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
xtype:'mypanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Lezzet Dunyasi'
},
{
xtype: 'list',
docked: 'left',
id: 'mylist',
ui: 'round',
pinHeaders: false,
// grouped: true,
//disableSelection: true,
width: 331,
itemTpl: [
'{label}'
],
store: 'Menius',
items: [
{
xtype: 'searchfield',
docked: 'top',
placeHolder: 'Search...'
}
]
},
// {
// xtype: 'panel',
// styleHtmlContent:true,
// style: {
// backgroundImage: 'url(../images/risk2.png)',
// backgroundRepeat: 'no-repeat',
// backgroundPosition: 'center'
// },
// id:'mypanel'
// }
{
xtype: 'carousel',
defaults: {
styleHtmlContent:true
},
items: [
{
html: 'Item 1',
style: 'background-color: #5E99CC',
id:'mypanel1'
},
{
html: 'Item 2',
style: 'background-color: #759E60',
id:'mypanel2'
},
{
html: 'Item 3'
}
]
}
]
}
});
app.js
Ext.application({
name: "MyApp",
views: ['MyPanel'],
models: ['Meniu'],
stores: ['Menius'],
controllers: ['MeniuController'],
launch: function() {
Ext.Viewport.add(Ext.create('MyApp.view.MyPanel'));
}
});
Model:
Ext.define('MyApp.model.Meniu', {
extend: 'Ext.data.Model',
config: {
fields: ['img_url', 'label', 'html']
}
});
Store:
Ext.define('MyApp.store.Menius', {
extend: 'Ext.data.TreeStore',
config: {
model: 'MyApp.model.Meniu',
defaultRootProperty: 'items',
grouper: function(record) {
return record.get('label')[0];
},
root: {
text: 'foo',
items: [
{img_url: 'foo.png', label: 'one', html:'nice', leaf: true},
{img_url: 'foo.png', label: 'two', html:'carousels', leaf: true}
]
}
}
});