/
layout_card.html
67 lines (59 loc) · 2.27 KB
/
layout_card.html
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>ExtJS :: layout Card</title>
<!-- EXTjs -->
<link rel="stylesheet" type="text/css" href="/ext-4.0.0/resources/css/ext-all.css">
<script type="text/javascript" src="/ext-4.0.0/bootstrap.js"></script>
<script type="text/javascript">
Ext.ns("Ejemplo");
Ext.onReady(function() {
var cardNav = function(incr){
var l = Ext.getCmp('card-wizard-panel').getLayout();
var i = l.activeItem.id.split('card-')[1];
var next = parseInt(i, 10) + incr;
l.setActiveItem(next);
Ext.getCmp('card-prev').setDisabled(next===0);
Ext.getCmp('card-next').setDisabled(next===2);
};
cardWizard = Ext.create("Ext.panel.Panel", {
id:'card-wizard-panel',
title: 'Card Layout (Wizard)',
layout:'card',
activeItem: 0,
bodyStyle: 'padding:15px',
defaults: {border:false},
bbar: ['->', {
id: 'card-prev',
text: '« Previous',
handler: Ext.Function.bind(cardNav, this, [-1]),
disabled: true
},{
id: 'card-next',
text: 'Next »',
handler: Ext.Function.bind(cardNav, this, [1])
}],
items: [{
id: 'card-0',
html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'
},{
id: 'card-1',
html: '<p>Step 2 of 3</p><p>Almost there. Please click the "Next" button to continue...</p>'
},{
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}]
});
myViewport = Ext.create('Ext.container.Viewport',{
id:'the_view',
//layout:'fit',
items:[
cardWizard
]
});
});
</script>
</head>
<body>
</body>
</html>