MRovere/ReferenceWebGUI/xmlTextArea_UI.js

Ext.ns('RefXMLTextArea');

Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';

RefXMLTextArea.CompositeUI = Ext.extend(
  Ext.form.TextArea,
  {
    consoleLog: false
    ,buttonSpacing: 2
    ,fieldLabel: 'XML'
    ,height:450
    ,parentForm: ''
    ,validated: false
    ,numberColWidth: '5ex'
    ,maxLines: 700
    ,style: {position: 'absolute', top :0, left: '5ex'}
    ,cls: 'number-font'
    ,enableKeyEvents: true
    ,autoCreate:
    {
      tag: "textarea"
      ,style: "width:100px;height:60px;"
      ,autocomplete: "off"
      ,wrap: "off"
      ,id: 'ta' // this is needed to have horizontal scroll-bars. The other are the defaults!!
    }
    ,initComponent:function()
    {
      RefXMLTextArea.CompositeUI.superclass.initComponent.apply(this,arguments);
      if(this.consoleLog){
        console.log('RefXMLTextArea.CompositeUI.initComponent consoleLog: ', this.consoleLog);
        //        console.log('RefXMLTextArea.CompositeUI.initComponent buttonLabel: ', this.buttonLabel);
      }
    }
//     ,validator: function()
//     {
//       this.validated = false;
//       return true;
//     }
    ,onRender:function()
    {
      RefXMLTextArea.CompositeUI.superclass.onRender.apply(this, arguments);


      if(this.consoleLog)
        console.log('RefXMLTextArea.onRender called');
      if(this.consoleLog)
        console.log('RefXMLTextArea.onRender this.el is ', this.el);
      // now the Composite is rendered, operate on it!!
      // this.el is indeed the text area, whereae this.wrap becomes a div that is
      // going to include the text area plus the other buttons!!!!
      this.wrap = this.el.wrap(
        {
          cls: 'x-form-field-wrap',
          style: {overflow: 'hidden'}
        }
      );
      if(this.consoleLog)
        console.log('RefXMLTextArea.onRender this.wrap is ', this.wrap);

      this.on( 'change',function()
               {
                 if(this.consoleLog)
                   console.log('RefXMLTextArea fired a change event');
                 this.validated = false;
               });
      this.number = this.wrap.createChild({ style: {position: 'absolute', top: 0, left: 0, width: '5ex', height: '500em'},
                                            id: 'numbers'
                                          },
                                         this.el);
      this.number.addClass('numbers-style');
      this.number.addClass('number-font');
      var string = '';
      for(var no=1; no < this.maxLines; no++){
        if(string.length>0)string = string + '<br>';
        string = string + no;
      }

      this.number.insertHtml('afterBegin', string);
      this.validateButton = new Ext.Button(
        {
          renderTo: this.wrap
          ,buttonSelector: 'em'
          ,cls: 'x-trigger-button'
          ,style:
          {
            position: 'absolute'
            ,right: 0
            ,bottom: 0
          }
          ,text: 'Validate'
          ,handler: this.validateXML
          ,scope: this
        }); //eo Button

      this.loadFromPreviousButton = new Ext.Button(
        {
          renderTo: this.wrap
          ,buttonSelector: 'em'
          ,style: { position: 'absolute'
                    ,right: 0
                    ,bottom: this.validateButton.getEl().getHeight()+ this.buttonSpacing}
          ,text: 'Load Previous'
        }); //eo loadFromPreviousButton

      this.importButton = new Ext.ux.form.FileUploadField(
        {
          renderTo: this.wrap
          ,buttonText: 'Import...'
          ,buttonOnly: true
          ,cls: 'x-trigger-button'
          ,width: 'auto'
          ,personalStyle: {
            position: 'absolute'
            ,top:  'auto'
            ,bottom: this.validateButton.getEl().getHeight()+ this.buttonSpacing + this.loadFromPreviousButton.getEl().getHeight() + this.buttonSpacing
            ,right: 0
          }
          ,listeners: {
            'fileselected': function(fb, v){
              var form = Ext.getCmp(this.parentForm).getForm();
              if(this.consoleLog)
                console.log( form );
              if(this.consoleLog)
                console.log( form.isValid() );
              form.submit(
                {
                  url:  "/cgi-bin/ReferencePythonCLI/driver.py"
                  ,params:{
                    action: 'fileUpload'
                  }
                  ,success: function(fp,o)
                  {
                    var text = Base64.decode(o.result.file);
                    this.validated = o.result.errors ? true : false;
                    Ext.Msg.show(
                      {
                        title: 'Upload Result'
                        ,msg: Base64.decode(o.result.msg)
                        ,icon: Ext.MessageBox.QUESTION
                        ,buttons: Ext.Msg.OK
                        ,width: 350
                      });
                    this.setValue(text);
                  }
                  ,scope:this
                });
//            this.setValue(this.importButton.fileInput.dom.files[0].getAsBinary());
//            var xml = this.fileInput.dom.files[0].getAsBinary();
            }
            ,scope: this
          }
        }); //eo importButton

      if(!this.width)
      {
        var validateBtnWidth     = this.validateButton ? this.validateButton.getEl().getWidth() : 0;
        var loadPreviousBtnWidth = this.loadFromPreviousButton ? this.loadFromPreviousButton.getEl().getWidth() : 0;
        var importBtnWidth       = this.importButton ? this.importButton.getEl().getWidth() : 0;
        this.wrap.setWidth(this.el.getWidth()
                           + Math.max(Math.max(validateBtnWidth,loadPreviousBtnWidth),importBtnWidth) + this.buttonSpacing);
      /* Add Event handler that dynamically adjust the position of the
       * div element that contains the number labels. */
      this.on('keypress', this.positionNumberLabels);
      this.el.dom.onscroll = this.positionNumberLabels;
      }
    } // eo function onRender

    // Now keep the wrap size correct even onResize event

    ,positionNumberLabels: function()
    {
      Ext.get('numbers').dom.style.top = (Ext.get('ta').dom.scrollTop * -1 ) + 'px';
    }

    ,onResize:function(w, h)
    {
      RefXMLTextArea.CompositeUI.superclass.onResize.apply(this, arguments);
      this.wrap.setHeight(this.height);

      var validateBtnWidth     = this.validateButton ? this.validateButton.getEl().getWidth() : 0;
      var loadPreviousBtnWidth = this.loadFromPreviousButton ? this.loadFromPreviousButton.getEl().getWidth() : 0;
      var importBtnWidth       = this.importButton ? this.importButton.button.getEl().getWidth() : 0;
      if(typeof w == 'number')
        this.el.setWidth(w - Math.max(Math.max(validateBtnWidth, loadPreviousBtnWidth),importBtnWidth)-this.number.getWidth()-this.buttonSpacing);
      this.wrap.setWidth(w);
      if(this.consoleLog)
        console.log('RefXMLTextArea.onResize this.wrap ', this.wrap, this.wrap.id, this.wrap.getWidth());
      if(this.consoleLog)
        console.log('RefXMLTextArea.onResize this.el ', this.el, this.el.id, this.el.getWidth());
    } //eo onResize function
    ,validateXML: function(button, event)
    {
      if(this.isValid())
      {
        if(this.consoleLog)
          console.log('RefXMLTextArea.validateXML Here \'this\' is: ', this);
        if(this.consoleLog)
          console.log('RefXMLTextArea.validateXML Here \'this.getEl()\' is: ', this.getEl());

      }
      var xml = '<?xml version="1.0"?>\n';
      xml += '<!DOCTYPE RefHistos  SYSTEM "referenceHistoWeb.dtd">\n';
      xml += '<RefHistos>\n';
      xml += this.getEl().getValue();
      xml += '</RefHistos>';
      if(this.consoleLog)
        console.log('RefXMLTextArea.validateXML xml: ', xml);

      Ext.Ajax.request(
        {
          url    : '/cgi-bin/ReferencePythonCLI/driver.py'
          ,method : 'post'
          ,params :
          {
            action: 'parseXML'
            ,xmlString : Base64.encode(xml)
          }
          ,success:  this.parseResponse
          ,failure:  this.parseResponse
          ,scope:this
          //      success: parseData,
          //      failure: function() {Debbie.connectionLost(380,500);}
        }
      );
    } // eo function validateXML
    ,parseResponse: function(response, request)
    {
      if(this.consoleLog)
        console.log('RefTExtArea.parseResponse response is: ', response);
      var obj = Ext.util.JSON.decode(response.responseText);
      var error = 'Status:<br/>' + Base64.decode(obj.message);
      Base64.decode(obj.message) == 'Syntax OK' ? this.validated = true : this.validated = false;
      if(obj.Line)
        error += '<br/>Line: ' + obj.Line;
      if(obj.Column)
        error += '<br/>Column: ' + obj.Column;
      if(obj.xml)
      {
        var xml = obj.xml;
        xml = xml.replace('<', '');
        xml = xml.replace('>', '');
        xml = xml.replace('"', '\"');
        error += '<br/>XML: ' + xml;

      }
      Ext.Msg.show(
        {
          title: 'Validation Results'
          ,msg: error
          ,icon: Ext.MessageBox.QUESTION
          ,buttons: Ext.Msg.OK
          ,width: 350
        });
    } // eo function parseResponse
  } // eo TextArea config declarations
);


Ext.reg('xmlTextAreaUI', RefXMLTextArea.CompositeUI);
Revision:	1.5
Committed:	Tue May 18 09:33:52 2010 UTC (14 years, 11 months ago) by rovere
Content type:	application/javascript
Branch:	MAIN
CVS Tags:	JSON-release-pp-2012Nov23, JSON-release-pp-20121026, HEAD
Changes since 1.4:	+4 -15 lines
Log Message:	* browseWindow_UI.js, dbsCombo_UI.js, goodForRun_UI.js, localTagCombo_UI.js, subSysCombo_UI.js, uploadWindow_UI.js, xmlTextArea_UI.js: All the logic of the connections between the component of the window has been moved the the new Event Manager. Minor stylish changes.
#	User	Rev	Content
1	rovere	1.1	Ext.ns('RefXMLTextArea');
2
3	rovere	1.2	Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';
4	rovere	1.1
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	rovere	1.4	,numberColWidth: '5ex'
15			,maxLines: 700
16			,style: {position: 'absolute', top :0, left: '5ex'}
17			,cls: 'number-font'
18			,enableKeyEvents: true
19	rovere	1.1	,autoCreate:
20			{
21			tag: "textarea"
22			,style: "width:100px;height:60px;"
23			,autocomplete: "off"
24	rovere	1.4	,wrap: "off"
25			,id: 'ta' // this is needed to have horizontal scroll-bars. The other are the defaults!!
26	rovere	1.1	}
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	rovere	1.4	// console.log('RefXMLTextArea.CompositeUI.initComponent buttonLabel: ', this.buttonLabel);
33	rovere	1.1	}
34			}
35			// ,validator: function()
36			// {
37	rovere	1.4	// this.validated = false;
38	rovere	1.1	// return true;
39	rovere	1.4	// }
40	rovere	1.1	,onRender:function()
41			{
42			RefXMLTextArea.CompositeUI.superclass.onRender.apply(this, arguments);
43
44
45			if(this.consoleLog)
46	rovere	1.4	console.log('RefXMLTextArea.onRender called');
47	rovere	1.1	if(this.consoleLog)
48	rovere	1.4	console.log('RefXMLTextArea.onRender this.el is ', this.el);
49	rovere	1.1	// now the Composite is rendered, operate on it!!
50	rovere	1.4	// this.el is indeed the text area, whereae this.wrap becomes a div that is
51	rovere	1.1	// going to include the text area plus the other buttons!!!!
52			this.wrap = this.el.wrap(
53			{
54	rovere	1.4	cls: 'x-form-field-wrap',
55			style: {overflow: 'hidden'}
56	rovere	1.1	}
57			);
58			if(this.consoleLog)
59	rovere	1.4	console.log('RefXMLTextArea.onRender this.wrap is ', this.wrap);
60	rovere	1.1
61			this.on( 'change',function()
62			{
63			if(this.consoleLog)
64			console.log('RefXMLTextArea fired a change event');
65			this.validated = false;
66	rovere	1.4	});
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	rovere	1.1
79	rovere	1.4	this.number.insertHtml('afterBegin', string);
80	rovere	1.1	this.validateButton = new Ext.Button(
81			{
82			renderTo: this.wrap
83			,buttonSelector: 'em'
84			,cls: 'x-trigger-button'
85	rovere	1.4	,style:
86	rovere	1.1	{
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	rovere	1.5	,style: { position: 'absolute'
101			,right: 0
102			,bottom: this.validateButton.getEl().getHeight()+ this.buttonSpacing}
103	rovere	1.1	,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	rovere	1.4	var form = Ext.getCmp(this.parentForm).getForm();
122	rovere	1.1	if(this.consoleLog)
123	rovere	1.4	console.log( form );
124	rovere	1.1	if(this.consoleLog)
125	rovere	1.4	console.log( form.isValid() );
126	rovere	1.1	form.submit(
127			{
128			url: "/cgi-bin/ReferencePythonCLI/driver.py"
129			,params:{
130			action: 'fileUpload'
131			}
132			,success: function(fp,o)
133			{
134	rovere	1.4	var text = Base64.decode(o.result.file);
135			this.validated = o.result.errors ? true : false;
136	rovere	1.1	Ext.Msg.show(
137			{
138			title: 'Upload Result'
139	rovere	1.4	,msg: Base64.decode(o.result.msg)
140	rovere	1.1	,icon: Ext.MessageBox.QUESTION
141			,buttons: Ext.Msg.OK
142			,width: 350
143	rovere	1.4	});
144	rovere	1.1	this.setValue(text);
145			}
146			,scope:this
147			});
148	rovere	1.4	// this.setValue(this.importButton.fileInput.dom.files[0].getAsBinary());
149	rovere	1.1	// 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	rovere	1.4	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	rovere	1.1	}
167	rovere	1.3	} // eo function onRender
168
169	rovere	1.1	// Now keep the wrap size correct even onResize event
170	rovere	1.4
171			,positionNumberLabels: function()
172			{
173			Ext.get('numbers').dom.style.top = (Ext.get('ta').dom.scrollTop * -1 ) + 'px';
174			}
175
176	rovere	1.1	,onResize:function(w, h)
177			{
178			RefXMLTextArea.CompositeUI.superclass.onResize.apply(this, arguments);
179	rovere	1.4	this.wrap.setHeight(this.height);
180	rovere	1.1
181			var validateBtnWidth = this.validateButton ? this.validateButton.getEl().getWidth() : 0;
182	rovere	1.4	var loadPreviousBtnWidth = this.loadFromPreviousButton ? this.loadFromPreviousButton.getEl().getWidth() : 0;
183			var importBtnWidth = this.importButton ? this.importButton.button.getEl().getWidth() : 0;
184	rovere	1.1	if(typeof w == 'number')
185	rovere	1.4	this.el.setWidth(w - Math.max(Math.max(validateBtnWidth, loadPreviousBtnWidth),importBtnWidth)-this.number.getWidth()-this.buttonSpacing);
186			this.wrap.setWidth(w);
187	rovere	1.1	if(this.consoleLog)
188	rovere	1.4	console.log('RefXMLTextArea.onResize this.wrap ', this.wrap, this.wrap.id, this.wrap.getWidth());
189	rovere	1.1	if(this.consoleLog)
190	rovere	1.4	console.log('RefXMLTextArea.onResize this.el ', this.el, this.el.id, this.el.getWidth());
191	rovere	1.1	} //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	rovere	1.4
201	rovere	1.1	}
202			var xml = '<?xml version="1.0"?>\n';
203	rovere	1.4	xml += '<!DOCTYPE RefHistos SYSTEM "referenceHistoWeb.dtd">\n';
204	rovere	1.1	xml += '<RefHistos>\n';
205			xml += this.getEl().getValue();
206			xml += '</RefHistos>';
207			if(this.consoleLog)
208	rovere	1.4	console.log('RefXMLTextArea.validateXML xml: ', xml);
209
210			Ext.Ajax.request(
211			{
212	rovere	1.1	url : '/cgi-bin/ReferencePythonCLI/driver.py'
213			,method : 'post'
214	rovere	1.4	,params :
215	rovere	1.1	{
216			action: 'parseXML'
217			,xmlString : Base64.encode(xml)
218			}
219			,success: this.parseResponse
220			,failure: this.parseResponse
221	rovere	1.4	,scope:this
222	rovere	1.1	// success: parseData,
223	rovere	1.4	// failure: function() {Debbie.connectionLost(380,500);}
224	rovere	1.1	}
225			);
226			} // eo function validateXML
227			,parseResponse: function(response, request)
228			{
229			if(this.consoleLog)
230	rovere	1.4	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	rovere	1.5	Base64.decode(obj.message) == 'Syntax OK' ? this.validated = true : this.validated = false;
234	rovere	1.1	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	rovere	1.4	var xml = obj.xml;
241	rovere	1.1	xml = xml.replace('<', '');
242			xml = xml.replace('>', '');
243			xml = xml.replace('"', '\"');
244			error += '<br/>XML: ' + xml;
245	rovere	1.4
246	rovere	1.1	}
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	rovere	1.4	});
255	rovere	1.1	} // eo function parseResponse
256			} // eo TextArea config declarations
257			);
258
259
260
261
262
263	rovere	1.4	Ext.reg('xmlTextAreaUI', RefXMLTextArea.CompositeUI);