PDA

View Full Version : Why innerHTML does not contain the textField values



venkateshns
7 Dec 2011, 1:31 AM
I am trying to write the print functionality for the form panel. Please see the code as follows.


printPanel : function(component) {
var name = component && component.getXType
? Ext.String.format("print_{0}_{1}", component.getXType(), component.id.replace(/-/g, '_'))
: "print";

var win = window.open('', name);
win.document.write(this.generateHTML(component));
win.document.close();

},

generateHTML : function(component)
{
return Ext.String.format("<div class='x-panel-print'>{0}</div>", component.getEl().dom.innerHTML);
},


It is just simply displaying the html page with all the fields but not having values. Here 'Test' is the default value for Estate Location.

tvanzoelen
7 Dec 2011, 4:24 AM
Because you just copied the input elements. The original input element has a value.You must set them again on the copied input elements.

For the print you should retrieve the values from the original form.

Then make a function that sets automaticcaly the retrievedvalues on the new opened document. Just wrap <form> element around the panel. You can retrieve the form by document.yourform.fieldname

venkateshns
7 Dec 2011, 4:27 AM
I am not clear with the explaination, can u please explain it bit more clearly.

tvanzoelen
7 Dec 2011, 4:41 AM
In the innerHTML of the panel the formvalues are stored in <input> elements. To be exact, the value is stored in the value property of the inputelement. If that property is not explicitly set like <input value='avalue'/> and you copy that element to a new document

as you do here



var win = window.open('', name);
win.document.write(this.generateHTML(component));
win.document.close();


then you have an empty form with no values. You must set them again.

Probably there are no <form> tags also in the copies part, because I dont think you copied that element along. Thats why, just wrap a new html <form> tag around your copied panel so you can address the newly created form.

Then set the values (wich you extract from the orignal form) with a function to the newly created form.

It isn easy but I think thats the way. Otherwise you can add a value property with value to the copied input elements.

venkateshns
7 Dec 2011, 10:39 PM
Thanks for the reply tvanzoelen. I have done the same thing. But the problem is here i am unable to get the values from the form panel,as iam not having the model and store. Can u suggest some way for me to get the values from the form.Print button is not written in the form panel widget,written at the application level.In my application, widgets are displayed in the center component and there will be a common button at the top of my page which will prints the widget that is loaded in center component.

tvanzoelen
7 Dec 2011, 11:59 PM
If you have used the form.Panel you can call the function getValues()

If you didn't use the form.Panel, then use it!

venkateshns
8 Dec 2011, 7:07 AM
Yeah got it. Thanks tvanzoelen.

venkateshns
12 Dec 2011, 3:24 AM
Hi tvanzoelen,
I have followed what you said for printing the form panel. How to get the CSS for the form panel, as i need to pass it to printer window.

Regards,
venkatesh

tvanzoelen
12 Dec 2011, 3:51 AM
Maybe set the same class on the form element as in ExtJs 4 is done

class="x-panel-body x-panel-body-noborder x-form x-table-layout-ct"

The classes of the formitems you copied I think. Then just just have to include/load the extjs css file in the new document