0
항목을 추가 할 때 아코디언 레이아웃에 항목을 동적으로 추가하고 싶습니다. 축소 버튼이 작동하지 않습니다.Extjs 5.0, accordian에 항목을 동적으로 추가하십시오.
동적으로 항목을 직접 추가하면 올바르게 작동합니다. 만약 당신이 어떻게 간단한 예제를하시기 바랍니다, 나는 당신의 도움을 주셔서 감사합니다. 은 아래에있는 내 코드입니다 :
내가 조금 귀하의 코드를 단순화했습니다의 좀 더 구체적인 문제에 대한 것을, 그것을 단순화 난 더 이상 문제를 복제 할 수 아니에요<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="framework/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css">
<script type="text/javascript" src="framework/build/ext-all.js"></script>
<script type="text/javascript" src="framework/build/packages/ext-theme-gray/build/ext-theme-gray.js"></script>
</head>
<body>
<script >
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [
{
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
layout: {
type: 'accordion',
titleCollapse: false,
animate: true,
activeOnTop: true
},
title: 'West',
split: true,
width: 300,
minWidth: 175,
maxWidth: 400,
collapsible: false,
animCollapse: false,
margins: '0 0 0 5',
items: [{id: 'generalParam' ,title: 'General Param' ,iconCls: 'nav' ,
dockedItems: [{xtype: 'toolbar',dock: 'left',margins: '5 5 5 5',
items: [
{xtype: 'button',text: 'Currency' ,iconCls:'chr'},
{xtype: 'button',text: 'Area' ,iconCls:''},
{xtype: 'button',text: 'Bank' ,iconCls:''},
{xtype: 'button',text: 'Network' ,iconCls:''},
{xtype: 'button',text: 'MCC' ,iconCls:''},
{xtype: 'button',text: 'Static Data',iconCls:''},
{xtype: 'button',text: 'Interfaces' ,iconCls:''},
{xtype: 'button',text: 'Sequences' ,iconCls:''},
{xtype: 'button',text: 'MCC' ,iconCls:''}
]}]
}
]
},
Ext.create('Ext.tab.Panel', {
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
items: [{
bodyStyle: 'background-image:url(images/square.gif)',
html: 'Internal notes go here',
title: 'Welcome',
closable: true,
autoScroll: true
}]
}), {
xtype: 'tabpanel',
autoShow:true,
region: 'east',
title: 'Information',
animCollapse: true,
collapsible: true,
split: true,
width: 275, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
activeTab: 1,
tabPosition: 'bottom',
items: [{
html: '<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll: true
}, Ext.create('Ext.grid.PropertyGrid', {
title: 'Property Grid',
closable: false,
source: {
"(name)": "Properties Form",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
},
{
xtype:'panel',
region: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
collapsed: true,
title: 'South',
margins: '10 10 10 10'
}
]
});
var item1 = {id: 'cardSetting' ,title: 'Card Settings' ,iconCls: 'settings'};
var item2 ={title: 'new item' ,iconCls: 'crv' };
Ext.getCmp('west-panel').add(item1);
Ext.getCmp('west-panel').add(item2);
Ext.getCmp('west-panel').doLayout();
});
</script>
</body>
</html>
안녕하십니까, 답장을 보내 주셔서 감사합니다. 문제는 여전히 동일하지만 추가 한 두 항목 (새 항목 3) 및 (카드 설정 2)의 접기 버튼이 작동하지 않아 내용이 잘못되었습니다. 표시되지 않습니다. 나는 EXTJS 버전 5를 사용하고 있음을 알리고 싶습니다. – khalid
위의 문장에서 나는 아코디언에 4 개의 메뉴 항목이 있고 각각에 내용이 있습니까? 내가 겪고있는 문제에 대해 설명해 주시겠습니까? – Scriptable
두 항목을 동적으로 추가했습니다 (항목 1과 항목 2). 문제는 내가 그들 중 누구도 내용을 볼 수 없다는 것입니다. 그 항목을 클릭하면 아무 일도 일어나지 않습니다. – khalid