1
第一個程序邏輯:向面板添加旋轉木馬
我有一個主面板,左側有一個列表,另一個面板在右側。
當用戶觸摸列表項時,一些html出現在右側面板中。我需要做的是使用輪播而不是右側面板。
我的觀點
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'
}
]
}
});
正如你可以看到有一個的xtype:面板和我試圖修改代碼,我做了這樣的
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'
}
]
此外,我使用控制器
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);
}
});
而且我修改這部分這樣
refs:{
leftMeniu:'mypanel list[id=mylist]',
myPanel:'mypanel carousel[id=mypanel]'
雖然這些修改我不能運行我的代碼,我應該怎麼辦?
我應該添加旋轉木馬部分而不是面板在我看來,我理解你了嗎? 另外我修改了我的代碼根據你的迴應,但我沒有在我的瀏覽器中,所以我把senchafiddle,請你檢查一下,說我的錯是什麼? http://www.senchafiddle.com/#9abi9 THX爲您concerne。 – 2012-04-24 15:59:34
您可以放入我的{carousel}以替換您的面板。你是否也切換到旋轉木馬的第2頁?你看到3個頁面點?我正在寫它:this.getMySecondPanel()。setHtml(content); ...我只是更新了我的代碼以包含完整的MyPanel視圖。 – 2012-04-24 16:52:46
將我的控制器更改爲寫入傳送帶中的兩個面板,以便運行代碼的任何人都能看到明顯的情況。 – 2012-04-24 17:02:14