| 1 |
Ext.ns('RefXMLTextArea');
|
| 2 |
|
| 3 |
Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';
|
| 4 |
|
| 5 |
RefXMLTextArea.CompositeUI = Ext.extend(
|
| 6 |
Ext.form.TextArea,
|
| 7 |
{
|
| 8 |
consoleLog: false
|
| 9 |
,buttonSpacing: 2
|
| 10 |
,fieldLabel: 'XML'
|
| 11 |
,height:450
|
| 12 |
,parentForm: ''
|
| 13 |
,validated: false
|
| 14 |
,numberColWidth: '5ex'
|
| 15 |
,maxLines: 700
|
| 16 |
,style: {position: 'absolute', top :0, left: '5ex'}
|
| 17 |
,cls: 'number-font'
|
| 18 |
,enableKeyEvents: true
|
| 19 |
,autoCreate:
|
| 20 |
{
|
| 21 |
tag: "textarea"
|
| 22 |
,style: "width:100px;height:60px;"
|
| 23 |
,autocomplete: "off"
|
| 24 |
,wrap: "off"
|
| 25 |
,id: 'ta' // this is needed to have horizontal scroll-bars. The other are the defaults!!
|
| 26 |
}
|
| 27 |
,initComponent:function()
|
| 28 |
{
|
| 29 |
RefXMLTextArea.CompositeUI.superclass.initComponent.apply(this,arguments);
|
| 30 |
if(this.consoleLog){
|
| 31 |
console.log('RefXMLTextArea.CompositeUI.initComponent consoleLog: ', this.consoleLog);
|
| 32 |
// console.log('RefXMLTextArea.CompositeUI.initComponent buttonLabel: ', this.buttonLabel);
|
| 33 |
}
|
| 34 |
}
|
| 35 |
// ,validator: function()
|
| 36 |
// {
|
| 37 |
// this.validated = false;
|
| 38 |
// return true;
|
| 39 |
// }
|
| 40 |
,onRender:function()
|
| 41 |
{
|
| 42 |
RefXMLTextArea.CompositeUI.superclass.onRender.apply(this, arguments);
|
| 43 |
|
| 44 |
|
| 45 |
if(this.consoleLog)
|
| 46 |
console.log('RefXMLTextArea.onRender called');
|
| 47 |
if(this.consoleLog)
|
| 48 |
console.log('RefXMLTextArea.onRender this.el is ', this.el);
|
| 49 |
// now the Composite is rendered, operate on it!!
|
| 50 |
// this.el is indeed the text area, whereae this.wrap becomes a div that is
|
| 51 |
// going to include the text area plus the other buttons!!!!
|
| 52 |
this.wrap = this.el.wrap(
|
| 53 |
{
|
| 54 |
cls: 'x-form-field-wrap',
|
| 55 |
style: {overflow: 'hidden'}
|
| 56 |
}
|
| 57 |
);
|
| 58 |
if(this.consoleLog)
|
| 59 |
console.log('RefXMLTextArea.onRender this.wrap is ', this.wrap);
|
| 60 |
|
| 61 |
this.on( 'change',function()
|
| 62 |
{
|
| 63 |
if(this.consoleLog)
|
| 64 |
console.log('RefXMLTextArea fired a change event');
|
| 65 |
this.validated = false;
|
| 66 |
});
|
| 67 |
this.number = this.wrap.createChild({ style: {position: 'absolute', top: 0, left: 0, width: '5ex', height: '500em'},
|
| 68 |
id: 'numbers'
|
| 69 |
},
|
| 70 |
this.el);
|
| 71 |
this.number.addClass('numbers-style');
|
| 72 |
this.number.addClass('number-font');
|
| 73 |
var string = '';
|
| 74 |
for(var no=1; no < this.maxLines; no++){
|
| 75 |
if(string.length>0)string = string + '<br>';
|
| 76 |
string = string + no;
|
| 77 |
}
|
| 78 |
|
| 79 |
this.number.insertHtml('afterBegin', string);
|
| 80 |
this.validateButton = new Ext.Button(
|
| 81 |
{
|
| 82 |
renderTo: this.wrap
|
| 83 |
,buttonSelector: 'em'
|
| 84 |
,cls: 'x-trigger-button'
|
| 85 |
,style:
|
| 86 |
{
|
| 87 |
position: 'absolute'
|
| 88 |
,right: 0
|
| 89 |
,bottom: 0
|
| 90 |
}
|
| 91 |
,text: 'Validate'
|
| 92 |
,handler: this.validateXML
|
| 93 |
,scope: this
|
| 94 |
}); //eo Button
|
| 95 |
|
| 96 |
this.loadFromPreviousButton = new Ext.Button(
|
| 97 |
{
|
| 98 |
renderTo: this.wrap
|
| 99 |
,buttonSelector: 'em'
|
| 100 |
,style: { position: 'absolute'
|
| 101 |
,right: 0
|
| 102 |
,bottom: this.validateButton.getEl().getHeight()+ this.buttonSpacing}
|
| 103 |
,text: 'Load Previous'
|
| 104 |
}); //eo loadFromPreviousButton
|
| 105 |
|
| 106 |
this.importButton = new Ext.ux.form.FileUploadField(
|
| 107 |
{
|
| 108 |
renderTo: this.wrap
|
| 109 |
,buttonText: 'Import...'
|
| 110 |
,buttonOnly: true
|
| 111 |
,cls: 'x-trigger-button'
|
| 112 |
,width: 'auto'
|
| 113 |
,personalStyle: {
|
| 114 |
position: 'absolute'
|
| 115 |
,top: 'auto'
|
| 116 |
,bottom: this.validateButton.getEl().getHeight()+ this.buttonSpacing + this.loadFromPreviousButton.getEl().getHeight() + this.buttonSpacing
|
| 117 |
,right: 0
|
| 118 |
}
|
| 119 |
,listeners: {
|
| 120 |
'fileselected': function(fb, v){
|
| 121 |
var form = Ext.getCmp(this.parentForm).getForm();
|
| 122 |
if(this.consoleLog)
|
| 123 |
console.log( form );
|
| 124 |
if(this.consoleLog)
|
| 125 |
console.log( form.isValid() );
|
| 126 |
form.submit(
|
| 127 |
{
|
| 128 |
url: "/cgi-bin/ReferencePythonCLI/driver.py"
|
| 129 |
,params:{
|
| 130 |
action: 'fileUpload'
|
| 131 |
}
|
| 132 |
,success: function(fp,o)
|
| 133 |
{
|
| 134 |
var text = Base64.decode(o.result.file);
|
| 135 |
this.validated = o.result.errors ? true : false;
|
| 136 |
Ext.Msg.show(
|
| 137 |
{
|
| 138 |
title: 'Upload Result'
|
| 139 |
,msg: Base64.decode(o.result.msg)
|
| 140 |
,icon: Ext.MessageBox.QUESTION
|
| 141 |
,buttons: Ext.Msg.OK
|
| 142 |
,width: 350
|
| 143 |
});
|
| 144 |
this.setValue(text);
|
| 145 |
}
|
| 146 |
,scope:this
|
| 147 |
});
|
| 148 |
// this.setValue(this.importButton.fileInput.dom.files[0].getAsBinary());
|
| 149 |
// var xml = this.fileInput.dom.files[0].getAsBinary();
|
| 150 |
}
|
| 151 |
,scope: this
|
| 152 |
}
|
| 153 |
}); //eo importButton
|
| 154 |
|
| 155 |
if(!this.width)
|
| 156 |
{
|
| 157 |
var validateBtnWidth = this.validateButton ? this.validateButton.getEl().getWidth() : 0;
|
| 158 |
var loadPreviousBtnWidth = this.loadFromPreviousButton ? this.loadFromPreviousButton.getEl().getWidth() : 0;
|
| 159 |
var importBtnWidth = this.importButton ? this.importButton.getEl().getWidth() : 0;
|
| 160 |
this.wrap.setWidth(this.el.getWidth()
|
| 161 |
+ Math.max(Math.max(validateBtnWidth,loadPreviousBtnWidth),importBtnWidth) + this.buttonSpacing);
|
| 162 |
/* Add Event handler that dynamically adjust the position of the
|
| 163 |
* div element that contains the number labels. */
|
| 164 |
this.on('keypress', this.positionNumberLabels);
|
| 165 |
this.el.dom.onscroll = this.positionNumberLabels;
|
| 166 |
}
|
| 167 |
} // eo function onRender
|
| 168 |
|
| 169 |
// Now keep the wrap size correct even onResize event
|
| 170 |
|
| 171 |
,positionNumberLabels: function()
|
| 172 |
{
|
| 173 |
Ext.get('numbers').dom.style.top = (Ext.get('ta').dom.scrollTop * -1 ) + 'px';
|
| 174 |
}
|
| 175 |
|
| 176 |
,onResize:function(w, h)
|
| 177 |
{
|
| 178 |
RefXMLTextArea.CompositeUI.superclass.onResize.apply(this, arguments);
|
| 179 |
this.wrap.setHeight(this.height);
|
| 180 |
|
| 181 |
var validateBtnWidth = this.validateButton ? this.validateButton.getEl().getWidth() : 0;
|
| 182 |
var loadPreviousBtnWidth = this.loadFromPreviousButton ? this.loadFromPreviousButton.getEl().getWidth() : 0;
|
| 183 |
var importBtnWidth = this.importButton ? this.importButton.button.getEl().getWidth() : 0;
|
| 184 |
if(typeof w == 'number')
|
| 185 |
this.el.setWidth(w - Math.max(Math.max(validateBtnWidth, loadPreviousBtnWidth),importBtnWidth)-this.number.getWidth()-this.buttonSpacing);
|
| 186 |
this.wrap.setWidth(w);
|
| 187 |
if(this.consoleLog)
|
| 188 |
console.log('RefXMLTextArea.onResize this.wrap ', this.wrap, this.wrap.id, this.wrap.getWidth());
|
| 189 |
if(this.consoleLog)
|
| 190 |
console.log('RefXMLTextArea.onResize this.el ', this.el, this.el.id, this.el.getWidth());
|
| 191 |
} //eo onResize function
|
| 192 |
,validateXML: function(button, event)
|
| 193 |
{
|
| 194 |
if(this.isValid())
|
| 195 |
{
|
| 196 |
if(this.consoleLog)
|
| 197 |
console.log('RefXMLTextArea.validateXML Here \'this\' is: ', this);
|
| 198 |
if(this.consoleLog)
|
| 199 |
console.log('RefXMLTextArea.validateXML Here \'this.getEl()\' is: ', this.getEl());
|
| 200 |
|
| 201 |
}
|
| 202 |
var xml = '<?xml version="1.0"?>\n';
|
| 203 |
xml += '<!DOCTYPE RefHistos SYSTEM "referenceHistoWeb.dtd">\n';
|
| 204 |
xml += '<RefHistos>\n';
|
| 205 |
xml += this.getEl().getValue();
|
| 206 |
xml += '</RefHistos>';
|
| 207 |
if(this.consoleLog)
|
| 208 |
console.log('RefXMLTextArea.validateXML xml: ', xml);
|
| 209 |
|
| 210 |
Ext.Ajax.request(
|
| 211 |
{
|
| 212 |
url : '/cgi-bin/ReferencePythonCLI/driver.py'
|
| 213 |
,method : 'post'
|
| 214 |
,params :
|
| 215 |
{
|
| 216 |
action: 'parseXML'
|
| 217 |
,xmlString : Base64.encode(xml)
|
| 218 |
}
|
| 219 |
,success: this.parseResponse
|
| 220 |
,failure: this.parseResponse
|
| 221 |
,scope:this
|
| 222 |
// success: parseData,
|
| 223 |
// failure: function() {Debbie.connectionLost(380,500);}
|
| 224 |
}
|
| 225 |
);
|
| 226 |
} // eo function validateXML
|
| 227 |
,parseResponse: function(response, request)
|
| 228 |
{
|
| 229 |
if(this.consoleLog)
|
| 230 |
console.log('RefTExtArea.parseResponse response is: ', response);
|
| 231 |
var obj = Ext.util.JSON.decode(response.responseText);
|
| 232 |
var error = 'Status:<br/>' + Base64.decode(obj.message);
|
| 233 |
Base64.decode(obj.message) == 'Syntax OK' ? this.validated = true : this.validated = false;
|
| 234 |
if(obj.Line)
|
| 235 |
error += '<br/>Line: ' + obj.Line;
|
| 236 |
if(obj.Column)
|
| 237 |
error += '<br/>Column: ' + obj.Column;
|
| 238 |
if(obj.xml)
|
| 239 |
{
|
| 240 |
var xml = obj.xml;
|
| 241 |
xml = xml.replace('<', '');
|
| 242 |
xml = xml.replace('>', '');
|
| 243 |
xml = xml.replace('"', '\"');
|
| 244 |
error += '<br/>XML: ' + xml;
|
| 245 |
|
| 246 |
}
|
| 247 |
Ext.Msg.show(
|
| 248 |
{
|
| 249 |
title: 'Validation Results'
|
| 250 |
,msg: error
|
| 251 |
,icon: Ext.MessageBox.QUESTION
|
| 252 |
,buttons: Ext.Msg.OK
|
| 253 |
,width: 350
|
| 254 |
});
|
| 255 |
} // eo function parseResponse
|
| 256 |
} // eo TextArea config declarations
|
| 257 |
);
|
| 258 |
|
| 259 |
|
| 260 |
|
| 261 |
|
| 262 |
|
| 263 |
Ext.reg('xmlTextAreaUI', RefXMLTextArea.CompositeUI);
|
