Commit ed955bf8 authored by ecrombag's avatar ecrombag

- Updated various client controls

- Introduced tuple and record containers
- Moved static rendering to the client side, using staticDisplay-flag, instead of using VHtmlDisplay display-mode in GenVisualize

git-svn-id: https://svn.cs.ru.nl/repos/iTask-system/trunk@978 63da3aa8-80fd-4f01-9db8-e6ea747a3da2
parent 634759c4
......@@ -23,7 +23,6 @@
,{"text":"StringControl.js","path":"src/js/tui/"}
,{"text":"TimeControl.js","path":"src/js/tui/"}
,{"text":"UsernameControl.js","path":"src/js/tui/"}
,{"text":"DisplayControl.js","path":"src/js/tui/"}
,{"text":"ListContainer.js","path":"src/js/tui/"}
,{"text":"RecordContainer.js","path":"src/js/tui/"}
,{"text":"TupleContainer.js","path":"src/js/tui/"}
......
......@@ -30,7 +30,7 @@ itasks.ListPanel = Ext.extend(Ext.Panel,
var addButtonPanel = new Ext.Panel({
layout: 'ux.html',
html: '<table><tr><td style="font-style: italic; padding-right: 5px;">The list is empty.</td><td><span name="button"></span></td></tr></table>',
items: [addButton],
items: (this.staticDisplay)?[]:[addButton],
baseCls: 'list-item'
});
......@@ -119,7 +119,7 @@ itasks.list.Toolbox = Ext.extend(Ext.Panel,{
itasks.list.Item = Ext.extend(Ext.Panel,{
initComponent: function(){
Ext.apply(this,
{ border: false
, cls: 'list-item'
......@@ -138,8 +138,8 @@ itasks.list.Item = Ext.extend(Ext.Panel,{
itasks.list.Item.superclass.initComponent.apply(this,arguments);
},
afterRender: function(){
this.add(this.toolbox);
afterRender: function(){
if(!this.ownerCt.staticDisplay) this.add(this.toolbox);
itasks.list.Item.superclass.afterRender.call(this,arguments);
}
});
......
......@@ -7,7 +7,7 @@ itasks.ttc.FormContainer = Ext.extend(Ext.Panel, {
this.tbar = this.content.tbar;
this.replaceItems = [];
delete this.content;
Ext.apply(this,
{ layout: 'anchor'
, taskUpdates : {}
......@@ -93,13 +93,23 @@ itasks.ttc.FormContainer = Ext.extend(Ext.Panel, {
itasks.ttc.common.attachTaskHandlers(newct);
}
break;
case "TUIAddTo":
var ct = Ext.getCmp(update[1]);
if(ct){
ct.add(update[2]);
ct.doLayout();
itasks.ttc.common.attachTaskHandlers(ct);
}
break;
case "TUIRemove":
var ct = Ext.getCmp(update[1]);
if(ct) {
var oct = ct.ownerCt;
oct.remove(update[1]);
oct.remove(update[1]);
oct.ownerCt.doLayout();
oct.ownerCt.syncSize();
}
......@@ -125,7 +135,7 @@ itasks.ttc.FormContainer = Ext.extend(Ext.Panel, {
oct.doLayout();
oct.syncSize();
oct.ownerCt.doLayout();
//oct.ownerCt.doLayout();
//this.attachTaskHandlers(newct);
itasks.ttc.common.attachTaskHandlers(newct);
......@@ -140,6 +150,7 @@ itasks.ttc.FormContainer = Ext.extend(Ext.Panel, {
break;
case "TUISetValue":
var ct = Ext.getCmp(update[1]);
if(ct && ct.setValue) {
//suspend events to prevent check-event for checkbox
ct.suspendEvents();
......@@ -152,8 +163,8 @@ itasks.ttc.FormContainer = Ext.extend(Ext.Panel, {
cur.setValue(false);
//...then set new one
ct.setValue(true);
}
} else {
}
}else {
ct.setValue(update[2]);
}
ct.resumeEvents();
......
......@@ -30,6 +30,7 @@ itasks.ttc.common.attachTaskHandlers = function(comp,taskId){
var value;
switch(this.xtype) {
case "itasks.tui.Date": value = this.getRawValue(); break;
case "radiogroup": value = this.getValue().value; break;
case "checkboxgroup": value = checkboxValues(arguments[1]); break;
default: value = this.getValue();
......
......@@ -2,12 +2,28 @@ Ext.ns("itasks.tui");
itasks.tui.BoolControl = Ext.extend(Ext.form.Checkbox,{
initComponent: function() {
if(this.staticDisplay){
this.autoCreate = {tag: 'span', html: this.value};
}
this.hideLabel = this.fieldLabel == null;
this.fieldLabel = itasks.util.fieldLabel(this.optional,this.fieldLabel);
this.allowBlank = this.optional;
this.checked = this.value == "True";
if(this.value == "") delete this.value;
itasks.tui.BoolControl.superclass.initComponent.apply(this,arguments);
},
setValue: function(value){
if(this.staticDisplay){
this.update(value);
}else{
if(value == "True") value = true;
itasks.tui.BoolControl.superclass.setValue.call(this,value);
}
}
});
......
Ext.ns('itasks.tui');
itasks.tui.ConstructorControl = Ext.extend(Ext.Panel,{
initComponent : function(){
//this.title = "Constructor Test";
this.hideLabel = this.fieldLabel == null;
this.fieldLabel = itasks.util.fieldLabel(this.optional,this.fieldLabel);
//this.width = '100%';
this.unstyled = true;
var store = [["","Select..."]];
for(var i=0; i<this.consValues.length; i++){
store[store.length] = [this.consValues[i],this.consValues[i]];
}
if(!this.staticDisplay){
this.consField = new Ext.form.ComboBox({
name: this.name+'c',
id: this.id+'c',
triggerAction: 'all',
editable: false,
store: store,
value: store[(this.consSelIdx+1)][1],
hideLabel: true,
style: 'margin-bottom: 4px'
});
}else{
this.consField = {
id : this.id+'c',
staticDisplay: true,
html: store[(this.consSelIdx+1)][1],
hideLabel: true,
unstyled: true,
bodyStyle: 'margin-bottom: 4px'
}
}
this.consField.setValue = function(value){
if(this.staticDisplay){
this.update(value);
}else{
Ext.form.ComboBox.superclass.setValue.call(this,value);
}
}
this.items = [this.consField].concat(this.items);
itasks.tui.ConstructorControl.superclass.initComponent.apply(this,arguments);
}
});
Ext.reg('itasks.tui.Constructor',itasks.tui.ConstructorControl);
\ No newline at end of file
......@@ -9,6 +9,10 @@ itasks.tui.CurrencyControl = Ext.extend(Ext.form.TextField,{
itasks.tui.CurrencyControl.superclass.initEvents.call(this);
},
initComponent: function() {
if(this.staticDisplay){
this.autoCreate = {tag: 'div', style: 'overflow: auto; padding-top: 4px', html: this.value};
}
this.hideLabel = this.fieldLabel == null;
this.fieldLabel = itasks.util.fieldLabel(this.optional,this.fieldLabel);
this.allowBlank = this.optional;
......@@ -44,6 +48,13 @@ itasks.tui.CurrencyControl = Ext.extend(Ext.form.TextField,{
},
beforeBlur: function() {
this.setValue(this.normalize(this.getRawValue()));
},
setValue: function(value){
if(this.staticDisplay){
this.update(value);
}else{
itasks.tui.CurrencyControl.superclass.setValue.call(this,value);
}
}
});
......
......@@ -3,14 +3,32 @@ Ext.ns("itasks.tui");
itasks.tui.DateControl = Ext.extend(Ext.form.DateField,{
format: "d-m-Y",
initComponent: function() {
if(this.staticDisplay){
this.autoCreate = {tag: 'div', style: 'padding-top: 4px', html: this.value};
}
this.hideLabel = this.fieldLabel == null;
this.fieldLabel = itasks.util.fieldLabel(this.optional,this.fieldLabel);
this.allowBlank = this.optional;
if(this.value == "") delete this.value;
itasks.tui.DateControl.superclass.initComponent.apply(this,arguments);
itasks.tui.DateControl.superclass.initComponent.apply(this,arguments);
},
getValue: function() {
return this.getRawValue();
//getValue: function() {
//return this.getRawValue();
//},
afterRender: function(ct,position){
itasks.tui.DateControl.superclass.afterRender.call(this,ct,position);
if(this.staticDisplay){
this.el.next().remove();
}
},
setValue: function(value){
if(this.staticDisplay){
this.update(value);
}else{
itasks.tui.DateControl.superclass.setValue.call(this,value);
}
}
});
......
Ext.ns('itasks.tui');
itasks.tui.DisplayControl = Ext.extend(Ext.Panel,{
width: '100%',
fieldClass: 'x-form-field',
autoScroll: true,
initComponent: function(){
this.hideLabel = this.fieldLabel == null;
this.fieldLabel = itasks.util.fieldLabel(this.optional,this.fieldLabel);
this.unstyled = true;
this.layout = 'form';
this.panel = {
xtype: 'panel',
html: this.html,
unstyled: true
}
delete this.html;
Ext.apply(this,
{ items: [this.panel]
});
for(var i=0; i< this.formItems.length; i++){
this.formItems[i][1][0].hidden = true;
this.items[this.items.length] = this.formItems[i][1][0];
}
itasks.tui.DisplayControl.superclass.initComponent.apply(this,arguments);
},
afterRender: function(){
itasks.tui.DisplayControl.superclass.afterRender.call(this,arguments);
(this.moveActiveItems).defer(50,this);
},
moveActiveItems: function(){
for(var i=0; i< this.formItems.length; i++){
var fitem = this.formItems[i];
var phid = fitem[0];
var elid = fitem[1][0].id;
var ph = Ext.get(phid);
var cmp = Ext.getCmp(elid);
var el = cmp.getEl();
el.replace(ph);
cmp.show();
this.doLayout();
}
this.doLayout();
this.findParentByType(itasks.ttc.FormContainer).doLayout();
}
});
Ext.reg('itasks.tui.Display',itasks.tui.DisplayControl);
/*
placeDelayedItems : function(){
for(var i=0; i < this.replaceItems.length; i++){
var phid = this.replaceItems[i].applyToPHid;
delete this.replaceItems[i].applyToPHid;
var el = Ext.get(this.replaceItems[i].id);
var phEl = Ext.get(phid);
el.replace(phEl);
el.removeClass('x-hidden');
}
},
splitItems: function(data,ct){
this.replaceItems = [];
if(data instanceof Array){
for(var i=0; i<data.length;i++){
if(data[i].applyToPHid != null){
data[i].cls = (data[i].cls || '')+' x-hidden';
ct.replaceItems[ct.replaceItems.length] = data[i];
}else if(data[i].items){
ct.splitItems(data[i].items,ct);
}
}
}else {
if(data.applyToPHid != null){
data.cls = (data.cls || '')+' x-hidden';
ct.replaceItems[ct.replaceItems.length] = data;
}
if(data.items != null){
ct.splitItems(data.items,ct);
}
}
}
*/
\ No newline at end of file
Ext.ns('itasks.tui');
itasks.tui.DocumentControl = Ext.extend(Ext.Panel,
{
initComponent: function(){
Ext.apply(this,
{ unstyled: true
, layout: 'anchor'
, height: 26
, bodyStyle: 'margin: 0px 0px 2px 0px'
, width: 500
, allowUpload: true
, defaults: {
height: 26,
bodyStyle: 'padding: 0px 2px 0px 0px;',
anchor: '99%'
}});
itasks.tui.DocumentControl.superclass.initComponent.apply(this,arguments);
this.docInfo = Ext.decode(this.docInfo);
this.addClass('x-form-document');
},
afterRender: function(arguments){
itasks.tui.DocumentControl.superclass.afterRender.call(this,arguments);
if(this.staticDisplay){
if(this.docInfo.content != "EmptyDocument") this.showDownloadPanel();
else {
this.removeAll();
this.add({html: 'Empty Document', unstyled: true});
}
}else{
if(this.docInfo.content != "EmptyDocument") this.showDownloadPanel();
else this.showUploadPanel(false);
}
},
showUploadPanel: function(showCancel){
this.removeAll();
this.add(new itasks.tui.document.UploadPanel({name: this.name, showCancel: showCancel}));
},
showDownloadPanel: function(){
this.removeAll();
this.add(new itasks.tui.document.DownloadPanel({docInfo: this.docInfo, staticDisplay: this.staticDisplay}));
}
});
Ext.ns('itasks.tui.document');
itasks.tui.document.DownloadPanel = Ext.extend(Ext.form.FormPanel,
{
initComponent: function(){
this.dlButton = new Ext.Button({
text: 'Download',
iconCls: 'x-form-document-download-icon',
renderTarget: 'td.x-form-document-download-button',
handler: function(src,evt){
var form = this.findParentByType('itasks.tui.document.download');
var wt = this.findParentByType('itasks.work');
if(form.getForm().isValid()){
form.getForm().submit({
url: itasks.config.serverUrl+"/document/download",
params: { _session : itasks.app.session
, docInfo : Ext.encode(form.docInfo)
},
waitMsg: null,
failure: function(form, o){
Ext.Msg.alert('Error',o.result.errors,function(){wt.refresh()});
}
});
}
}
});
this.editButton = new Ext.Button({
text : '',
iconCls: 'x-form-document-edit-icon',
renderTarget: 'td.x-form-document-edit-button',
handler: function(src,evt){
var form = this.findParentByType('itasks.tui.Document');
form.showUploadPanel(true);
form.doLayout();
}
});
this.trashButton = new Ext.Button({
text : '',
iconCls: 'x-form-document-trash-icon',
renderTarget: 'td.x-form-document-trash-button',
handler: function(src,evt){
var form = this.findParentByType("itasks.tui.document.download");
var tf = this.findParentByType(itasks.ttc.FormContainer);
var wt = this.findParentByType("itasks.work");
var dp = this.findParentByType("itasks.tui.Document");
var params = { _session : itasks.app.session
, _targettask : tf.taskId
, _maintask : wt.taskId
, _debug : itasks.app.debug ? 1 : 0
, _name : dp.name
, docInfo: Ext.encode(dp.docInfo)
};
form.getForm().submit({
url: itasks.config.serverUrl+"/document/clear",
params: params,
success: function(form, response){
wt.refresh();
},
failure: function(form, response){
itasks.app.restart("Document transaction failed");
return;
}
});
}
});
Ext.apply(this,
{ layout: 'ux.html'
, unstyled: true
, fileUpload: true
, html:
'<div style="position: relative; top: 0px;"><table><tr><td class="x-form-document-icon"></td><td class="x-form-document-fileinfo"></td><td class="x-form-document-edit-button"></td><td class="x-form-document-trash-button"></td><td class="x-form-document-download-button"></td></tr></table></div>'
, items: [
{ xtype: 'displayfield'
, renderTarget: 'td.x-form-document-fileinfo'
, value: 'Test'
},
{ xtype: 'panel'
, renderTarget: 'td.x-form-document-icon'
, width: 16
, height: 16
, unstyled: true
},
(this.staticDisplay)?{}:this.editButton,
(this.staticDisplay)?{}:this.trashButton,
this.dlButton
]
});
itasks.tui.document.DownloadPanel.superclass.initComponent.apply(this,arguments);
var filename = this.docInfo.content[1].fileName;
var filesize = this.printFileSize(this.docInfo.content[1].size);
this.items.items[0].value = filename+" ("+filesize+")"
this.items.items[1].addClass(this.iconMimeType(this.docInfo.content[1].mimeType));
},
iconMimeType: function(mime){
if(mime.match("application/pdf")){
return('file-type-application-pdf-icon');
}
else if(mime.match('^image')){
return('file-type-image-icon');
}
else if(mime.match("^text")){
return('file-type-text-icon');
}
else if(mime.match("^application")){
return('file-type-application-icon');
}
else if(mime.match("^audio")){
return('file-type-audio-icon');
}
else if(mime.match("^video")){
return('file-type-video-icon');
}
else{
return('file-type-plain-icon');
}
},
printFileSize: function(size){
if(size > 1048576){
return (size/1048576).toFixed(1)+" Mbytes"
}else if(size > 1024){
return (size/1024).toFixed(1)+" Kbytes"
}else{
return size+" bytes"
}
}
});
itasks.tui.document.UploadPanel = Ext.extend(Ext.form.FormPanel,
{
initComponent: function(){
this.uplButton = new Ext.Button({
text: 'Upload',
iconCls: 'x-form-document-upload-icon',
renderTarget: 'td.x-form-document-upload-button',
handler: function(src,evt){
var form = this.findParentByType("itasks.tui.document.upload");
var tf = this.findParentByType(itasks.ttc.FormContainer);
var wt = this.findParentByType("itasks.work");
var dp = this.findParentByType("itasks.tui.Document");
if(form.getForm().isValid()){
form.getForm().submit({
url: itasks.config.serverUrl+"/document/upload",
params:
{ _session : itasks.app.session
, _targettask : tf.taskId
, _maintask : wt.taskId
, _debug : itasks.app.debug ? 1 : 0
, _name : dp.name
, docInfo: Ext.encode(dp.docInfo)
},
waitMsg: 'Uploading document. Please wait..',
success: function(form,response)
{
wt.refresh();
},
failure: function(form,response)
{
itasks.app.restart("Document transaction failed");
return;
}
});
}
}
});
this.cancelButton = new Ext.Button({
text : '',
iconCls : 'x-form-document-cancel-icon',
renderTarget : 'td.x-form-document-cancel-button',
handler: function(src,evt){
var form = this.findParentByType('itasks.tui.Document');
form.showDownloadPanel();
form.doLayout();
}
});
Ext.apply(this,
{ fileUpload: true
, unstyled: true
, layout: 'hbox'
, defaults: {
allowBlank: false,
msgTarget: 'qtip',
border: false,
height: 24
}
, items : [
{ xtype: 'fileuploadfield',