--- /dev/null
+/*
+ * - LGPL
+ *
+ * Input
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.SecurePass
+ * @extends Roo.bootstrap.Input
+ * Bootstrap SecurePass class
+ *
+ *
+ * @constructor
+ * Create a new SecurePass
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.SecurePass = function (config) {
+ // these go here, so the translation tool can replace them..
+ this.errors = {
+ PwdEmpty: "Please type a password, and then retype it to confirm.",
+ PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
+ PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
+ PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
+ IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
+ FNInPwd: "Your password can't contain your first name. Please type a different password.",
+ LNInPwd: "Your password can't contain your last name. Please type a different password.",
+ TooWeak: "Your password is Too Weak."
+ },
+ this.meterLabel = "Password strength:";
+ this.pwdStrengths = ["Too Weak", "Weak", "Medium", "Strong"];
+ Roo.bootstrap.SecurePass.superclass.constructor.call(this, config);
+}
+
+Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, {
+ /**
+ * @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to
+ * {
+ * PwdEmpty: "Please type a password, and then retype it to confirm.",
+ * PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
+ * PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
+ * PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
+ * IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
+ * FNInPwd: "Your password can't contain your first name. Please type a different password.",
+ * LNInPwd: "Your password can't contain your last name. Please type a different password."
+ * })
+ */
+ // private
+ meterWidth: 200,
+ errors: {},
+ imageRoot: '/',
+ /**
+ * @cfg {String/Object} Label for the strength meter (defaults to
+ * 'Password strength:')
+ */
+ // private
+ meterLabel: '',
+ /**
+ * @cfg {String/Object} pwdStrengths A pwdStrengths spec, or true for a default spec (defaults to
+ * ['Weak', 'Medium', 'Strong'])
+ */
+ // private
+ pwdStrengths: [],
+ // private
+ strength: 0,
+ // private
+ _lastPwd: null,
+ // private
+ kCapitalLetter: 0,
+ kSmallLetter: 1,
+ kDigit: 2,
+ kPunctuation: 3,
+
+ insecure: false,
+ // private
+ initEvents: function () {
+ Roo.bootstrap.SecurePass.superclass.initEvents.call(this);
+
+ if (this.el.is('input[type=password]') && Roo.isSafari) {
+ this.el.on('keydown', this.SafariOnKeyDown, this);
+ }
+
+ this.el.on('keyup', this.checkStrength, this, {buffer: 50});
+ },
+ // private
+ onRender: function (ct, position) {
+ Roo.bootstrap.SecurePass.superclass.onRender.call(this, ct, position);
+ this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
+ this.trigger = this.wrap.createChild({tag: 'div', cls: 'StrengthMeter ' + this.triggerClass});
+
+ this.trigger.createChild({
+ tag: 'div',
+ style: {
+ 'margin-bottom': '10px',
+ width: this.meterWidth + 'px'
+ },
+ cn: {
+ tag: 'div',
+ cls: 'password-meter-grey',
+ style: {
+ width: this.meterWidth + 'px',
+ height: '10px'
+ },
+ cn: {
+ //id: 'PwdMeter',
+ tag: 'div',
+ cls: 'password-meter',
+ style: {
+ //width: 0,
+ height: '10px'
+ }
+ }
+ }
+ });
+ if (this.hideTrigger) {
+ this.trigger.setDisplayed(false);
+ }
+ this.setSize(this.width || '', this.height || '');
+ },
+ // private
+ onDestroy: function () {
+ if (this.trigger) {
+ this.trigger.removeAllListeners();
+ this.trigger.remove();
+ }
+ if (this.wrap) {
+ this.wrap.remove();
+ }
+ Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
+ },
+ // private
+ checkStrength: function () {
+ var pwd = this.el.getValue();
+ if (pwd == this._lastPwd) {
+ return;
+ }
+
+ var strength;
+ if (this.ClientSideStrongPassword(pwd)) {
+ strength = 3;
+ } else if (this.ClientSideMediumPassword(pwd)) {
+ strength = 2;
+ } else if (this.ClientSideWeakPassword(pwd)) {
+ strength = 1;
+ } else {
+ strength = 0;
+ }
+ var pm = this.trigger.child('div/div/div').dom;
+ console.log('strength1: ' + strength);
+
+ pm.style.width = (this.meterWidth / 3) * strength + 'px';
+ //if(this.pwdStrengths != null && strength > 0) {
+ pm.innerHTML = this.meterLabel + ' ' + this.pwdStrengths[strength];
+ //} else {
+ // pm.innerHTML = '';
+ //}
+
+ this._lastPwd = pwd;
+ },
+ reset: function () {
+ Roo.bootstrap.SecurePass.superclass.reset.call(this);
+ this._lastPwd = '';
+ var pm = this.trigger.child('div/div/div').dom;
+ pm.style.width = 0;
+ pm.innerHTML = '';
+ },
+ // private
+ validateValue: function (value) {
+
+ if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) {
+ return false;
+ }
+ if (value.length == 0) {
+ if (this.allowBlank) {
+ this.clearInvalid();
+ return true;
+ }
+
+ this.markInvalid(this.errors.PwdEmpty);
+ return false;
+ }
+
+ if(this.insecure){
+ return true;
+ }
+
+ if ('[\x21-\x7e]*'.match(value)) {
+ this.markInvalid(this.errors.PwdBadChar);
+ return false;
+ }
+ if (value.length < 6) {
+ this.markInvalid(this.errors.PwdShort);
+ return false;
+ }
+ if (value.length > 16) {
+ this.markInvalid(this.errors.PwdLong);
+ return false;
+ }
+ var strength;
+ if (this.ClientSideStrongPassword(value)) {
+ strength = 3;
+ } else if (this.ClientSideMediumPassword(value)) {
+ strength = 2;
+ } else if (this.ClientSideWeakPassword(value)) {
+ strength = 1;
+ } else {
+ strength = 0;
+ }
+
+ if (strength < 2) {
+ this.markInvalid(this.errors.TooWeak);
+ return false;
+ }
+ console.log('strength2: ' + strength);
+ var pm = this.trigger.child('div/div/div').dom;
+
+ pm.style.width = (this.meterWidth / 3) * strength + 'px';
+
+ pm.innerHTML = this.meterLabel + ' ' + this.pwdStrengths[strength];
+
+ /*
+ for (var index = 0; index < this.fieldsFilter.length; ++index) {
+ filter = document.getElementById(this.fieldsFilter[index][0]).value;
+ if (filter != '')
+ {
+ re = new RegExp(filter);
+ if (re.test(value)) {
+ this.markInvalid(eval('this.errors.'+ this.fieldsFilter[index][1]));
+ return false;
+ }
+ }
+ }
+ */
+ return true;
+ },
+ // private
+ CharacterSetChecks: function (type) {
+ this.type = type;
+ this.fResult = false;
+ },
+ // private
+ isctype: function (character, type) {
+ switch (type) { //why needed break after return in js ? very odd bug
+ case this.kCapitalLetter:
+ if (character >= 'A' && character <= 'Z') {
+ return true;
+ }
+ break;
+ case this.kSmallLetter:
+ if (character >= 'a' && character <= 'z') {
+ return true;
+ }
+ break;
+ case this.kDigit:
+ if (character >= '0' && character <= '9') {
+ return true;
+ }
+ break;
+ case this.kPunctuation:
+ if ('!@#$%^&*()_+-=\'";:[{]}|.>,</?`~'.indexOf(character) >= 0) {
+ return true;
+ }
+ break;
+ default:
+ return false;
+ }
+
+ },
+ // private
+ IsLongEnough: function (pwd, size) {
+ return !(pwd == null || isNaN(size) || pwd.length < size);
+ },
+ // private
+ SpansEnoughCharacterSets: function (word, nb) {
+ if (!this.IsLongEnough(word, nb))
+ {
+ return false;
+ }
+
+ var characterSetChecks = new Array(
+ new this.CharacterSetChecks(this.kCapitalLetter), new this.CharacterSetChecks(this.kSmallLetter),
+ new this.CharacterSetChecks(this.kDigit), new this.CharacterSetChecks(this.kPunctuation));
+ for (var index = 0; index < word.length; ++index) {
+ for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
+ if (!characterSetChecks[nCharSet].fResult && this.isctype(word.charAt(index), characterSetChecks[nCharSet].type)) {
+ characterSetChecks[nCharSet].fResult = true;
+ break;
+ }
+ }
+ }
+
+ var nCharSets = 0;
+ for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
+ if (characterSetChecks[nCharSet].fResult) {
+ ++nCharSets;
+ }
+ }
+
+ if (nCharSets < nb) {
+ return false;
+ }
+ return true;
+ },
+ // private
+ ClientSideStrongPassword: function (pwd) {
+ return this.IsLongEnough(pwd, 8) && this.SpansEnoughCharacterSets(pwd, 3);
+ },
+ // private
+ ClientSideMediumPassword: function (pwd) {
+ return this.IsLongEnough(pwd, 7) && this.SpansEnoughCharacterSets(pwd, 2);
+ },
+ // private
+ ClientSideWeakPassword: function (pwd) {
+ return this.IsLongEnough(pwd, 6) || !this.IsLongEnough(pwd, 0);
+ }
+
+})
\ No newline at end of file
--- /dev/null
+@import url('./alert.css');
+@import url('./calendar.css');
+@import url('./carousel.css');
+@import url('./checkbox.css');
+@import url('./combobox.css');
+@import url('./datepicker.css');
+@import url('./document-manager.css');
+@import url('./document-slider.css');
+@import url('./document-viewer.css');
+@import url('./dropdown.css');
+@import url('./input.css');
+@import url('./label-pill.css');
+@import url('./layout.css');
+@import url('./list-group.css');
+@import url('./mask.css');
+@import url('./masonary-squares.css');
+@import url('./modal.css');
+@import url('./nav-progress-bar.css');
+@import url('./nav-tabs.css');
+@import url('./navbar.css');
+@import url('./numberbox.css');
+@import url('./pull-xs-right.css');
+@import url('./select2.css');
+@import url('./sidebar-nav.css');
+@import url('./sticky-footer.css');
+@import url('./table.css');
+@import url('./top-bar.css');
+@import url('./tweaks.css');
+@import url('./upload-cropbox.css');
+@import url('./secure-pass.css');
\ No newline at end of file
--- /dev/null
+
+
+Roo.example = Roo.example || {};
+
+Roo.example.bootstrap = new Roo.XComponent({
+ part : ["layout","viewpanel"],
+ order : '001-viewpanel',
+ region : '',
+ parent : '#bootstrap',
+ name : "unnamed module",
+ disabled : false,
+ permname : '',
+ _tree : function()
+ {
+
+ this.parent = {
+ el : new Roo.bootstrap.Body(),
+ }
+ this.parent.el.layout = false;
+ this.parent.el.render(document.body);
+
+ var _this = this;
+ var MODULE = this;
+ return {
+ xtype: 'Body',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'NavHeaderbar',
+ xns: Roo.bootstrap,
+ bar: true,
+ position : 'fixed-top',
+ inverse : true,
+ brand: 'Brand',
+ items : [
+ {
+ xtype: 'NavGroup',
+ xns: Roo.bootstrap,
+ items: [
+ {
+ xtype: 'NavItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ menu: {
+ xtype: 'Menu',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello aaa",
+ href : 'http://roojs.com'
+ },
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ href : 'http://roojs.com'
+ }
+ ]
+ }
+ },
+ {
+ xtype: 'NavItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ active: true,
+ menu: {
+ xtype: 'Menu',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello aaa",
+ href : 'http://roojs.com'
+ },
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ href : 'http://roojs.com'
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ xtype: 'NavGroup',
+ xns: Roo.bootstrap,
+ align: 'right',
+ items: [
+ {
+ xtype: 'NavItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ badge: 'test',
+ active: true
+ },
+ {
+ xtype: 'NavItem',
+ xns: Roo.bootstrap,
+
+ html: "dialog",
+ listeners : {
+ click : function() {
+ Roo.ComponentMgr.get('test-modal-1').show()
+ }
+ }
+
+ },
+ {
+ xtype: 'Modal',
+ id: 'test-modal-1',
+ xns: Roo.bootstrap,
+ title : 'test1',
+ html: "dialog"
+ },
+ {
+ xtype: 'NavItem',
+ xns: Roo.bootstrap,
+ glyphicon: 'search',
+ html: "dialog"
+
+ },
+ ]
+ }
+ ]
+
+ },
+ {
+ xtype: 'Container',
+ xns: Roo.bootstrap,
+ jumbotron : true,
+ style : 'padding: 30px 15px 40px',
+ items: [
+ {
+ xtype: 'Container',
+ xns: Roo.bootstrap,
+ html: '<h1> hello world </h1><p>test</p>'
+ }
+ ]
+ },
+ {
+ xtype: 'Container',
+ xns: Roo.bootstrap,
+ style : 'margin-top:50px',
+ items : [
+ {
+ xtype: 'Row',
+ xns: Roo.bootstrap,
+ items : [
+
+ {
+ xtype: 'Column',
+ xns: Roo.bootstrap,
+ colspan : 12,
+ items : [
+
+ {
+ xtype: 'PagingToolbar',
+ xns: Roo.bootstrap,
+
+ }
+ ]
+ }
+ ]
+ },
+ {
+ xtype: 'Row',
+ xns: Roo.bootstrap,
+ items : [
+
+ {
+ xtype: 'Column',
+ xns: Roo.bootstrap,
+ colspan : 12,
+ items : [
+
+ {
+ xtype: 'NavSimplebar',
+ xns: Roo.bootstrap,
+ bar: true,
+ items : [
+ {
+ xtype: 'NavGroup',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'NavItem',
+ xns: Roo.bootstrap,
+ html: "nav",
+ href : 'http://roojs.com',
+
+ menu: {
+ xtype: 'Menu',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ href : 'http://roojs.com'
+ },
+ {
+ xtype: 'MenuSeparator',
+ xns: Roo.bootstrap,
+ },
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ href: 'http://roojs.com'
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+
+ xtype: 'Form',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'Input',
+ xns: Roo.bootstrap,
+ name : 'testinput'
+ },{
+
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html : 'submit'
+ }
+ ]
+ }
+
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ xtype: 'Container',
+ xns: Roo.bootstrap,
+ style : 'margin-top:60px',
+ items : [
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ html: 'popover - default',
+ items : [
+ {
+ xtype: 'Popover',
+ xns: Roo.bootstrap,
+ title : "test popover",
+ html : "test content",
+ listeners : {
+ render : function(args) {
+ _this.popover = this;
+ }
+ }
+ }
+ ]
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ active: true,
+ html: 'active'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ weight: 'primary',
+ html: 'primary'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ weight: 'success',
+ html: 'success'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ weight: 'info',
+ size : 'lg',
+ html: 'info lg'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ weight: 'warning',
+ html: 'warning'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ weight: 'danger',
+ size : 'sm',
+ html: 'danger sm'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ weight: 'danger',
+ size : 'xs',
+ html: 'danger xs'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ weight: 'link',
+ tag: 'a',
+ href: 'http://www.roojs.com',
+ html: 'link a'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ disabled: true,
+ html: 'disabled'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ isClose: true,
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ glyphicon: 'volume-up',
+ html: 'glyphicon'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ badge: '42',
+ href: '#'
+ }
+ ]
+ },
+ {
+ xtype: 'Container',
+ xns: Roo.bootstrap,
+ style : 'margin-top:60px',
+
+ items : [
+ {
+ xtype: 'ButtonGroup',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html: "hello",
+ menu: {
+ xtype: 'Menu',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello aaa",
+ href : 'http://roojs.com'
+ },
+ {
+ xtype: 'MenuItem',
+ xns: Roo.bootstrap,
+ html: "hello",
+ href : 'http://roojs.com'
+ }
+ ]
+ }
+ }
+ ]
+ }
+ ]
+ },
+ {
+ xtype: 'Container',
+ xns: Roo.bootstrap,
+ style : 'margin-top:60px',
+ items : [
+ {
+ xtype: 'ButtonGroup',
+ xns : Roo.bootstrap,
+ items: [
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ }
+ ]
+ },
+ {
+ xtype: 'ButtonGroup',
+ xns : Roo.bootstrap,
+ align: 'vertical',
+ items: [
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ }
+ ]
+ },
+ {
+ xtype: 'ButtonGroup',
+ xns : Roo.bootstrap,
+ size: 'lg',
+ align: 'justified',
+ items: [
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ tag : 'a'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ tag : 'a'
+ },
+ {
+ xtype: 'Button',
+ xns : Roo.bootstrap,
+ tag : 'a'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ xtype: 'Container',
+ xns: Roo.bootstrap,
+ style : 'margin-top:60px',
+ items : [
+ {
+ xtype: 'Form',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'Input',
+ xns: Roo.bootstrap,
+ name : 'test',
+ fieldLabel : 'test - keyup',
+ listeners : {
+ keyup : function() {
+ alert("Test");
+ }
+ }
+ },
+ {
+ xtype: 'ComboBox',
+ xns: Roo.bootstrap,
+ name : 'test',
+ fieldLabel : 'test',
+ displayField : 'state',
+ hiddenField: 'abbr',
+ hiddenName: 'testval',
+ mode : 'local',
+ store : {
+ xtype : 'SimpleStore',
+ xns : Roo.data,
+ fields: ['abbr', 'state'],
+ data : [ [ 'aa', 'aaa'] , ['bb', 'bbb'] ]
+ },
+ listeners : {
+ render : function(self)
+ {
+ _this.combo = self;
+ }
+ }
+
+ },
+ {
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html : 'Submit'
+
+ },
+ ]
+ }
+ ]
+ },{
+ xtype: 'Container',
+ xns: Roo.bootstrap,
+ style : 'margin-top:60px',
+
+ items : [
+ {
+ xtype: 'Form',
+ xns: Roo.bootstrap,
+ labelAlign : 'left',
+ items : [
+ {
+ xtype: 'Input',
+ xns: Roo.bootstrap,
+ name : 'test',
+ fieldLabel : 'test'
+ },
+ {
+ allowBlank : true,
+ xtype: 'SecurePass',
+ inputType : 'password',
+ xns: Roo.bootstrap,
+ name : 'test1',
+ imageRoot : rootURL + '/Pman/templates/images',
+ fieldLabel : 'test password'
+ },
+ {
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html : 'Submit'
+
+ },
+ ]
+ }
+ ]
+ },
+ {
+ xtype: 'Container',
+ xns: Roo.bootstrap,
+ style : 'margin-top:60px',
+ items: [
+ {
+ xtype: 'ButtonGroup',
+ xns: Roo.bootstrap,
+ size: 'xs',
+ toolbar: true,
+
+ items : [
+ {
+ xtype: 'ButtonGroup',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html : 'A',
+ },
+ {
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html : 'B',
+ },
+ {
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html : 'C',
+ },
+ {
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html : 'D',
+ }
+ ]
+ },
+ {
+ xtype: 'ButtonGroup',
+ xns: Roo.bootstrap,
+ items : [
+ {
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html : ' ',
+ glyphicon: 'align-left'
+ },
+ {
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html : ' ',
+ glyphicon: 'align-center'
+ },
+ {
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html : ' ',
+ glyphicon: 'align-right'
+ },
+ {
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ html : ' ',
+ glyphicon: 'align-justify'
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ xtype: 'Container',
+ xns: Roo.bootstrap,
+ items: [
+ {
+ xtype: 'Img',
+ xns: Roo.bootstrap,
+ src: 'http://img.brothersoft.com/screenshots/softimage/r/rose_flower_screensaver-234027-1240456558.jpeg',
+ border: 'thumbnail',
+ style: 'width: 400px'
+ }
+ ]
+ }
+ ]
+ };
+ }
+});
\ No newline at end of file
);D.push({x:A-this.unitWidth*C[0].x-this.gutter*(C[0].x-1)-this.unitWidth*C[1].x-this.gutter*(C[1].x-1),y:B});D.push({x:A-this.unitWidth*C[0].x-this.gutter*(C[0].x-1)-this.unitWidth*C[1].x-this.gutter*(C[1].x-1)-this.unitWidth*C[2].x-this.gutter*(C[2].x-1),y:B}
);D.push({x:A-this.unitWidth*C[3].x-this.gutter*(C[3].x-1),y:B+(this.unitWidth+this.gutter)*1});return D;}D.push({x:A-this.unitWidth*C[0].x-this.gutter*(C[0].x-1),y:B});D.push({x:A-this.unitWidth*C[1].x-this.gutter*(C[1].x-1),y:B+(this.unitWidth+this.gutter)*2}
);D.push({x:A-this.unitWidth*C[1].x-this.gutter*(C[1].x-1)-this.unitWidth*C[2].x-this.gutter*(C[2].x-1),y:B+(this.unitWidth+this.gutter)*2});D.push({x:A-this.unitWidth*C[1].x-this.gutter*(C[1].x-1)-this.unitWidth*C[2].x-this.gutter*(C[2].x-1)-this.unitWidth*C[3].x-this.gutter*(C[3].x-1),y:B+(this.unitWidth+this.gutter)*2}
-);return D;},addItem:function(A){var cn=new Roo.bootstrap.MasonryBrick(A);this.register(cn);cn.parentId=this.id;cn.onRender(this.el,null);return cn;},register:function(A){this.bricks.push(A);Roo.log('brick pushing');A.masonryId=this.id;},clearAll:function(){this.bricks=[];
-this.el.dom.innerHTML='';}});
+);return D;},addItem:function(A){var cn=new Roo.bootstrap.MasonryBrick(A);cn.parentId=this.id;cn.onRender(this.el,null);return cn;},register:function(A){this.bricks.push(A);A.masonryId=this.id;},clearAll:function(){this.bricks=[];this.el.dom.innerHTML='';
+}});
// Roo/bootstrap/LayoutMasonryAuto.js
Roo.bootstrap.LayoutMasonryAuto=function(A){Roo.bootstrap.LayoutMasonryAuto.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.LayoutMasonryAuto,Roo.bootstrap.Component,{isFitWidth:false,isOriginLeft:true,isOriginTop:false,isLayoutInstant:false,isResizingContainer:true,columnWidth:0,maxCols:0,padHeight:10,isAutoInitial:true,gutter:0,containerWidth:0,initialColumnWidth:0,currentSize:null,colYs:null,maxY:0,padWidth:10,tag:'div',cls:'',bricks:null,cols:0,_isLayoutInited:null,getAutoCreate:function(){var A={tag:this.tag,cls:'blog-masonary-wrapper '+this.cls,cn:{cls:'mas-boxes masonary'}
};return A;},getChildContainer:function(){if(this.boxesEl){return this.boxesEl;}this.boxesEl=this.el.select('.mas-boxes').first();return this.boxesEl;},initEvents:function(){var A=this;if(this.isAutoInitial){Roo.log('hook children rendered');this.on('childrenrendered',function(){Roo.log('children rendered');