ViewPort for ASP.NET

[vladsch]

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]

Thanks a ton, this is a life saver!

[mankz]

+1

[Bdog2g2]

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]

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]

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]

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]

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]

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]

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]

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]

What does erros occurs? Please show js code

[RolandS]

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]

Strange. Does it occurs with original Viewport or only with FormViewport?

[RolandS]

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]

RolandS,
Can you send me sample project with problem? I'll investigate your code and try to help you

[RolandS]

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]

RolandS,
my email is vscheglov@gmail.com

[dotnetCarpenter]

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]

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