ext-ux-wizard/basicwizard.html at master · cdomigan/ext-ux-wizard · GitHub

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../../../lib/extjs/ext_2_2_1/resources/css/ext-all.css">
	<link rel="stylesheet" type="text/css" href="../../../lib/extjs/custom/tbar-layout/ToolbarLayout.css">
	<link rel="stylesheet" type="text/css" href="src/css/Ext.ux.Wizard.css">

    <script type="text/javascript" src="../../../lib/extjs/ext_2_2_1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../../lib/extjs/ext_2_2_1/ext-all-debug.js"></script>
	<script type="text/javascript" src="../../../lib/extjs/custom/tbar-layout/ToolbarLayout.js"></script>
	<script type="text/javascript" src="../../../lib/extjs/custom/Ext.ux.SlickCardLayout.js"></script>

	<script type="text/javascript" src="src/Ext.ux.WizardHeader.js"></script>
	<script type="text/javascript" src="src/Ext.ux.BasicWizard.js"></script>
    <!-- A Localization Script File comes here -->
    <script type="text/javascript">
    	Ext.onReady(
			function(){
				Ext.QuickTips.init();
				Ext.BLANK_IMAGE_URL = '../../../lib/extjs/ext_2_2_1/resources/images/default/s.gif';

				var win = new Ext.Window({
					 id: Ext.id(),
					 layout:'fit',
					 width:550,
					 modal: true,
					 shadow: 'frame',
					 shadowOffset: 4,
					 constrain: true,
					 height: 350,
					 center: true,
					 title: 'Ext.ux.BasicWizard Example',
					 items: {
					 	xtype: 'basicwizard',
						id: 'wiz-test',
						backBtnText: 'Previous',
						endBtnText: 'Finish',
						animate: true,
						frame: false,
						height: 350,
						replayTo: 0,
						headerConfig: {
							titleText: 'Testing Ext.ux.BasicWizard',
							titleImg: 'src/imgs/wizard-wand.jpg'
						},
						items: [{
							index: 0,
							html: '<p>The Wizard Component is now split into two classes, Ext.ux.BasicWizard and Ext.ux.Wizard. <br /><br /></p>'
								+ '<p>Ext.ux.BasicWizard provides low level functionality like handling of events, navigation button states and workflow, etc.<br /><br /></p>'
								+ '<p>The Ext.ux.BasicWizard component is to be used for simple implementations that do not require asychronous data loading, validation, form input or submission. '
								+ "Also included in this version is support for better 'trail' handling that lets you know at any time the 'step' you are currently 'observing' in the wizard."
								+ 'a typical use case would be for simple text / html based documentation, guides, help docs etc.</p>'
						}, {
							index: 1,
							html: "<p>The Ext.ux.Wizard while building on Ext.ux.BasicWizard and overriding / extending some of Ext.ux.BasicWizard's features now focusses on complex usages for real wizards<br /><br /></p>"
								+ "<p>It now provides a metaform engine that supports complex layouts and structures like fieldsets, per card / per wizard validation is now also built-in.<br /><br /></p>"
								+ "<p>We also have the much requested 'sequence control' feature <br /><br /></p>"
								+ "<p>Remember, these features are not in Ext.ux.BasicWizard, whose demo you are currently testing. You may want to take a look at Ext.ux.Wizard for it's demonstrations.</p>"
						}, {
							index: 2,
							html: '<p><br />What more can I say. Cheers, you have successfuly completed the tasks for this wizard, you may now exit.</p>'
						}]
					 }
				});
			    win.show();
			}
		);
	</script>
    <title>Ext.ux.BasicWizard 2.0</title>
</head>
<body id="chalu-xtensions-page">
</body>
</html>