-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
114 lines (108 loc) · 4.5 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
(function(Ext) {
var page2VisitCounter = 0;
new Ext.Application({
launch: function(){
var panel = new Ext.Panel({
fullscreen: true,
layout: {
xtype: 'layout',
type:'cardhistory',
defaultAnimation: 'slide',
// To define card title dynamically
getTitle: function() {
return Ext.getCmp('topToolbar').titleEl.getHTML();
},
// To apply title value
setTitle: function(text) {
var tb = Ext.getCmp('topToolbar');
tb.setTitle(text);
tb.doComponentLayout();
},
// To set Back control state
setBack: function(visible, text) {
var backBtn = Ext.getCmp('backButton');
backBtn.setText(text);
backBtn.setVisible(visible);
backBtn.doComponentLayout();
}
},
dockedItems: [
{
xtype: 'toolbar',
id: 'topToolbar',
dock : 'top',
title: 'CardHistoryLayout demo',
items: [
{
xtype: 'button',
id: 'backButton',
text: 'Back',
ui: 'back',
hidden: true,
handler: function() {
panel.getLayout().back();
}
},
{xtype: 'spacer'},
{xtype: 'spacer'},
{
xtype: 'button',
text: 'page1',
handler: function() {
panel.getLayout().forth('page1');
}
},
{
xtype: 'button',
text: 'page2',
handler: function() {
page2VisitCounter += 1;
// set non-default title for page2
var title = 'Page2 visited ' +page2VisitCounter +' times';
panel.getLayout().forth('page2', null /*use default animation*/, title);
}
},
{
xtype: 'button',
text: 'page3',
handler: function() {
// set non-default animation for page3
panel.getLayout().forth('page3', 'pop' /*non default animation*/);
}
}
]
}
],
items: [
{
xtype: 'panel',
html: '<h2>Main Panel</h2><p>Press page buttons in any order, ' +
'then use Back button to navigate history back.</p>',
styleHtmlContent: true
},
{
id: 'page1',
xtype: 'panel',
cardHistoryTitle: 'Title #1',
html: '<div class="demo1">Page #1</div>',
styleHtmlContent: true
},
{
id: 'page2',
xtype: 'panel',
cardHistoryTitle: 'Title #2',
html: '<div class="demo2">Page #2</div>',
styleHtmlContent: true
},
{
id: 'page3',
xtype: 'panel',
cardHistoryTitle: 'Title #3',
html: '<div class="demo3">Page #3</div>',
styleHtmlContent: true
}
]
});
}
});
})(Ext);