May 29, 2009, 8:06 AM
[CLOSED] Help with grids in codebehind inside tabs
Hello,
I have just started with this libraries and I have built an example building a bage with all code behind, which involves a viewport with a center panel which containt two tabs and inside one of the tabs a grid which obtains information from an httpproxy.
The examle is working, but I have 2 problems that I am not able to solve:
1- I cannot force the grid to fill the whole Tab, althoug is inside a fitlayout.
2- I cannot create a SortInfo inside the store, when I uncoment the line
By the way I discovered a small change between versions 0.7 and 0.8/svn which makes 0.7 code stop working.
PagingToolBar has been renamed to PagingToolbar in version 0.8.
The sample is based on code found in this forum as well as code provide in the coolite samples.
Here is all the code of the example:
default.aspx
I have just started with this libraries and I have built an example building a bage with all code behind, which involves a viewport with a center panel which containt two tabs and inside one of the tabs a grid which obtains information from an httpproxy.
The examle is working, but I have 2 problems that I am not able to solve:
1- I cannot force the grid to fill the whole Tab, althoug is inside a fitlayout.
2- I cannot create a SortInfo inside the store, when I uncoment the line
store.SortInfo=new SortInfo("Common",Coolite.Ext.Web.SortDirection.ASC);
it crashes.By the way I discovered a small change between versions 0.7 and 0.8/svn which makes 0.7 code stop working.
PagingToolBar has been renamed to PagingToolbar in version 0.8.
The sample is based on code found in this forum as well as code provide in the coolite samples.
Here is all the code of the example:
default.aspx
<%@ Page
Language = "C#"
AutoEventWireup = "true"
Inherits = "testjson.Default"
ValidateRequest = "false"
EnableSessionState = "true"
%>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
</form>
</body>
</html>
default.aspx.csusing System;
using System.Data;
using System.Web.UI;
using Coolite.Ext.Web;
namespace testjson {
/// <summary>
/// Description of MainForm.
/// </summary>
public class Default : Page {
private Store store;
private GridPanel grid;
protected void Page_Load(object sender, EventArgs e) {
//creates store
BuildStore();
//creates the grid
BuildGrid();
//add store to the page
this.Page.Form.Controls.Add(store);
//create a viewport with a center panel with two tabs in one of
//the tabs the grid whih shoud fill all the tab
/////////////////
// WEST REGION //
/////////////////
// Make Panel for West Region
Coolite.Ext.Web.Panel west = new Coolite.Ext.Web.Panel();
west.ID = "WestPanel";
west.Title = "West";
west.Width = System.Web.UI.WebControls.Unit.Pixel(225);
west.Html="This is the west panel";
///////////////////
// CENTER REGION //
///////////////////
// Make TabPanel for Center Region
TabPanel center = new TabPanel();
center.ID = "CenterPanel";
center.ActiveTabIndex = 0;
// Make Tab
Tab tab1 = new Tab();
tab1.ID = "Tab2";
tab1.Title = "Center";
tab1.Border = false;
tab1.BodyStyle = "padding:6px;";
//add grid to tab1
FitLayout fit=new FitLayout();
fit.Items.Add(grid);
tab1.BodyContainer.Controls.Add(fit);
//create tab2
Tab tab2 = new Tab();
tab2.ID = "Tab1";
tab2.Title = "Close Me";
tab2.Closable = true;
tab2.Border = false;
tab2.BodyStyle = "padding:6px;";
tab2.Html = "Closable Tab";
// Add Tab's to TabPanel
center.Tabs.Add(tab1);
center.Tabs.Add(tab2);
// Make BorderLayout container for ViewPort
BorderLayout layout = new BorderLayout();
// Set West Region properties
layout.West.MinWidth = System.Web.UI.WebControls.Unit.Pixel(225);
layout.West.MaxWidth = System.Web.UI.WebControls.Unit.Pixel(400);
layout.West.Split = true;
layout.West.Collapsible = true;
// Add Panels to BorderLayout Regions
layout.West.Items.Add(west);
layout.Center.Items.Add(center);
// Make ViewPort to fold everything
ViewPort vp = new ViewPort();
vp.ID = "ViewPort1";
// Add BorderLayout to ViewPort
vp.Items.Add(layout);
this.Page.Form.Controls.Add(vp);
}
protected void BuildStore() {
store = new Store();
store.ID = "Store1";
store.AutoLoad=true;
store.RemoteSort=true;
HttpProxy proxy=new HttpProxy();
proxy.Url="JSONHandler.ashx";
proxy.Method=HttpMethod.GET;
store.Proxy.Add(proxy);
JsonReader reader=new JsonReader();
reader.Root="plants";
reader.TotalProperty="totalCount";
store.Reader.Add(reader);
store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Common",RecordFieldType.String));
store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Botanical",RecordFieldType.String));
store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Light"));
store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Price",RecordFieldType.Float));
store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Availability",RecordFieldType.Date));
store.Reader[0].Fields.Add(new Coolite.Ext.Web.RecordField("Indoor",RecordFieldType.Boolean));
//TODO- does not work why???
//store.SortInfo=new SortInfo("Common",Coolite.Ext.Web.SortDirection.ASC);
store.AutoLoadParams.Add(new Coolite.Ext.Web.Parameter("start","0",ParameterMode.Raw));
store.AutoLoadParams.Add(new Coolite.Ext.Web.Parameter("limit","10",ParameterMode.Raw));
}
protected void BuildGrid() {
grid = new GridPanel();
grid.ID = "GridStore1";
grid.AutoScroll = true;
grid.AutoHeight = true;
grid.StoreID = store.ID;
grid.StripeRows = true;
grid.Header = false;
grid.AutoWidth = true;
grid.LoadMask.ShowMask = true;
grid.LoadMask.Msg = "Loading...";
grid.SelectionModel.Add(new RowSelectionModel());
grid.AjaxEvents.RowClick.Delay=100;
grid.AjaxEvents.RowClick.EventMask.Msg="loading";
grid.AjaxEvents.RowClick.EventMask.ShowMask=false;
grid.AjaxEvents.RowClick.Event+= Row_Click;
grid.AjaxEvents.RowClick.ExtraParams.Add(new Parameter("name","#{GridStore1}.getSelectionModel().getSelected().data.Botanical",ParameterMode.Raw));
Coolite.Ext.Web.Column _col = new Coolite.Ext.Web.Column();
_col.ColumnID = "Common";
_col.Header = "Common Name";
_col.DataIndex = "Common";
_col.Width=220;
_col.Sortable=true;
grid.ColumnModel.Columns.Add(_col);
_col = new Coolite.Ext.Web.Column();
_col.Header = "Light";
_col.DataIndex = "Light";
_col.Width=130;
_col.Sortable=true;
grid.ColumnModel.Columns.Add(_col);
_col = new Coolite.Ext.Web.Column();
_col.Header = "Price";
_col.DataIndex = "Price";
_col.Width=70;
_col.Sortable=true;
grid.ColumnModel.Columns.Add(_col);
_col = new Coolite.Ext.Web.Column();
_col.Header = "Availability";
_col.DataIndex = "Availability";
_col.Width=95;
_col.Sortable=true;
grid.ColumnModel.Columns.Add(_col);
_col = new Coolite.Ext.Web.Column();
_col.Header = "Indoor";
_col.DataIndex = "Indoor";
_col.Width=55;
_col.Sortable=true;
grid.ColumnModel.Columns.Add(_col);
Coolite.Ext.Web.PagingToolbar pager = new Coolite.Ext.Web.PagingToolbar();
pager.PageSize = 10;
pager.StoreID=store.ID;
pager.EmptyMsg="No plants to display";
pager.DisplayMsg="Displaying plants {0} - {1} of {2}";
pager.ID="PagingToolBar1";
grid.BottomBar.Add(pager);
}
void Row_Click(object sender, AjaxEventArgs e) {
if (e.ExtraParams.Count>0) {
string name=e.ExtraParams["name"];
Ext.MessageBox.Alert("alert",name).Show();
}
}
}
}
JsonHandler.csusing System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using Coolite.Ext.Web;
namespace testjson {
/// <summary>
/// Summary description for $codebehindclassname$
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class JsonHandler : IHttpHandler {
private HttpContext context;
public void ProcessRequest(HttpContext context) {
this.context=context;
context.Response.ContentType = "text/json";
Paging<Plant> plants = Plant.PlantsPaging(this.Start, this.Limit, this.Sort, this.Dir, "");
context.Response.Write(string.Format("{{totalCount:{1},'plants':{0}}}", JSON.Serialize(plants.Data), plants.TotalRecords));
}
public bool IsReusable {
get {
return false;
}
}
int Start {
get {
string startStr = context.Request["start"];
if (string.IsNullOrEmpty(startStr)) {
throw new NullReferenceException("Start is absent");
}
return int.Parse(startStr);
}
}
int Limit {
get {
string limitStr = context.Request["limit"];
if (string.IsNullOrEmpty(limitStr)) {
throw new NullReferenceException("Limit is absent");
}
return int.Parse(limitStr);
}
}
string Sort {
get {
string sort = context.Request["sort"]??"";
return sort;
}
}
string Dir {
get {
string dir = context.Request["dir"]??"";
return dir;
}
}
}
}
JSONHandler.ashx<%@ WebHandler Class="testjson.JsonHandler" Language="C#" CodeBehind="JSONHandler.ashx.cs" %>
Plant.csusing System;
using System.Collections;
using System.Collections.Generic;
using System.Globalization;
using System.Web;
using System.Xml;
using Coolite.Ext.Web;
namespace testjson {
/// <summary>
/// Description of Plant.
/// </summary>
public class Plant {
public Plant(bool indoor, DateTime availability, decimal price, string light, string zone, string botanical, string common) {
this.Indoor = indoor;
this.Availability = availability;
this.Price = price;
this.Light = light;
this.Zone = zone;
this.Botanical = botanical;
this.Common = common;
}
public Plant() {
}
public string Common {
get;
set;
}
public string Botanical {
get;
set;
}
public string Zone {
get;
set;
}
public string ColorCode {
get;
set;
}
public string Light {
get;
set;
}
public decimal Price {
get;
set;
}
public DateTime Availability {
get;
set;
}
public bool Indoor {
get;
set;
}
public static Paging<Plant> PlantsPaging(int start, int limit, string sort, string dir, string filter) {
List<Plant> plants = TestData;
if (!string.IsNullOrEmpty(filter) && filter != "*") {
plants.RemoveAll(plant => !plant.Common.ToLower().Contains(filter.ToLower()));
}
if (!string.IsNullOrEmpty(sort)) {
plants.Sort(delegate(Plant x, Plant y) {
object a;
object b;
int direction = dir == "DESC" ? -1 : 1;
a = x.GetType().GetProperty(sort).GetValue(x,null);
b = y.GetType().GetProperty(sort).GetValue(y, null);
return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
}
);
}
if ((start + limit) > plants.Count) {
limit = plants.Count - start;
}
List<Plant> rangePlants = (start < 0 || limit < 0) ? plants : plants.GetRange(start, limit);
return new Paging<Plant>(rangePlants, plants.Count);
}
public static List<Plant> TestData {
get {
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.Load(HttpContext.Current.Server.MapPath("Plants.xml"));
List<Plant> data = new List<Plant>();
IFormatProvider culture = new CultureInfo("en-US", true);
foreach (XmlNode plantNode in xmlDoc.SelectNodes("catalog/plant")) {
Plant plant = new Plant();
plant.Common = plantNode.SelectSingleNode("common").InnerText;
plant.Botanical = plantNode.SelectSingleNode("botanical").InnerText;
plant.Zone = plantNode.SelectSingleNode("zone").InnerText;
plant.ColorCode = plantNode.SelectSingleNode("colorCode").InnerText;
plant.Light = plantNode.SelectSingleNode("light").InnerText;
plant.Price = decimal.Parse(plantNode.SelectSingleNode("price").InnerText, culture);
plant.Availability = DateTime.Parse(plantNode.SelectSingleNode("availability").InnerText, culture);
plant.Indoor = bool.Parse(plantNode.SelectSingleNode("indoor").InnerText);
data.Add(plant);
}
return data;
}
}
}
}