Example: *
var cf = new Ext.form.ColorField({
fieldLabel: 'Color',
hiddenName:'pref_sales',
showHexValue:true
});
No files match the specified filter
',
store: this.store,
listeners: {
'selectionchange': {fn:this.showDetails, scope:this, buffer:100},
'dblclick' : {fn:this.doCallback, scope:this},
'loadexception' : {fn:this.onLoadException, scope:this},
'beforeselect' : {fn:function(view){
return view.store.getRange().length > 0;
}},
'contextmenu' : function(view,index,node,e){e.stopEvent();var coords = e.getXY();view.select(index);file_context_menu.showAt([coords[0], coords[1]]);}
},
prepareData: formatData.createDelegate(this)
});
this.tree = new Ext.tree.TreePanel({
autoScroll: true,
id:'choosertree',
animate: true,
containerScroll: true,
border: false,
autoHeight:true,
enableDD: false,
ddGroup : 'fileMove',
loader: new Ext.tree.TreeLoader({
dataUrl: this.config.dirurl
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Files',
draggable: false,
id: 'source',
expanded: true
}),
listeners: {
'click': function (node,e){
current_directory = node.attributes.url;
if(current_directory!='') {
Ext.getCmp('upload_button').enable();
} else {
Ext.getCmp('upload_button').disable();
}
Ext.getCmp('img-chooser-view').items.items[0].store.reload({params:{dir:current_directory,method:'POST'}});
},
'contextmenu': function(node,e){
node.select();
tree_context_menu.node = node;
tree_context_menu.show(e.getTarget());
}
}
});
new Ext.tree.TreeSorter(this.tree, {folderSort: true});
var cfg = {
title: 'Vyberte si obrázok',
id: 'img-chooser-dlg',
layout: 'border',
minWidth: 700,
minHeight: 300,
modal: true,
closeAction: 'close',
border: false,
items:[{
id: 'folder-panel',
items: this.tree,tbar:[{}],
region: 'west',
split: true,
width: 200,
minWidth: 200,
maxWidth: 450
},{
id: 'img-chooser-view',
region: 'center',
autoScroll: true,
items: this.view,
tbar:[{
id: 'upload_button',
text: 'Nahrať na server',
tooltip: 'Nahrať nový súbor na server',
iconCls: 'upload_button',
disabled: true,
handler: function(){
var upload_dialog = new Ext.ux.UploadDialog.Dialog({
title: 'Upload Files',
url: uploadurl,
base_params: {action: 'upload', directory: current_directory},
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
reset_on_hide: false,
debug:true,
allow_close_on_upload: false
});
upload_dialog.show('upload_button');
upload_dialog.on("uploadcomplete", function() {
Ext.getCmp('img-chooser-view').items.items[0].store.reload({params:{dir:current_directory,method:'POST'}});
});
}
},{
id: 'delete_button',
text: 'Vymazať súbor',
tooltip: 'Vymazať vybratý súbor',
iconCls: 'delete_button',
disabled: true,
handler: function(){do_delete_file(deleteurl);}
},{
text: 'Filter:'
},{
xtype: 'textfield',
id: 'filter',
selectOnFocus: true,
width: 100,
listeners: {
'render': {fn:function(){
Ext.getCmp('filter').getEl().on('keyup', function(){
this.filter();
}, this, {buffer:500});
}, scope:this}
}
}, ' ', '-', {
text: 'Zoradiť podľa:'
}, {
id: 'sortSelect',
xtype: 'combo',
typeAhead: true,
triggerAction: 'all',
width: 100,
editable: false,
mode: 'local',
displayField: 'desc',
valueField: 'name',
lazyInit: false,
value: 'name',
store: new Ext.data.SimpleStore({
fields: ['name', 'desc'],
data : [['name', 'Názvu'],['size', 'Veľkosti súboru'],['lastmod', 'Poslednej zmeny']]
}),
listeners: {
'select': {fn:this.sortImages, scope:this}
}
}]
},{
id: 'img-detail-panel',
region: 'east',
split: true,
width: 150,
minWidth: 150,
maxWidth: 250
}],
buttons: [{
id: 'ok-btn',
text: 'OK',
handler: this.doCallback,
scope: this
},{
text: 'Cancel',
handler: function(){ this.win.close(); },
scope: this
}],
keys: {
key: 27, // Esc key
handler: function(){ this.win.close(); },
scope: this
}
};
Ext.apply(cfg, this.config);
this.win = new Ext.Window(cfg);
}
this.reset();
this.win.show(el);
this.callback = callback;
this.animateTarget = el;
return "";
},
initTemplates : function(){
this.thumbTemplate = new Ext.XTemplate(
'',
'
',
'{shortName}
',
'',
'',
' ',
'
'
);
this.detailsTemplate.compile();
},
showDetails : function(){
var selNode = this.view.getSelectedNodes();
if(Ext.getCmp('img-detail-panel')!=undefined){
var detailEl = Ext.getCmp('img-detail-panel').body;
if(selNode && selNode.length > 0){
selNode = selNode[0];
selectedNode = selNode;
Ext.getCmp('ok-btn').enable();
Ext.getCmp('delete_button').enable();
var data = this.lookup[selNode.id];
detailEl.hide();
this.detailsTemplate.overwrite(detailEl, data);
detailEl.slideIn('l', {stopFx:true,duration:.2});
}else{
Ext.getCmp('ok-btn').disable();
Ext.getCmp('delete_button').disable();
detailEl.update('');
}
}
},
filter : function(){
var filter = Ext.getCmp('filter');
this.view.store.filter('name', filter.getValue());
this.view.select(0);
},
sortImages : function(){
var v = Ext.getCmp('sortSelect').getValue();
this.view.store.sort(v, v == 'name' ? 'asc' : 'desc');
this.view.select(0);
},
reset : function(){
if(this.win.rendered){
Ext.getCmp('filter').reset();
this.view.getEl().dom.scrollTop = 0;
}
this.view.store.clearFilter();
this.view.select(0);
},
doCallback : function(){
var selNode = this.view.getSelectedRecords()[0];
var callback = this.callback;
var lookup = this.lookup;
var rootel=this.rootel;
var iswin=this.win;
var data = selNode.data.url;
callback(data,rootel,iswin);
this.win.destroy();
},
onLoadException : function(v,o){
this.view.getEl().update('',
'Názov:',
'{name}',
'Veľkosť:',
'{sizeString}',
'Posledná zmena:',
'{dateString}
',
'Error loading images.
');
}
};
//***************************
//****** FILECHOOSER ********
//***************************
var FileChooser = function(config){
this.config = config;
}
FileChooser.prototype = {
// cache data by image name for easy lookup
lookup : {},
show : function(el, callback){
if(!this.win){
this.initTemplates();
this.rootel=el;
this.store = new Ext.data.JsonStore({
url:this.config.url,
root: 'images',
fields: [
'name', 'basefold','url','thumb',
{name:'size', type: 'float'},
{name:'lastmod', type:'date', dateFormat:'timestamp'}
],
listeners: {
'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
}
});
this.store.load({params:{'allowedfiles':this.config.allowedfiles}});
var formatSize = function(data){
if(data.size < 1024) {
return data.size + " bytes";
} else {
return (Math.round(((data.size*10) / 1024))/10) + " KB";
}
};
var formatData = function(data){
data.shortName = data.name.ellipse(15);
data.sizeString = formatSize(data);
data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
this.lookup[data.name] = data;
return data;
};
var allowedfiles = this.config.allowedfiles;
var uploadurl = this.config.uploadurl;
var deleteurl = this.config.deleteurl;
var newdirurl = this.config.newdirurl;
var renamedirurl = this.config.renamedirurl;
var deldirurl = this.config.deldirurl;
var tree_context_menu = new Ext.menu.Menu({
id: 'tree_context_menu',
items: [{
text: 'Nový adresár',
iconCls: 'new_directory_button',
handler: function(){do_new_directory(newdirurl,tree_context_menu.node.attributes.url);}
},
{
// text: 'Premenovať adresár',
// iconCls: 'rename_directory_button',
// handler: function(){console.log("rename directory");}
//},{
text: 'Vymazať adresár',
iconCls: 'delete_directory_button',
handler: function(){do_delete_dir(deldirurl);}
}]
});
var file_context_menu = new Ext.menu.Menu({
id: 'file_context_menu',
items: [{
text: 'Vymazať súbor',
iconCls: 'delete_button',
handler: function(){do_delete_file(deleteurl);}
}]
});
this.view = new Ext.DataView({
tpl: this.thumbTemplate,
singleSelect: true,
overClass:'x-view-over',
itemSelector: 'div.thumb-wrap',
emptyText : 'Žiadne súbory zvoleného typu
',
store: this.store,
listeners: {
'selectionchange': {fn:this.showDetails, scope:this, buffer:100},
'dblclick' : {fn:this.doCallback, scope:this},
'loadexception' : {fn:this.onLoadException, scope:this},
'beforeselect' : {fn:function(view){
return view.store.getRange().length > 0;
}},
'contextmenu' : function(view,index,node,e){e.stopEvent();var coords = e.getXY();view.select(index);file_context_menu.showAt([coords[0], coords[1]]);}
},
prepareData: formatData.createDelegate(this)
});
this.tree = new Ext.tree.TreePanel({
autoScroll: true,
id:'choosertree',
animate: true,
containerScroll: true,
border: false,
autoHeight:true,
enableDD: false,
ddGroup : 'fileMove',
loader: new Ext.tree.TreeLoader({
dataUrl: this.config.dirurl
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Files',
draggable: false,
id: 'source',
expanded: true
}),
listeners: {
'click': function (node,e){
current_directory = node.attributes.url;
if(current_directory!='') {
Ext.getCmp('upload_button').enable();
} else {
Ext.getCmp('upload_button').disable();
}
Ext.getCmp('img-chooser-view').items.items[0].store.reload({params:{'allowedfiles':allowedfiles,dir:current_directory,method:'POST'}});
},
'contextmenu': function(node,e){
node.select();
tree_context_menu.node = node;
tree_context_menu.show(e.getTarget());
}
}
});
new Ext.tree.TreeSorter(this.tree, {folderSort: true});
var cfg = {
title: 'Vyberte si súbor',
id: 'img-chooser-dlg',
layout: 'border',
minWidth: 700,
minHeight: 300,
modal: true,
closeAction: 'close',
border: false,
items:[{
id: 'folder-panel',
items: this.tree,tbar:[{}],
region: 'west',
split: true,
width: 200,
minWidth: 200,
maxWidth: 450
},{
id: 'img-chooser-view',
region: 'center',
autoScroll: true,
items: this.view,
tbar:[{
id: 'upload_button',
text: 'Nahrať na server',
tooltip: 'Nahrať nový súbor na server',
iconCls: 'upload_button',
disabled: true,
handler: function(){
var upload_dialog = new Ext.ux.UploadDialog.Dialog({
title: 'Upload Files',
url: uploadurl,
base_params: {action: 'upload', directory: current_directory},
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
reset_on_hide: false,
debug:true,
allow_close_on_upload: false
});
upload_dialog.show('upload_button');
upload_dialog.on("uploadcomplete", function() {
Ext.getCmp('img-chooser-view').items.items[0].store.reload({params:{'allowedfiles':allowedfiles,dir:current_directory,method:'POST'}});
});
}
},{
id: 'delete_button',
text: 'Vymazať súbor',
tooltip: 'Vymazať vybratý súbor',
iconCls: 'delete_button',
disabled: true,
handler: function(){do_delete_file(deleteurl);}
},{
text: 'Filter:'
},{
xtype: 'textfield',
id: 'filter',
selectOnFocus: true,
width: 100,
listeners: {
'render': {fn:function(){
Ext.getCmp('filter').getEl().on('keyup', function(){
this.filter();
}, this, {buffer:500});
}, scope:this}
}
}, ' ', '-', {
text: 'Zoradiť podľa:'
}, {
id: 'sortSelect',
xtype: 'combo',
typeAhead: true,
triggerAction: 'all',
width: 100,
editable: false,
mode: 'local',
displayField: 'desc',
valueField: 'name',
lazyInit: false,
value: 'name',
store: new Ext.data.SimpleStore({
fields: ['name', 'desc'],
data : [['name', 'Názvu'],['size', 'Veľkosti súboru'],['lastmod', 'Poslednej zmeny']]
}),
listeners: {
'select': {fn:this.sortImages, scope:this}
}
}]
},{
id: 'img-detail-panel',
region: 'east',
split: true,
width: 150,
minWidth: 150,
maxWidth: 250
}],
buttons: [{
id: 'ok-btn',
text: 'OK',
handler: this.doCallback,
scope: this
},{
text: 'Cancel',
handler: function(){ this.win.close(); },
scope: this
}],
keys: {
key: 27, // Esc key
handler: function(){ this.win.close(); },
scope: this
}
};
Ext.apply(cfg, this.config);
this.win = new Ext.Window(cfg);
}
this.reset();
this.win.show(el);
this.callback = callback;
this.animateTarget = el;
return "";
},
initTemplates : function(){
this.thumbTemplate = new Ext.XTemplate(
'',
'',
'{shortName}
',
'',
'',
' ',
'
'
);
this.detailsTemplate.compile();
},
showDetails : function(){
var selNode = this.view.getSelectedNodes();
if(Ext.getCmp('img-detail-panel')!=undefined){
var detailEl = Ext.getCmp('img-detail-panel').body;
if(selNode && selNode.length > 0){
selNode = selNode[0];
selectedNode = selNode;
Ext.getCmp('ok-btn').enable();
Ext.getCmp('delete_button').enable();
var data = this.lookup[selNode.id];
detailEl.hide();
this.detailsTemplate.overwrite(detailEl, data);
detailEl.slideIn('l', {stopFx:true,duration:.2});
}else{
Ext.getCmp('ok-btn').disable();
Ext.getCmp('delete_button').disable();
detailEl.update('');
}
}
},
filter : function(){
var filter = Ext.getCmp('filter');
this.view.store.filter('name', filter.getValue());
this.view.select(0);
},
sortImages : function(){
var v = Ext.getCmp('sortSelect').getValue();
this.view.store.sort(v, v == 'name' ? 'asc' : 'desc');
this.view.select(0);
},
reset : function(){
if(this.win.rendered){
Ext.getCmp('filter').reset();
this.view.getEl().dom.scrollTop = 0;
}
this.view.store.clearFilter();
this.view.select(0);
},
doCallback : function(){
var selNode = this.view.getSelectedRecords()[0];
var callback = this.callback;
var lookup = this.lookup;
var rootel=this.rootel;
var iswin=this.win;
var data = selNode.data.url;
var size=selNode.data.size;
var sizeString=selNode.data.sizeString;
callback(data,rootel,iswin,size,sizeString);
this.win.destroy();
},
onLoadException : function(v,o){
this.view.getEl().update('',
'Názov:',
'{name}',
'Veľkosť:',
'{sizeString}',
'Posledná zmena:',
'{dateString}
',
'Neúspešný prenos súboru
');
}
};
String.prototype.ellipse = function(maxLength){
if(this.length > maxLength){
return this.substr(0, maxLength-3) + '...';
}
return this;
};
Ext.reg("twintrigger",Ext.form.TwinTriggerField);
// ----- TwinCombo.js
Ext.ux.TwinComboBox = Ext.extend(Ext.form.ComboBox,{
initComponent : function(){
// Ext.apply(this, config);
//Ext.apply(this.initialConfig, config);
Ext.ux.TwinComboBox.superclass.initComponent.apply(this, arguments);
Ext.form.TwinTriggerField.prototype.initComponent.apply(this, arguments);
},
getTrigger : Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger : Ext.form.TwinTriggerField.prototype.initTrigger,
trigger2Class : 'x-form-search-trigger',
hideTrigger1 : false,
onTrigger1Click : function(){
this.onTriggerClick();
}
,onTrigger2Click : function(){
//console.log(this);
//this.collapse();
this.t2win = new Ext.Window({
width:800,
layout: "fit",
onEsc: Ext.emptyFn,
autoLoad: {url: this["listWindowUrl"], scripts: true}
});
var twid=this;
this.t2win.show("body");
this.t2win.on("beforeclose",function(){
if(twid.mode=="local"){
//console.log(twid.store);
} else {
if(twid.reloaded==1) {twid.fireEvent("afteredit",twid);return true;} else {twid.store.reload({callback:function(){twid.reloaded=1;twid.t2win.close();}}); return false;}}
});
return true;
}
});
// register xtype
Ext.reg('twincombo', Ext.ux.TwinComboBox);
// eof
// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Ext.ux.MetaForm
*
* @author Ing. Jozef Sakalos
* @copyright (c) 2008, by Ing. Jozef Sakalos
* @date 6. February 2007
* @version $Id: Ext.ux.MetaForm.js 231 2008-05-02 08:59:46Z jozo $
*
* @license Ext.ux.MetaForm is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/
/*global Ext */
// isArray is in SVN only
if(!Ext.isArray) {
Ext.isArray = function(v) {
return v && 'function' === typeof v.pop;
};
}
/**
*
* @class Ext.ux.MetaForm
* @extends Ext.FormPanel
*/
Ext.ux.MetaForm = Ext.extend(Ext.FormPanel, {
// configurables
autoInit:true
,border:false
,frame:true
,loadingText:'Loading...'
,savingText:'Saving...'
,buttonMinWidth:90
,columnCount:1
/**
* createButtons {Array} array of buttons to create
* valid values are ['meta', 'load', defaults', 'reset', 'save', 'ok', 'cancel']
*/
/**
* ignoreFields: {Array} of field names to ignore when received in metaData
*/
// {{{
,initComponent:function() {
// create one item to avoid error
Ext.apply(this, {
items:this.items || {}
}); // eo apply
// get buttons if we have button creation routines
if('function' === typeof this.getButton) {
this.buttons = this.getButtons();
}
// call parent
Ext.ux.MetaForm.superclass.initComponent.apply(this, arguments);
this.addEvents('cancel', 'ok');
// install event handlers on basic form
this.form.on({
beforeaction:{scope:this, fn:this.beforeAction}
,actioncomplete:{scope:this, fn:function(form, action) {
// (re) configure the form if we have (new) metaData
if('load' === action.type && action.result.metaData) {
this.onMetaChange(this, action.result.metaData);
}
// update bound data on successful submit
else if('submit' === action.type) {
this.updateBoundData();
}
}}
});
this.form.trackResetOnLoad = true;
} // eo function initComponent
// }}}
// {{{
/**
* private, changes order of execution in Ext.form.Action.Load::success
* to allow reading of data in this server request (otherwise data would
* be loaded to the form before onMetaChange is run from actioncomplete event
*/
,beforeAction:function(form, action) {
action.success = function(response) {
var result = this.processResponse(response);
if(result === true || !result.success || !result.data){
this.failureType = Ext.form.Action.LOAD_FAILURE;
this.form.afterAction(this, false);
return;
}
// original
// this.form.clearInvalid();
// this.form.setValues(result.data);
// this.form.afterAction(this, true);
this.form.afterAction(this, true);
this.form.clearInvalid();
this.form.setValues(result.data);
};
} // eo function beforeAction
// }}}
// {{{
/**
* @param {Object} data A reference to on external data object. The idea is that form can display/change an external object
*/
,bind:function(data) {
this.data = data;
this.form.setValues(this.data);
} // eo function bind
// }}}
// {{{
/**
* override this if you want a special buttons config
*/
,getButtons:function() {
var buttons = [];
if(Ext.isArray(this.createButtons)) {
Ext.each(this.createButtons, function(name) {
var button;
switch(name) {
case 'meta':
button = this.getButton(name, {
handler:this.load.createDelegate(this, [{params:{meta:true}}])
});
break;
case 'load':
button = this.getButton(name, {
scope:this
,handler:this.load
});
break;
case 'defaults':
button = this.getButton(name, {
scope:this
,handler:this.setDefaultValues
});
break;
case 'reset':
button = this.getButton(name, {
scope:this
,handler:this.reset
});
break;
case 'save':
case 'submit':
button = this.getButton(name, {
handler:this.submit.createDelegate(this, [{params:{cmd:'setPref'}}])
});
break;
case 'ok':
button = this.getButton(name, {
scope:this
,handler:this.onOk
});
break;
case 'cancel':
button = this.getButton(name, {
scope:this
,handler:this.onCancel
});
break;
}
if(button) {
Ext.apply(button, {
minWidth:this.buttonMinWidth
});
buttons.push(button);
}
}, this);
}
return buttons;
} // eo function getButtons
// }}}
// {{{
,getOptions:function(o) {
var options = {
url:this.url
,method:this.method || 'post'
};
Ext.apply(options, o);
options.params = Ext.apply(this.baseParams || {}, o.params);
return options;
} // eo function getOptions
// }}}
// {{{
/**
* @return {Object} object with name/value pairs using fields.getValue() methods
*/
,getValues:function() {
var values = {};
this.form.items.each(function(f) {
values[f.name] = f.getValue();
});
return values;
} // eo function getValues
// }}}
// {{{
,load:function(o) {
var options = this.getOptions(o);
if(this.loadingText) {
options.waitMsg = this.loadingText;
}
this.form.load(options);
} // eo function load
// }}}
// {{{
/**
* cancel button handler - fires cancel event only
*/
,onCancel:function() {
this.fireEvent('cancel', this);
} // eo function onCancel
// }}}
// {{{
/**
* Override this if you need a custom functionality
*
* @param {Ext.FormPanel} this
* @param {Object} meta Metadata
* @return void
*/
,onMetaChange:function(form, meta) {
this.removeAll();
// declare varables
var columns, colIndex, tabIndex, ignore = {};
// add column layout
this.add(new Ext.Panel({
layout:meta.formConfig ? meta.formConfig.layout : "column"
,anchor:'100%'
,border:false
,defaults:(function(){
this.columnCount = meta.formConfig ? meta.formConfig.columnCount || this.columnCount : this.columnCount;
return Ext.apply({}, meta.formConfig || {}, {
columnWidth:1/this.columnCount
,autoHeight:true
,border:false
,hideLabel:true
,layout:'form'
});
}).createDelegate(this)()
,items:(function(){
var items = [];
for(var i = 0; i < this.columnCount; i++) {
items.push({
defaults:this.defaults
,listeners:{
// otherwise basic form findField does not work
add:{scope:this, fn:this.onAdd}
}
});
}
return items;
}).createDelegate(this)()
}));
columns = this.items.get(0).items;
colIndex = 0;
tabIndex = 1;
if(Ext.isArray(this.ignoreFields)) {
Ext.each(this.ignoreFields, function(f) {
ignore[f] = true;
});
}
// loop through metadata colums or fields
// format follows grid column model structure
Ext.each(meta.columns || meta.fields, function(item) {
if(true === ignore[item.name]) {
return;
}
var config = Ext.apply({}, item.editor, {
name:item.name || item.dataIndex
,fieldLabel:item.fieldLabel || item.header
,defaultValue:item.defaultValue
,xtype:item.editor && item.editor.xtype ? item.editor.xtype : 'textfield'
});
// handle regexps
if(config.editor && config.editor.regex) {
config.editor.regex = new RegExp(item.editor.regex);
}
// to avoid checkbox misalignment
if('checkbox' === config.xtype) {
Ext.apply(config, {
boxLabel:' '
,checked:item.defaultValue
});
}
if(meta.formConfig.msgTarget) {
config.msgTarget = meta.formConfig.msgTarget;
}
// add to columns on ltr principle
config.tabIndex = tabIndex++;
columns.get(colIndex++).add(config);
colIndex = colIndex === this.columnCount ? 0 : colIndex;
}, this);
this.doLayout();
} // eo function onMetaChange
// }}}
// {{{
,onOk:function() {
this.updateBoundData();
this.fireEvent('ok', this);
}
// }}}
// {{{
,onRender:function() {
// call parent
Ext.ux.MetaForm.superclass.onRender.apply(this, arguments);
this.form.waitMsgTarget = this.el;
if(true === this.autoInit) {
this.load({params:{meta:true}});
}
else if ('object' === typeof this.autoInit) {
this.load(this.autoInit);
}
} // eo function onRender
// }}}
// {{{
/**
* private, removes all items from both formpanel and basic form
*/
,removeAll:function() {
// remove border from header
var hd = this.body.up('div.x-panel-bwrap').prev();
if(hd) {
hd.applyStyles({border:'none'});
}
// remove form panel items
this.items.each(this.remove, this);
// remove basic form items
this.form.items.clear();
} // eo function removeAllItems
// }}}
// {{{
,reset:function() {
this.form.reset();
} // eo function reset
// }}}
// {{{
,setDefaultValues:function() {
this.form.items.each(function(item) {
item.setValue(item.defaultValue);
});
} // eo function setDefaultValues
// }}}
// {{{
,submit:function(o) {
var options = this.getOptions(o);
if(this.savingText) {
options.waitMsg = this.savingText;
}
this.form.submit(options);
} // eo function submit
// }}}
// {{{
,updateBoundData:function() {
if(this.data) {
Ext.apply(this.data, this.getValues());
}
} // eo function updateBoundData
// }}}
});
// register xtype
Ext.reg('metaform', Ext.ux.MetaForm);
// eof
Ext.override(Ext.form.Field, {
markInvalid : function(msg){
if(!this.rendered || this.preventMark){
return;
}
var markEl = this.markEl || this.el;
markEl.addClass(this.invalidClass);
msg = msg || this.invalidText;
switch(this.msgTarget){
case 'qtip':
markEl.dom.qtip = msg;
markEl.dom.qclass = 'x-form-invalid-tip';
if(Ext.QuickTips){
Ext.QuickTips.enable();
}
break;
case 'title':
markEl.dom.title = msg;
break;
case 'under':
if(!this.errorEl){
var elp = this.getErrorCt();
if(!elp){
markEl.dom.title = msg;
break;
}
this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
this.errorEl.setWidth(elp.getWidth(true)-20);
}
this.errorEl.update(msg);
Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
break;
case 'side':
if(!this.errorIcon){
var elp = this.getErrorCt();
if(!elp){
markEl.dom.title = msg;
break;
}
this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
}
this.alignErrorIcon();
this.errorIcon.dom.qtip = msg;
this.errorIcon.dom.qclass = 'x-form-invalid-tip';
this.errorIcon.show();
this.on('resize', this.alignErrorIcon, this);
break;
default:
var t = Ext.getDom(this.msgTarget);
t.innerHTML = msg;
t.style.display = this.msgDisplay;
break;
}
this.fireEvent('invalid', this, msg);
},
clearInvalid : function(){
if(!this.rendered || this.preventMark){
return;
}
var markEl = this.markEl || this.el;
markEl.removeClass(this.invalidClass);
switch(this.msgTarget){
case 'qtip':
markEl.dom.qtip = '';
break;
case 'title':
markEl.dom.title = '';
break;
case 'under':
if(this.errorEl){
Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
}else{
markEl.dom.title = '';
}
break;
case 'side':
if(this.errorIcon){
this.errorIcon.dom.qtip = '';
this.errorIcon.hide();
this.un('resize', this.alignErrorIcon, this);
}else{
markEl.dom.title = '';
}
break;
default:
var t = Ext.getDom(this.msgTarget);
t.innerHTML = '';
t.style.display = 'none';
break;
}
this.fireEvent('valid', this);
},
alignErrorIcon : function(){
this.errorIcon.alignTo(this.markEl || this.el, 'tl-tr', [2, 0]);
}
});
Ext.override(Ext.form.Checkbox, {
onRender: function(ct, position){
Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
if(this.inputValue !== undefined){
this.el.dom.value = this.inputValue;
}
this.el.removeClass(this.baseCls);
//this.el.addClass('x-hidden');
this.innerWrap = this.el.wrap({
//tabIndex: this.tabIndex,
cls: this.baseCls+'-wrap-inner'
});
this.wrap = this.innerWrap.wrap({cls: this.baseCls+'-wrap'});
this.imageEl = this.innerWrap.createChild({
tag: 'img',
src: Ext.BLANK_IMAGE_URL,
cls: this.baseCls
});
if(this.boxLabel){
this.labelEl = this.innerWrap.createChild({
tag: 'label',
htmlFor: this.el.id,
cls: 'x-form-cb-label',
html: this.boxLabel
});
}
//this.imageEl = this.innerWrap.createChild({
//tag: 'img',
//src: Ext.BLANK_IMAGE_URL,
//cls: this.baseCls
//}, this.el);
if(this.checked){
this.setValue(true);
}else{
this.checked = this.el.dom.checked;
}
this.originalValue = this.checked;
this.markEl = this.innerWrap;
},
afterRender: function(){
Ext.form.Checkbox.superclass.afterRender.call(this);
//this.wrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
},
initCheckEvents: function(){
//this.innerWrap.removeAllListeners();
this.innerWrap.addClassOnOver(this.overCls);
this.innerWrap.addClassOnClick(this.mouseDownCls);
this.innerWrap.on('click', this.onClick, this);
//this.innerWrap.on('keyup', this.onKeyUp, this);
if(this.validationEvent !== false){
this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
}
},
onFocus: function(e) {
Ext.form.Checkbox.superclass.onFocus.call(this, e);
//this.el.addClass(this.focusCls);
this.innerWrap.addClass(this.focusCls);
},
onBlur: function(e) {
Ext.form.Checkbox.superclass.onBlur.call(this, e);
//this.el.removeClass(this.focusCls);
this.innerWrap.removeClass(this.focusCls);
},
onClick: function(e){
if (e.getTarget().htmlFor != this.el.dom.id) {
if (e.getTarget() != this.el.dom) {
this.el.focus();
}
if (!this.disabled && !this.readOnly) {
this.toggleValue();
}
}
//e.stopEvent();
},
onEnable: Ext.form.Checkbox.superclass.onEnable,
onDisable: Ext.form.Checkbox.superclass.onDisable,
onKeyUp: undefined,
setValue: function(v) {
var checked = this.checked;
this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
if(this.rendered){
this.el.dom.checked = this.checked;
this.el.dom.defaultChecked = this.checked;
//this.wrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
}
if(checked != this.checked){
this.fireEvent("check", this, this.checked);
if(this.handler){
this.handler.call(this.scope || this, this, this.checked);
}
}
},
getResizeEl: function() {
//if(!this.resizeEl){
//this.resizeEl = Ext.isSafari ? this.wrap : (this.wrap.up('.x-form-element', 5) || this.wrap);
//}
//return this.resizeEl;
return this.wrap;
},
markInvalid: Ext.form.Checkbox.superclass.markInvalid,
clearInvalid: Ext.form.Checkbox.superclass.clearInvalid,
validationEvent: 'click',
validateOnBlur: false,
validateValue: function(value){
if(this.vtype){
var vt = Ext.form.VTypes;
if(!vt[this.vtype](value, this)){
this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
return false;
}
}
if(typeof this.validator == "function"){
var msg = this.validator(value);
if(msg !== true){
this.markInvalid(msg);
return false;
}
}
return true;
}
});
Ext.override(Ext.form.Radio, {
checkedCls: 'x-form-radio-checked',
markInvalid: Ext.form.Radio.superclass.markInvalid,
clearInvalid: Ext.form.Radio.superclass.clearInvalid
});
// Ext.ux.grid.GridSummary.js
// summary plugin for Grid
Ext.ns('Ext.ux.grid');
Ext.ux.grid.GridSummary = function(config) {
Ext.apply(this, config);
};
Ext.extend(Ext.ux.grid.GridSummary, Ext.util.Observable, {
init : function(grid) {
this.grid = grid;
this.cm = grid.getColumnModel();
this.view = grid.getView();
var v = this.view;
// override GridView's onLayout() method
v.onLayout = this.onLayout;
v.afterMethod('render', this.refreshSummary, this);
v.afterMethod('refresh', this.refreshSummary, this);
v.afterMethod('syncScroll', this.syncSummaryScroll, this);
v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
// update summary row on store's add/remove/clear/update events
grid.store.on({
add: this.refreshSummary,
remove: this.refreshSummary,
clear: this.refreshSummary,
update: this.refreshSummary,
scope: this
});
if (!this.rowTpl) {
this.rowTpl = new Ext.Template(
'',
'',
'
',
'
'
);
this.rowTpl.disableFormats = true;
}
this.rowTpl.compile();
if (!this.cellTpl) {
this.cellTpl = new Ext.Template(
'{value}
',
"',
'',
'
'
);
this.rowTpl.disableFormats = true;
}
this.rowTpl.compile();
if(!this.cellTpl){
this.cellTpl = new Ext.Template(
'{value}
',
"' + msg + '
';
}
}
});
Ext.grid.GroupSummary.Calculations = {
'sum' : function(v, record, field){
return v + (record.data[field]||0);
},
'count' : function(v, record, field, data){
return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
},
'max' : function(v, record, field, data){
var v = record.data[field];
var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
return v > max ? (data[field+'max'] = v) : max;
},
'min' : function(v, record, field, data){
var v = record.data[field];
var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
return v < min ? (data[field+'min'] = v) : min;
},
'average' : function(v, record, field, data){
var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
return t === 0 ? 0 : t / c;
}
}
Ext.grid.HybridSummary = Ext.extend(Ext.grid.GroupSummary, {
calculate : function(rs, cs){
var gcol = this.view.getGroupField();
var gvalue = rs[0].data[gcol];
var gdata = this.getSummaryData(gvalue);
return gdata || Ext.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
},
updateSummaryData : function(groupValue, data, skipRefresh){
var json = this.grid.store.reader.jsonData;
if(!json.summaryData){
json.summaryData = {};
}
json.summaryData[groupValue] = data;
if(!skipRefresh){
this.refreshSummary(groupValue);
}
},
getSummaryData : function(groupValue){
var json = this.grid.store.reader.jsonData;
if(json && json.summaryData){
return json.summaryData[groupValue];
}
return null;
}
});
Ext.menu.ComboItem = function(config){
Ext.menu.ComboItem.superclass.constructor.call(this, new Ext.form.ComboBox(config), config);
/** The Ext.DatePicker object @type Ext.DatePicker */
this.combo = this.component;
// this.addEvents('select');
this.combo.on("render", function(combo){
combo.getEl().swallowEvent("click");
combo.getEl().swallowEvent("activate");
combo.getEl().swallowEvent("select");
});
this.combo.on("select", this.onSelect, this);
};
Ext.extend(Ext.menu.ComboItem, Ext.menu.Adapter, {
// private
lazyRender:true,
hideOnClick: false,
hideParent:false,
canActivate: true,
onSelect : function(combo, date){
Ext.menu.ComboItem.superclass.handleClick.call(this);
}
});
Ext.menu.ComboMenu = function(config){
Ext.menu.ComboMenu.superclass.constructor.call(this, config);
this.plain = true;
var di = new Ext.menu.ComboItem(config);
this.add(di);
this.combo = di.combo;
//this.relayEvents(di, ["select"]);
};
Ext.extend(Ext.menu.ComboMenu, Ext.menu.Menu, {
lazyRender: true,
// private
beforeDestroy : function() {
this.combo.destroy();
}
});