Spaces:
Sleeping
Sleeping
File size: 4,905 Bytes
07c3cdd | 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 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | Ext.namespace('Ext.ux.Wiz');
/**
* Licensed under GNU LESSER GENERAL PUBLIC LICENSE Version 3
*
* @author Thorsten Suckow-Homberg <ts@siteartwork.de>
* @url http://www.siteartwork.de/wizardcomponent
*/
/**
* @class Ext.ux.Wiz.Header
* @extends Ext.BoxComponent
*
* A specific {@link Ext.BoxComponent} that can be used to show the current process in an
* {@link Ext.ux.Wiz}.
*
* An instance of this class is usually being created by {@link Ext.ux.Wiz#initPanels} using the
* {@link Ext.ux.Wiz#headerConfig}-object.
*
* @private
* @constructor
* @param {Object} config The config object
*/
Ext.ux.Wiz.Header = Ext.extend(Ext.BoxComponent, {
/**
* @cfg {Number} height The height of this component. Defaults to "55".
*/
height : 55,
/**
* @cfg {String} region The Region of this component. Since a {@link Ext.ux.Wiz}
* usually uses a {@link Ext.layout.BorderLayout}, this property defaults to
* "north". If you want to change this property, you should also change the appropriate
* css-classes that are used for this component.
*/
region : 'north',
/**
* @cfg {String} title The title that gets rendered in the head of the component. This
* should be a text describing the purpose of the wizard.
*/
title : 'Wizard',
/**
* @cfg {Number} steps The overall number of steps the user has to go through
* to finish the wizard.
*/
steps : 0,
/**
* @cfg {String} stepText The text in the header indicating the current process in the wizard.
* (defaults to "Step {0} of {1}: {2}").
* {0} is replaced with the index (+1) of the current card, {1} is replaced by the
* total number of cards in the wizard and {2} is replaced with the title-property of the
* {@link Ext.ux.Wiz.Card}
* @type String
*/
stepText : "Step {0} of {1}: {2}",
/**
* @cfg {Object} autoEl The element markup used to render this component.
*/
autoEl : {
tag : 'div',
cls : 'ext-ux-wiz-Header',
children : [{
tag : 'div',
cls : 'ext-ux-wiz-Header-title'
}, {
tag : 'div',
children : [{
tag : 'div',
cls : 'ext-ux-wiz-Header-step'
}, {
tag : 'div',
cls : 'ext-ux-wiz-Header-stepIndicator-container'
}]
}]
},
/**
* @param {Ext.Element}
*/
titleEl : null,
/**
* @param {Ext.Element}
*/
stepEl : null,
/**
* @param {Ext.Element}
*/
imageContainer : null,
/**
* @param {Array}
*/
indicators : null,
/**
* @param {Ext.Template}
*/
stepTemplate : null,
/**
* @param {Number} lastActiveStep Stores the index of the last active card that
* was shown-
*/
lastActiveStep : -1,
// -------- helper
/**
* Gets called by {@link Ext.ux.Wiz#onCardShow()} and updates the header
* with the approppriate information, such as the progress of the wizard
* (i.e. which card is being shown etc.)
*
* @param {Number} currentStep The index of the card currently shown in
* the wizard
* @param {String} title The title-property of the {@link Ext.ux.Wiz.Card}
*
* @private
*/
updateStep : function(currentStep, title)
{
var html = this.stepTemplate.apply({
0 : currentStep+1,
1 : this.steps,
2 : title
});
this.stepEl.update(html);
if (this.lastActiveStep != -1) {
this.indicators[this.lastActiveStep].removeClass('ext-ux-wiz-Header-stepIndicator-active');
}
this.indicators[currentStep].addClass('ext-ux-wiz-Header-stepIndicator-active');
this.lastActiveStep = currentStep;
},
// -------- listener
/**
* Overrides parent implementation to render this component properly.
*/
onRender : function(ct, position)
{
Ext.ux.Wiz.Header.superclass.onRender.call(this, ct, position);
this.indicators = [];
this.stepTemplate = new Ext.Template(this.stepText);
this.stepTemplate.compile();
var el = this.el.dom.firstChild;
var ns = el.nextSibling;
this.titleEl = new Ext.Element(el);
this.stepEl = new Ext.Element(ns.firstChild);
this.imageContainer = new Ext.Element(ns.lastChild);
this.titleEl.update(this.title);
var image = null;
for (var i = 0, len = this.steps; i < len; i++) {
image = document.createElement('div');
image.innerHTML = " ";
image.className = 'ext-ux-wiz-Header-stepIndicator';
this.indicators[i] = new Ext.Element(image);
this.imageContainer.appendChild(image);
}
}
}); |