PDA

View Full Version : [CLOSED] Book critic / code behind question



tMp
Aug 16, 2013, 8:33 AM
Hi

As wished in the ext.net book thread I am opening a new thread for a particular critic.

The book is a nice place to start and get some ideas but I am missing a huge part about ext.net in code behind and its particular problems. While creating all the items in the aspx file and referencing or updating them in a cs file is no problem at all I would love to get some insight about how to handle this in code behind.

At the moment I have a website with a couple of tabs with a lot of data that needs to be loaded and makes the initial start of the page slow. Though I thought it would be a good idea to creat only the nescessary items on the flight in code behind and fill them with corresponding data. But what is the best practice to achiev that? If I always generate everything during pageload I have the same overhead as before! And how to I reference certain fields or buttons from another method without finding them in auto-complete?

The only examples I found are always about one item (for example one gridpanel) that gets always built on pageload. But how would I handle this if I had to tabs in a panel with a grid panel each that i want to work with? When do I generate what? When can I omit what? etc.

Thanks for helping me out.

Daniil
Aug 16, 2013, 12:15 PM
Hi @tMp,

Here are some basic examples of rendering stuff dynamically.
http://examples2.ext.net/#/search/xrender

To deal with dynamic controls the X.GetCmp<ControlType>("ControlID") could be helpful. Here are some details.
http://forums.ext.net/showthread.php?10578&p=42517&viewfull=1#post42517

Besides getting of submitted things, a proxy control allows to use it the following way. Assume, you render a TextField dynamically during one DirectEvent and need to hide that TextField during another one. You could do the following:

TextField f = X.GetCmp<TextField>("TextField1");
f.Hidden = true;

Here is some advanced discussion regarding rendering user controls dynamically and handle events.
http://forums.ext.net/showthread.php?25279

tMp
Aug 16, 2013, 6:42 PM
Thank you Daniil,

as always quick to answer and dead on spot. It seems to be exactly what I needed to start. Will look into it before I post some more questions ;)

best regards.

tMp
Aug 19, 2013, 10:33 AM
@Daniil

Most part of it I got now but I have one thing that is bugging me. I am creating a lot of panels with containers as predefined columns and after creating them during pageload I would love to fill the columns with different items (labels, etc.) but somehow i can't render them.

widget part:

private Ext.Net.Panel BuildColumnPanel(string id, int numberOfColumns)
{
Ext.Net.Panel panel = new Ext.Net.Panel
{
Title = id,
ID = "pnl" + id,
ManageHeight = true,
BodyPaddingSummary = "5 10 5 100",
Layout = "Column"
};

for (int i = 1; i <= numberOfColumns; i++)
{
panel.Items.Add(this.BuildColumnContainer(id, i, numberOfColumns));
}

return panel;
}

private Ext.Net.Container BuildColumnContainer(string id, int columnNumber, int numberOfColumns)
{
Ext.Net.Container columnContainer = new Ext.Net.Container
{
ID = "col" + id + "_" + columnNumber,
ColumnWidth = 1.0 / numberOfColumns,
Items =
{
new Ext.Net.Label
{
ID = "lbl" + id + "_" + columnNumber,
Text = "Test " + columnNumber
}
}
};

return columnContainer;
}

page_load part:

// Build CODE Panel and add items
Ext.Net.Panel panel = this.BuildColumnPanel("CODE", 5);

Ext.Net.Label label = new Ext.Net.Label
{
ID = "testLabel",
Text = "blablabla",
AnchorHorizontal = "95%"
};

panel.AddTo(this.PDETAILS);

In the columns I inserted some test labels to see if it works and it is working just fine. But that one label (testlabel) I can't attach to one of the containers. I am sure the answer is somewhere in the forum but I think I was searching with the wrong words.

Thanks for pointing me in the right direction.

best regards!

Baidaly
Aug 20, 2013, 2:22 AM
Hello!

Try to add this label to Items collection:


Panel1.Items.Add(Label1);

tMp
Aug 20, 2013, 7:38 AM
Hello Baidaly

Is this really the right way? Because at the moment my structure is like this:

Panel - Container - Items I want to add

So if I add it like you wrote me to, don't I add it to the Panel and not to the Container? I have a several containers (with known IDs) in every Panel and I would like to fill specific Column-Container dynamically with labes, comboboxes, etc.

Thank you very much.

Daniil
Aug 20, 2013, 1:17 PM
I am not getting the scenario a bit. Could you, please, provide a simple test case which would demonstrate it?

tMp
Aug 20, 2013, 1:49 PM
Of course - and during making the example I found my error. I forgot to say true to render (see adding the Textfield to the Viewport). But this raises another question. Why do I need to say render = true with the Textfield and when I change the label text I don't need it at all? Or better, is there a rule when I have to render and when not? And is this the correct way to add something to a specific column or is there a better/easier way?

demo.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="demo.aspx.cs" Inherits="demo" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form" runat="server">

<ext:ResourceManager ID="ResourceManager" runat="server" />

<ext:Viewport runat="server" ID="vp"></ext:Viewport>

</form>
</body>
</html>

demo.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

public partial class demo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
// Build Panel and add items
Ext.Net.Panel panel = this.BuildColumnPanel("PANEL", 4);
panel.AddTo(this.vp);

// change text of second column label
Ext.Net.Label label = X.GetCmp<Ext.Net.Label>("lblPANEL_2");
label.Text = "Text changed!";

// add textfield to third column
Ext.Net.TextField txtfield = new Ext.Net.TextField
{
FieldLabel = "Test",
AnchorHorizontal = "95%"
};

Ext.Net.Container cont = X.GetCmp<Ext.Net.Container>("colPANEL_3");
cont.Add(txtfield, true);
}
}

private Ext.Net.Panel BuildColumnPanel(string id, int numberOfColumns)
{
Ext.Net.Panel panel = new Ext.Net.Panel
{
Title = id,
ID = "pnl" + id,
ManageHeight = true,
BodyPaddingSummary = "5 10 5 10",
Layout = "Column"
};

for (int i = 1; i <= numberOfColumns; i++)
{
panel.Items.Add(this.BuildColumnContainer(id, i, numberOfColumns));
}

return panel;
}

private Ext.Net.Container BuildColumnContainer(string id, int columnNumber, int numberOfColumns)
{
Ext.Net.Container columnContainer = new Ext.Net.Container
{
ID = "col" + id + "_" + columnNumber,
ColumnWidth = 1.0 / numberOfColumns,
Items =
{
new Ext.Net.Label
{
ID = "lbl" + id + "_" + columnNumber,
Text = "Column #" + columnNumber
}
}
};

return columnContainer;
}
}

Daniil
Aug 20, 2013, 6:11 PM
Generally speaking, the rule is simple. You should not render the things manually during an initial load request. But you have to render during a DirectEvent/DirectMethod.

Also the X.GetCmp<>() stuff is also for DirectEvents/DirectMethods only.

So, for your test case the Page_Load should look like this:

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
// Build Panel and add items
Ext.Net.Panel panel = this.BuildColumnPanel("PANEL", 4);
this.vp.Items.Add(panel);
//panel.AddTo(this.vp);

// change text of second column label
//Ext.Net.Label label = X.GetCmp<Ext.Net.Label>("lblPANEL_2");
Ext.Net.Label label = this.FindControl("lblPANEL_2") as Ext.Net.Label;
label.Text = "Text changed!";

// add textfield to third column
Ext.Net.TextField txtfield = new Ext.Net.TextField
{
FieldLabel = "Test",
AnchorHorizontal = "95%"
};

//Ext.Net.Container cont = X.GetCmp<Ext.Net.Container>("colPANEL_3");
Ext.Net.Container cont = this.FindControl("colPANEL_3") as Ext.Net.Container;
//cont.Add(txtfield, true);
cont.Items.Add(txtfield);
}
}

But during DirectEvents/DirectMethods you are good to use X.GetCmp<>(), .AddTo(), etc.

tMp
Aug 20, 2013, 8:20 PM
@Daniil

Perfect, thank you very much!

best regards.

tMp
Aug 21, 2013, 11:36 AM
One final question / thought:

I tried the "panel.items.add(label);" during a directevent/method and it is not working. So as you wrote, in this case I have to render. Is it correct to use "panel.add(label, true);" because I can't set render = true while using .items.add?

And did I understand this correctly? During DirectEvent/Method I can use the X.GetCmp<>()-stuff to get a component that has already been rendered previously but I can or should use the FindControl()-Stuff as long as it concerns components I am creating during that DirectEvent/Method?

Thank you.

Daniil
Aug 21, 2013, 2:05 PM
I tried the "panel.items.add(label);" during a directevent/method and it is not working. So as you wrote, in this case I have to render. Is it correct to use "panel.add(label, true);" because I can't set render = true while using .items.add?


Yes, you are right. Another way is:

panel.Items.Add(label);
label.Render();



And did I understand this correctly? During DirectEvent/Method I can use the X.GetCmp<>()-stuff to get a component that has already been rendered previously but I can or should use the FindControl()-Stuff as long as it concerns components I am creating during that DirectEvent/Method?


If you create and render a control during one DirectEvent and are going to use the FindControl method during another DirectEvent, it will be unsuccessful unless you recreate that control.

tMp
Aug 21, 2013, 2:15 PM
Thank you!