-
-/*
-* Licence: LGPL
-*/
+ /*
+ * - LGPL
+ *
+ * image
+ *
+ */
-/**
- * @class Roo.bootstrap.CardUploader
- * @extends Roo.bootstrap.Button
- * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name...
- * @cfg {Number} errorTimeout default 3000
- * @cfg {Array} images an array of ?? Img objects ??? when loading existing files..
- * @cfg {Array} html The button text.
- *
+/**
+ * @class Roo.bootstrap.Img
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Img class
+ * @cfg {Boolean} imgResponsive false | true
+ * @cfg {String} border rounded | circle | thumbnail
+ * @cfg {String} src image source
+ * @cfg {String} alt image alternative text
+ * @cfg {String} href a tag href
+ * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
+ * @cfg {String} xsUrl xs image source
+ * @cfg {String} smUrl sm image source
+ * @cfg {String} mdUrl md image source
+ * @cfg {String} lgUrl lg image source
+ *
* @constructor
- * Create a new CardUploader
+ * Create a new Input
* @param {Object} config The config object
*/
-Roo.bootstrap.CardUploader = function(config){
-
-
-
- Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
-
-
- this.fileCollection = new Roo.util.MixedCollection(false,function(r) {
- return r.data.id
- });
-
+Roo.bootstrap.Img = function(config){
+ Roo.bootstrap.Img.superclass.constructor.call(this, config);
+ this.addEvents({
+ // img events
+ /**
+ * @event click
+ * The img click event for the img.
+ * @param {Roo.EventObject} e
+ */
+ "click" : true
+ });
};
-Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, {
-
-
- errorTimeout : 3000,
-
- images : false,
-
- fileCollection : false,
- allowBlank : true,
+Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
+ imgResponsive: true,
+ border: '',
+ src: 'about:blank',
+ href: false,
+ target: false,
+ xsUrl: '',
+ smUrl: '',
+ mdUrl: '',
+ lgUrl: '',
+
getAutoCreate : function()
- {
+ {
+ if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
+ return this.createSingleImg();
+ }
- var cfg = {
- cls :'form-group' ,
- cn : [
-
- {
- tag: 'label',
- //cls : 'input-group-addon',
- html : this.fieldLabel
-
- },
+ var cfg = {
+ tag: 'div',
+ cls: 'roo-image-responsive-group',
+ cn: []
+ };
+ var _this = this;
+
+ Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
+
+ if(!_this[size + 'Url']){
+ return;
+ }
+
+ var img = {
+ tag: 'img',
+ cls: (_this.imgResponsive) ? 'img-responsive' : '',
+ html: _this.html || cfg.html,
+ src: _this[size + 'Url']
+ };
+
+ img.cls += ' roo-image-responsive-' + size;
+
+ var s = ['xs', 'sm', 'md', 'lg'];
+
+ s.splice(s.indexOf(size), 1);
+
+ Roo.each(s, function(ss){
+ img.cls += ' hidden-' + ss;
+ });
+
+ if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
+ cfg.cls += ' img-' + _this.border;
+ }
+
+ if(_this.alt){
+ cfg.alt = _this.alt;
+ }
+
+ if(_this.href){
+ var a = {
+ tag: 'a',
+ href: _this.href,
+ cn: [
+ img
+ ]
+ };
- {
- tag: 'input',
- type : 'hidden',
- value : this.value,
- cls : 'd-none form-control'
- },
-
- {
- tag: 'input',
- multiple : 'multiple',
- type : 'file',
- cls : 'd-none roo-card-upload-selector'
- },
-
- {
- cls : 'roo-card-uploader-button-container w-100 mb-2'
- },
- {
- cls : 'card-columns roo-card-uploader-container'
+ if(this.target){
+ a.target = _this.target;
}
-
- ]
- };
-
-
+ }
+
+ cfg.cn.push((_this.href) ? a : img);
+
+ });
+
return cfg;
},
- getChildContainer : function() /// what children are added to.
- {
- return this.containerEl;
- },
-
- getButtonContainer : function() /// what children are added to.
- {
- return this.el.select(".roo-card-uploader-button-container").first();
- },
-
- initEvents : function()
+ createSingleImg : function()
{
+ var cfg = {
+ tag: 'img',
+ cls: (this.imgResponsive) ? 'img-responsive' : '',
+ html : null,
+ src : 'about:blank' // just incase src get's set to undefined?!?
+ };
- Roo.bootstrap.Input.prototype.initEvents.call(this);
-
- var t = this;
- this.addxtype({
- xns: Roo.bootstrap,
-
- xtype : 'Button',
- container_method : 'getButtonContainer' ,
- html : this.html, // fix changable?
- cls : 'w-100 ',
- listeners : {
- 'click' : function(btn, e) {
- t.onClick(e);
- }
- }
- });
+ cfg.html = this.html || cfg.html;
+ cfg.src = this.src || cfg.src;
+ if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
+ cfg.cls += ' img-' + this.border;
+ }
+ if(this.alt){
+ cfg.alt = this.alt;
+ }
- this.urlAPI = (window.createObjectURL && window) ||
- (window.URL && URL.revokeObjectURL && URL) ||
- (window.webkitURL && webkitURL);
-
-
-
-
- this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
+ if(this.href){
+ var a = {
+ tag: 'a',
+ href: this.href,
+ cn: [
+ cfg
+ ]
+ };
+
+ if(this.target){
+ a.target = this.target;
+ }
+
+ }
- this.selectorEl.on('change', this.onFileSelected, this);
- if (this.images) {
- var t = this;
- this.images.forEach(function(img) {
- t.addCard(img)
- });
- this.images = false;
+ return (this.href) ? a : cfg;
+ },
+
+ initEvents: function()
+ {
+ if(!this.href){
+ this.el.on('click', this.onClick, this);
}
- this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
-
-
+
},
-
onClick : function(e)
{
- e.preventDefault();
-
- this.selectorEl.dom.click();
-
- },
-
- onFileSelected : function(e)
- {
- e.preventDefault();
-
- if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
- return;
- }
-
- Roo.each(this.selectorEl.dom.files, function(file){
- this.addFile(file);
- }, this);
-
+ Roo.log('img onclick');
+ this.fireEvent('click', this, e);
},
+ /**
+ * Sets the url of the image - used to update it
+ * @param {String} url the url of the image
+ */
-
-
-
-
- addFile : function(file)
+ setSrc : function(url)
{
-
- if(typeof(file) === 'string'){
- throw "Add file by name?"; // should not happen
- return;
- }
+ this.src = url;
- if(!file || !this.urlAPI){
+ if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
+ this.el.dom.src = url;
return;
}
- // file;
- // file.type;
-
- var _this = this;
-
-
- var url = _this.urlAPI.createObjectURL( file);
-
- this.addCard({
- id : Roo.bootstrap.CardUploader.ID--,
- is_uploaded : false,
- src : url,
- title : file.name,
- mimetype : file.type,
- preview : false,
- is_deleted : 0
- })
-
- },
-
- addCard : function (data)
- {
- // hidden input element?
- // if the file is not an image...
- //then we need to use something other that and header_image
- var t = this;
- // remove.....
- var footer = [
- {
- xns : Roo.bootstrap,
- xtype : 'CardFooter',
- items: [
- {
- xns : Roo.bootstrap,
- xtype : 'Element',
- cls : 'd-flex',
- items : [
-
- {
- xns : Roo.bootstrap,
- xtype : 'Button',
- html : String.format("<small>{0}</small>", data.title),
- cls : 'col-11 text-left',
- size: 'sm',
- weight: 'link',
- fa : 'download',
- listeners : {
- click : function() {
- this.downloadCard(data.id)
- }
- }
- },
-
- {
- xns : Roo.bootstrap,
- xtype : 'Button',
-
- size : 'sm',
- weight: 'danger',
- cls : 'col-1',
- fa : 'times',
- listeners : {
- click : function() {
- t.removeCard(data.id)
- }
- }
- }
- ]
- }
-
- ]
- }
-
- ];
-
- var cn = this.addxtype(
- {
-
- xns : Roo.bootstrap,
- xtype : 'Card',
- closeable : true,
- header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
- header_image : data.mimetype.match(/image/) ? data.src : data.preview,
- header_image_fit_square: true, // fixme - we probably need to use the 'Img' element to do stuff like this.
- data : data,
- html : false,
-
- items : footer,
- initEvents : function() {
- Roo.bootstrap.Card.prototype.initEvents.call(this);
- this.imgEl = this.el.select('.card-img-top').first();
- if (this.imgEl) {
- this.imgEl.on('click', function() { t.previewCard( data.id); }, this);
- this.imgEl.set({ 'pointer' : 'cursor' });
-
- }
-
-
- }
-
- }
- );
- // dont' really need ot update items.
- // this.items.push(cn);
- this.fileCollection.add(cn);
- this.updateInput();
-
- },
- removeCard : function(id)
- {
-
- var card = this.fileCollection.get(id);
- card.data.is_deleted = 1;
- card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
- this.fileCollection.remove(card);
- //this.items = this.items.filter(function(e) { return e != card });
- // dont' really need ot update items.
- card.el.dom.parentNode.removeChild(card.el.dom);
-
- },
- reset: function()
- {
- this.fileCollection.each(function(card) {
- card.el.dom.parentNode.removeChild(card.el.dom);
- });
- this.fileCollection.clear();
- this.updateInput();
- },
-
- updateInput : function()
- {
- var data = [];
- this.fileCollection.each(function(e) {
- data.push(e.data);
- });
-
- this.inputEl().dom.value = JSON.stringify(data);
+ this.el.select('img', true).first().dom.src = url;
}
+
});
-
-Roo.bootstrap.CardUploader.ID = -1;/*
+ /*
* - LGPL
*
* image
/**
- * @class Roo.bootstrap.Img
+ * @class Roo.bootstrap.Link
* @extends Roo.bootstrap.Component
- * Bootstrap Img class
- * @cfg {Boolean} imgResponsive false | true
- * @cfg {String} border rounded | circle | thumbnail
- * @cfg {String} src image source
+ * Bootstrap Link Class
* @cfg {String} alt image alternative text
* @cfg {String} href a tag href
- * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
- * @cfg {String} xsUrl xs image source
- * @cfg {String} smUrl sm image source
- * @cfg {String} mdUrl md image source
- * @cfg {String} lgUrl lg image source
+ * @cfg {String} target (_self|_blank|_parent|_top) target for a href.
+ * @cfg {String} html the content of the link.
+ * @cfg {String} anchor name for the anchor link
+ * @cfg {String} fa - favicon
+
+ * @cfg {Boolean} preventDefault (true | false) default false
+
*
* @constructor
* Create a new Input
* @param {Object} config The config object
*/
-Roo.bootstrap.Img = function(config){
- Roo.bootstrap.Img.superclass.constructor.call(this, config);
+Roo.bootstrap.Link = function(config){
+ Roo.bootstrap.Link.superclass.constructor.call(this, config);
this.addEvents({
// img events
});
};
-Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component, {
- imgResponsive: true,
- border: '',
- src: 'about:blank',
href: false,
target: false,
- xsUrl: '',
- smUrl: '',
- mdUrl: '',
- lgUrl: '',
+ preventDefault: false,
+ anchor : false,
+ alt : false,
+ fa: false,
+
getAutoCreate : function()
- {
- if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
- return this.createSingleImg();
- }
+ {
+ var html = this.html || '';
+ if (this.fa !== false) {
+ html = '<i class="fa fa-' + this.fa + '"></i>';
+ }
var cfg = {
- tag: 'div',
- cls: 'roo-image-responsive-group',
- cn: []
+ tag: 'a'
};
- var _this = this;
-
- Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
-
- if(!_this[size + 'Url']){
- return;
- }
-
- var img = {
- tag: 'img',
- cls: (_this.imgResponsive) ? 'img-responsive' : '',
- html: _this.html || cfg.html,
- src: _this[size + 'Url']
- };
-
- img.cls += ' roo-image-responsive-' + size;
-
- var s = ['xs', 'sm', 'md', 'lg'];
-
- s.splice(s.indexOf(size), 1);
-
- Roo.each(s, function(ss){
- img.cls += ' hidden-' + ss;
- });
-
- if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
- cfg.cls += ' img-' + _this.border;
- }
-
- if(_this.alt){
- cfg.alt = _this.alt;
- }
-
- if(_this.href){
- var a = {
- tag: 'a',
- href: _this.href,
- cn: [
- img
- ]
- };
-
- if(this.target){
- a.target = _this.target;
- }
- }
-
- cfg.cn.push((_this.href) ? a : img);
-
- });
-
- return cfg;
- },
-
- createSingleImg : function()
- {
- var cfg = {
- tag: 'img',
- cls: (this.imgResponsive) ? 'img-responsive' : '',
- html : null,
- src : 'about:blank' // just incase src get's set to undefined?!?
- };
-
- cfg.html = this.html || cfg.html;
-
- cfg.src = this.src || cfg.src;
-
- if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
- cfg.cls += ' img-' + this.border;
- }
-
- if(this.alt){
- cfg.alt = this.alt;
- }
-
- if(this.href){
- var a = {
- tag: 'a',
- href: this.href,
- cn: [
- cfg
- ]
- };
-
- if(this.target){
- a.target = this.target;
- }
-
- }
-
- return (this.href) ? a : cfg;
- },
-
- initEvents: function()
- {
- if(!this.href){
- this.el.on('click', this.onClick, this);
- }
-
- },
-
- onClick : function(e)
- {
- Roo.log('img onclick');
- this.fireEvent('click', this, e);
- },
- /**
- * Sets the url of the image - used to update it
- * @param {String} url the url of the image
- */
-
- setSrc : function(url)
- {
- this.src = url;
-
- if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
- this.el.dom.src = url;
- return;
- }
-
- this.el.select('img', true).first().dom.src = url;
- }
-
-
-
-});
-
- /*
- * - LGPL
- *
- * image
- *
- */
-
-
-/**
- * @class Roo.bootstrap.Link
- * @extends Roo.bootstrap.Component
- * Bootstrap Link Class
- * @cfg {String} alt image alternative text
- * @cfg {String} href a tag href
- * @cfg {String} target (_self|_blank|_parent|_top) target for a href.
- * @cfg {String} html the content of the link.
- * @cfg {String} anchor name for the anchor link
- * @cfg {String} fa - favicon
-
- * @cfg {Boolean} preventDefault (true | false) default false
-
- *
- * @constructor
- * Create a new Input
- * @param {Object} config The config object
- */
-
-Roo.bootstrap.Link = function(config){
- Roo.bootstrap.Link.superclass.constructor.call(this, config);
-
- this.addEvents({
- // img events
- /**
- * @event click
- * The img click event for the img.
- * @param {Roo.EventObject} e
- */
- "click" : true
- });
-};
-
-Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component, {
-
- href: false,
- target: false,
- preventDefault: false,
- anchor : false,
- alt : false,
- fa: false,
-
-
- getAutoCreate : function()
- {
- var html = this.html || '';
-
- if (this.fa !== false) {
- html = '<i class="fa fa-' + this.fa + '"></i>';
- }
- var cfg = {
- tag: 'a'
- };
- // anchor's do not require html/href...
- if (this.anchor === false) {
- cfg.html = html;
- cfg.href = this.href || '#';
- } else {
- cfg.name = this.anchor;
- if (this.html !== false || this.fa !== false) {
- cfg.html = html;
+ // anchor's do not require html/href...
+ if (this.anchor === false) {
+ cfg.html = html;
+ cfg.href = this.href || '#';
+ } else {
+ cfg.name = this.anchor;
+ if (this.html !== false || this.fa !== false) {
+ cfg.html = html;
}
if (this.href !== false) {
cfg.href = this.href;
*/
onTriggerClick : Roo.emptyFn
});
- /*
+
+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.bootstrap.CardUploader
+ * @extends Roo.bootstrap.Button
+ * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name...
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Array} images an array of ?? Img objects ??? when loading existing files..
+ * @cfg {Array} html The button text.
+
+ *
+ * @constructor
+ * Create a new CardUploader
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.CardUploader = function(config){
+
+
+
+ Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
+
+
+ this.fileCollection = new Roo.util.MixedCollection(false,function(r) {
+ return r.data.id
+ });
+
+
+};
+
+Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, {
+
+
+ errorTimeout : 3000,
+
+ images : false,
+
+ fileCollection : false,
+ allowBlank : true,
+
+ getAutoCreate : function()
+ {
+
+ var cfg = {
+ cls :'form-group' ,
+ cn : [
+
+ {
+ tag: 'label',
+ //cls : 'input-group-addon',
+ html : this.fieldLabel
+
+ },
+
+ {
+ tag: 'input',
+ type : 'hidden',
+ value : this.value,
+ cls : 'd-none form-control'
+ },
+
+ {
+ tag: 'input',
+ multiple : 'multiple',
+ type : 'file',
+ cls : 'd-none roo-card-upload-selector'
+ },
+
+ {
+ cls : 'roo-card-uploader-button-container w-100 mb-2'
+ },
+ {
+ cls : 'card-columns roo-card-uploader-container'
+ }
+
+ ]
+ };
+
+
+ return cfg;
+ },
+
+ getChildContainer : function() /// what children are added to.
+ {
+ return this.containerEl;
+ },
+
+ getButtonContainer : function() /// what children are added to.
+ {
+ return this.el.select(".roo-card-uploader-button-container").first();
+ },
+
+ initEvents : function()
+ {
+
+ Roo.bootstrap.Input.prototype.initEvents.call(this);
+
+ var t = this;
+ this.addxtype({
+ xns: Roo.bootstrap,
+
+ xtype : 'Button',
+ container_method : 'getButtonContainer' ,
+ html : this.html, // fix changable?
+ cls : 'w-100 ',
+ listeners : {
+ 'click' : function(btn, e) {
+ t.onClick(e);
+ }
+ }
+ });
+
+
+
+
+ this.urlAPI = (window.createObjectURL && window) ||
+ (window.URL && URL.revokeObjectURL && URL) ||
+ (window.webkitURL && webkitURL);
+
+
+
+
+ this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
+
+ this.selectorEl.on('change', this.onFileSelected, this);
+ if (this.images) {
+ var t = this;
+ this.images.forEach(function(img) {
+ t.addCard(img)
+ });
+ this.images = false;
+ }
+ this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
+
+
+ },
+
+
+ onClick : function(e)
+ {
+ e.preventDefault();
+
+ this.selectorEl.dom.click();
+
+ },
+
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+ return;
+ }
+
+ Roo.each(this.selectorEl.dom.files, function(file){
+ this.addFile(file);
+ }, this);
+
+ },
+
+
+
+
+
+ addFile : function(file)
+ {
+
+ if(typeof(file) === 'string'){
+ throw "Add file by name?"; // should not happen
+ return;
+ }
+
+ if(!file || !this.urlAPI){
+ return;
+ }
+
+ // file;
+ // file.type;
+
+ var _this = this;
+
+
+ var url = _this.urlAPI.createObjectURL( file);
+
+ this.addCard({
+ id : Roo.bootstrap.CardUploader.ID--,
+ is_uploaded : false,
+ src : url,
+ title : file.name,
+ mimetype : file.type,
+ preview : false,
+ is_deleted : 0
+ })
+
+ },
+
+ addCard : function (data)
+ {
+ // hidden input element?
+ // if the file is not an image...
+ //then we need to use something other that and header_image
+ var t = this;
+ // remove.....
+ var footer = [
+ {
+ xns : Roo.bootstrap,
+ xtype : 'CardFooter',
+ items: [
+ {
+ xns : Roo.bootstrap,
+ xtype : 'Element',
+ cls : 'd-flex',
+ items : [
+
+ {
+ xns : Roo.bootstrap,
+ xtype : 'Button',
+ html : String.format("<small>{0}</small>", data.title),
+ cls : 'col-11 text-left',
+ size: 'sm',
+ weight: 'link',
+ fa : 'download',
+ listeners : {
+ click : function() {
+ this.downloadCard(data.id)
+ }
+ }
+ },
+
+ {
+ xns : Roo.bootstrap,
+ xtype : 'Button',
+
+ size : 'sm',
+ weight: 'danger',
+ cls : 'col-1',
+ fa : 'times',
+ listeners : {
+ click : function() {
+ t.removeCard(data.id)
+ }
+ }
+ }
+ ]
+ }
+
+ ]
+ }
+
+ ];
+
+ var cn = this.addxtype(
+ {
+
+ xns : Roo.bootstrap,
+ xtype : 'Card',
+ closeable : true,
+ header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
+ header_image : data.mimetype.match(/image/) ? data.src : data.preview,
+ header_image_fit_square: true, // fixme - we probably need to use the 'Img' element to do stuff like this.
+ data : data,
+ html : false,
+
+ items : footer,
+ initEvents : function() {
+ Roo.bootstrap.Card.prototype.initEvents.call(this);
+ this.imgEl = this.el.select('.card-img-top').first();
+ if (this.imgEl) {
+ this.imgEl.on('click', function() { t.previewCard( data.id); }, this);
+ this.imgEl.set({ 'pointer' : 'cursor' });
+
+ }
+
+
+ }
+
+ }
+ );
+ // dont' really need ot update items.
+ // this.items.push(cn);
+ this.fileCollection.add(cn);
+ this.updateInput();
+
+ },
+ removeCard : function(id)
+ {
+
+ var card = this.fileCollection.get(id);
+ card.data.is_deleted = 1;
+ card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
+ this.fileCollection.remove(card);
+ //this.items = this.items.filter(function(e) { return e != card });
+ // dont' really need ot update items.
+ card.el.dom.parentNode.removeChild(card.el.dom);
+
+ },
+ reset: function()
+ {
+ this.fileCollection.each(function(card) {
+ card.el.dom.parentNode.removeChild(card.el.dom);
+ });
+ this.fileCollection.clear();
+ this.updateInput();
+ },
+
+ updateInput : function()
+ {
+ var data = [];
+ this.fileCollection.each(function(e) {
+ data.push(e.data);
+ });
+
+ this.inputEl().dom.value = JSON.stringify(data);
+ }
+
+
+});
+
+
+Roo.bootstrap.CardUploader.ID = -1;/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.