PDA

View Full Version : ViewPort for ASP.NET



vladsch
3 Oct 2007, 9:46 AM
I review ViewPort in ASP.NET context.

I found a problem such as with BorderLayout in 1.x ExtJs. If we use Body as container then postback was no initiate. For resolve this problem for BorderLayout in 1.x need use document.forms[0] instead Body and some addition in css styles.

But ViewPort have no overriding container. I tried use renderTo config options but this not affect

I wrote FormViewPort class for resolve this problem:


Ext.FormViewport = Ext.extend(Ext.Container, {
initComponent : function() {
Ext.FormViewport.superclass.initComponent.call(this);
document.getElementsByTagName('html')[0].className += ' x-viewport';
this.el = Ext.get(document.forms[0]);
this.el.setHeight = Ext.emptyFn;
this.el.setWidth = Ext.emptyFn;
this.el.setSize = Ext.emptyFn;
this.el.dom.scroll = 'no';
this.allowDomMove = false;
this.autoWidth = true;
this.autoHeight = true;
Ext.EventManager.onWindowResize(this.fireResize, this);
this.renderTo = this.el;
},

fireResize : function(w, h){
this.fireEvent('resize', this, w, h, w, h);
}
});
Ext.reg('FormViewport', Ext.FormViewport);

And need add following styles:



body {overflow:hidden;margin:0;padding:0;border:0px none;}
html, body{height:100%;}


And for form tag need add style


<form id="form1" runat="server" style="width:100%; height:100%;">

photoz
30 Oct 2007, 11:38 AM
Thanks a ton, this is a life saver!

mankz
20 Nov 2007, 7:18 AM
+1

Bdog2g2
5 Dec 2007, 7:14 AM
God bless you man.

I was working on this problem for about 2 days. I remembered having the problem with 1.x and remembered that I had to render the layout to the form, but couldn't find out how to do it with viewport.

RolandS
12 Jan 2008, 3:45 AM
Vladsch,
I guess I have the same problem as you. In ExtJS 1.1, my problem is solved by changing document.body in the Borderlayout to 'aspnetForm'. In ExtJS 2.0 the document.body in a Viewport is automatically set http://extjs.com/learn/Ext_1_to_2_Migration_Guide#BorderLayout_vs._Viewport. Is there a way to set the document.body in a Viewport?
I know, it sounds like your FormViewport should do the trick. Unfortunatly the FormViewport doesn't, or is maybe not implemented the right way.

Anyone?

vladsch
13 Jan 2008, 11:07 PM
Hi RolandS,
FormViewport is correctly implemented. I used it in real projects and it works properly. May be your code contains error? Please, describe your problem and I'll try to help you

RolandS
14 Jan 2008, 4:06 AM
Hi vladsch,
I certainly believe the code of your FormViewport works properly, but I'am not sure I've implemented it correctly into my code. My problem is as follows:

Problem 1:
I use the Borderlayout in ExtJS 1.1 in an ASP.NET form. When I click on a button the form does postback but server-side I can't get any values out of a <asp:TextBox> or <asp: DropDownList> or other asp webcontrols. It's just empty or 'null'.
Solution:
In the javascript code I change "layout = new Ext.BorderLayout(document.body, {" into "layout = new Ext.BorderLayout('aspnetForm', {". That does the trick in ExtJS 1.1.

Problem 2:
I use the Viewport in ExtJS 2.0 in an ASP.NET form. When I click on a button the form does postback but server-side I can't get any values out of a <asp:TextBox> or <asp: DropDownList> or other asp webcontrols. It's just empty or 'null'. In ExtJS 2.0 the 'document.body' is already integrated into a Viewport. That way I can't change it into 'aspnetForm'.

Hope you understand my problem now. I hoped your FormViewport would help to overcome this problem. I don't know if I implemented it the right way into my code or if it just isn't the solution for my problem. Do you think your FormViewport should do the trick for me, or is there another solution? Thanks already.

vladsch
14 Jan 2008, 5:26 AM
RolandS,

this is simple example of using FormViewPort



Ext.FormViewport = Ext.extend(Ext.Container, {
initComponent : function() {
Ext.FormViewport.superclass.initComponent.call(this);
document.getElementsByTagName('html')[0].className += ' x-viewport';
this.el = Ext.get(document.forms[0]);
this.el.setHeight = Ext.emptyFn;
this.el.setWidth = Ext.emptyFn;
this.el.setSize = Ext.emptyFn;
this.el.dom.scroll = 'no';
this.allowDomMove = false;
this.autoWidth = true;
this.autoHeight = true;
Ext.EventManager.onWindowResize(this.fireResize, this);
this.renderTo = this.el;
},

fireResize : function(w, h){
this.fireEvent('resize', this, w, h, w, h);
}
});
Ext.reg('FormViewport', Ext.FormViewport);

//Init
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.FormViewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
margins:'3 5 0 5',
height: 150
}),
{
region:'center',
contentEl: 'mainPanel',
margins:'3 5 3 0',
autoScroll: true
},
new Ext.BoxComponent({
region:'south',
el: 'south',
margins:'0 5 3 5',
height: 30
})
]
});
});

RolandS
14 Jan 2008, 7:00 AM
Hi Vladsch,

The problem we have with your solustion is the positioning of the elements. We have the following (Form)Viewport javascript:



Ext.FormViewport = Ext.extend(Ext.Container, {
initComponent : function() {
Ext.FormViewport.superclass.initComponent.call(this);
document.getElementsByTagName('html')[0].className += ' x-viewport';
this.el = Ext.get(document.forms[0]);
this.el.setHeight = Ext.emptyFn;
this.el.setWidth = Ext.emptyFn;
this.el.setSize = Ext.emptyFn;
this.el.dom.scroll = 'no';
this.allowDomMove = false;
this.autoWidth = true;
this.autoHeight = true;
Ext.EventManager.onWindowResize(this.fireResize, this);
this.renderTo = this.el;
},
fireResize : function(w, h){
this.fireEvent('resize', this, w, h, w, h);
}
});
Ext.reg('FormViewport', Ext.FormViewport);
//Init
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var titleBar = new Ext.BoxComponent({
region: 'north',
el: 'titleBar',
height: 22,
margins: '5px 5px 2px 5px'
});
var menuPanel = new Ext.Panel({
region:'west',
title:'Menu',
id:'menu-bar',
contentEl:'menuBar',
collapsible: true,
width: 180,
minSize: 180,
maxSize: 180,
margins:'5px 0px 5px 5px',
cmargins:'5px 0px 5px 5px'
});
var actionPanel = new Ext.Panel({
region:'west',
contentEl:'actionPanel',
split:true,
collapsible: true,
collapseMode: 'mini',
width: 175,
minWidth: 175,
maxWidth: 175,
margins:'5px 0px 5px 5px',
cmargins:'5px 0px 5px 0px',
border: false,
baseCls:'x-plain'
});
var contentPanel = new Ext.Panel({
region: 'center',
margins: '5px 5px 5px 0px',
bodyStyle: 'padding:5px 5px 5px 5px',
items:[new Ext.BoxComponent({region: 'center',el: 'contentPanel'})]
});
var viewport = new Ext.FormViewport({
layout:'border',
border: false,
items:[menuPanel,titleBar,
{
region:'center',
layout:'border',
border: false,
items:[actionPanel,contentPanel]
}
]
});
});


With this code the regions/elements are all misplaced over the page. The collapsable menu isn't working either. When I only change
var viewport = new Ext.FormViewport into
var viewport = new Ext.Viewport Everything looks good again, but (hence the Vieport instead of the FormViewport) still no server-side values from the controls after a postback. Can you help me with this particular layout?

Thanks!

vladsch
14 Jan 2008, 7:12 AM
RolandS,

Are you added styles to your page? For correct display FormViewport need the following styles:

Add style (to head tag or to external css file)


body {overflow:hidden;margin:0;padding:0;border:0px none;}
html, body{height:100%;}
form {width:100%; height:100%;}

RolandS
14 Jan 2008, 7:28 AM
Vladsch,

Great...it's coming togheter now! The only problem (as far as I've tested it) is the collapsable menu. It isn't collapsable anymore. When we click the collapse button, a javascript error is thrown. Any ideas?

Thanks again!

vladsch
14 Jan 2008, 7:31 AM
What does erros occurs? Please show js code

RolandS
14 Jan 2008, 7:34 AM
Sorry,

It's allready working! But when clicking (at random) on the collapse buttons and submit the form etc, sometimes the drawing of the FormView elements isn't correct. When we refresh the page or slightly rezise the window, the elements 'pop' into the origional position. Sounds familiar?

vladsch
14 Jan 2008, 7:37 AM
Strange. Does it occurs with original Viewport or only with FormViewport?

RolandS
14 Jan 2008, 7:47 AM
Only with the FormViewPort.

I also see that the re-drawing of the elements is rather slow when we resize the browser window. Maybe it helps solving this last (minor) issue

vladsch
14 Jan 2008, 11:38 PM
RolandS,
Can you send me sample project with problem? I'll investigate your code and try to help you

RolandS
16 Jan 2008, 5:51 AM
Hi Vladsch,

I'll try to pack my project with all the resources into a zip file and send it to you. Can I e-mail you the package?

Thanks again!

vladsch
16 Jan 2008, 7:20 AM
RolandS,
my email is vscheglov@gmail.com

dotnetCarpenter
15 Feb 2008, 1:26 AM
Only with the FormViewPort.

I also see that the re-drawing of the elements is rather slow when we resize the browser window. Maybe it helps solving this last (minor) issue

Let me guess, this only happens in IE? In some circumstances the browser won't update changed styles (CSS), luckily for us Ext has a method to circumvent just that.

http://extjs.com/deploy/dev/docs/output/Ext.Element.html
http://extjs.com/deploy/dev/docs/output/Ext.Layer.html


Hope it helps!

vladsch
14 Oct 2008, 8:45 AM
The FormViewPort integrated to the ASP.NET ViewPort control which available in Coolite Toolkit.

Demo: http://examples.coolite.com/?/ViewPort/Basic/Built_in_Markup/

The Coolite Toolkit is available under the same license as ExtJS... GPL or Commercial

jordibig
29 Dec 2009, 2:38 AM
After upgrading to Ext 3.1, the Viewport suddenly stopped resizing itself. After some investigation we reached the problem at the fireEvent function in the fireResize callback.

We changed it to onResize after viewing at the documentation that this is the way where Ext.Viewport is doing that now and it worked!

Full solution:


Ext.FormViewport = Ext.extend(Ext.Container, {
initComponent: function() {
Ext.FormViewport.superclass.initComponent.call(this);
document.getElementsByTagName('html')[0].className += ' x-viewport';
this.el = Ext.get(document.forms[0]);
this.el.setHeight = Ext.emptyFn;
this.el.setWidth = Ext.emptyFn;
this.el.setSize = Ext.emptyFn;
this.el.dom.scroll = 'no';
this.allowDomMove = false;
this.autoWidth = true;
this.autoHeight = true;
Ext.EventManager.onWindowResize(this.fireResize, this);
this.renderTo = this.el;
},

fireResize: function(w, h) {
this.onResize(w, h, w, h);
}
});
Ext.reg('FormViewport', Ext.FormViewport);
Hope that helps!