PDA

View Full Version : [CLOSED] Layout - Gridpanel / Panel in Window



PANAYIOTISP
Aug 17, 2014, 5:42 AM
Hi,

I am trying to use the panels to do a layout on a new window that will consists of two parts, a header with search controls and a grid with results. I want the controls to stretch through the layout of the window. After fiddling with the panel and gridpanel controls for a number of hours, I managed to create the layout but the gridpanel control did not show a scrollbar even if I set the autoscroll property to true.

I am using ASP.NET. I went over the provided layout examples but couldn't figure out solution. Is there an example of such an arrangement I can use.


<ext:Window
ID="winAddNewProductEntry" runat="server" Title="Add Products" Icon="ApplicationFormAdd" Height="500" Width="800" Hidden="true" ClientIDMode="Static"
BodyStyle="background-color: #fff;" BodyPadding="3" Modal="true" Layout="TableLayout">
<LayoutConfig>
<ext:TableLayoutConfig Columns="1" />
</LayoutConfig>

<Items>

<ext:Panel ID="pnSearchControls" runat="server" Title="Search Criteria">
<Content>
<table>
<tr>
<td>Keywords<br />
<ext:TextField ID="txtSearchProduct" runat="server" MinWidth="100" />
</td>
<td>Level 1<br />
<ext:ComboBox ID="cbLevel1" runat="server" Editable="false" Width="280px" QueryMode="Local" TriggerAction="All" EmptyText="Select Level 1" IDMode="Static">
<Listeners>
<Select Handler="#{cbLevel2}.clearValue(); #{stcbLevel2}.reload();" />
</Listeners>
</ext:ComboBox>
</td>

<td>Level 2<br />
<ext:ComboBox ID="cbLevel2" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 2" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel2" AutoLoad="false" OnReadData="LevelsRefresh" IDMode="Static">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="2" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
<Listeners>
<Select Handler="#{cbLevel3}.clearValue(); #{stcbLevel3}.reload();" />
</Listeners>
</ext:ComboBox>
</td>
</tr>
<tr>
<td>Category<br />
<ext:ComboBox ID="cbProductTypes" runat="server" Editable="false" MinWidth="100" />
</td>
<td>Level 3<br />
<ext:ComboBox ID="cbLevel3" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 3" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel3" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="3" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
<Listeners>
<Select Handler="#{cbLevel4}.clearValue(); #{stcbLevel4}.reload();" />
</Listeners>
</ext:ComboBox>
</td>
<td>Level 4<br />
<ext:ComboBox ID="cbLevel4" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 4" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel4" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="4" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
<Listeners>
<Select Handler="#{cbLevel5}.clearValue(); #{stcbLevel5}.reload();" />
</Listeners>
</ext:ComboBox>
</td>
</tr>
<tr>
<td>
<ext:Button runat="server" Text="Search Products" Icon="Application">
<DirectEvents>
<Click OnEvent="AddRow_Click" />
</DirectEvents>
</ext:Button>
</td>
<td>Level 5<br />
<ext:ComboBox ID="cbLevel5" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 5" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel5" AutoLoad="true" OnReadData="LevelsRefresh">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="5" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
</ext:ComboBox>
</td>
</tr>

</table>
</Content>
</ext:Panel>

<ext:GridPanel ID="gpCatProductEdit" runat="server" AutoScroll="true" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align ="StretchMax" />
</LayoutConfig>
<Store>
<ext:Store runat="server" AutoSync="false" ShowWarningOnFailure="true">
<Model>
<ext:Model runat="server" IDProperty="Id" Name="SelectedProductCatEntryItem" ClientIdProperty="Id" IDMode="Static">
<Fields>
<ext:ModelField Name="Id" Type="string" />
<ext:ModelField Name="Quantity" Type="Int" DefaultValue="1" />
<ext:ModelField Name="Duration" Type="Int" DefaultValue="1" />
<ext:ModelField Name="RequestTypeID" Type="Int" DefaultValue="1" />
<ext:ModelField Name="Category" Type="String" />
<ext:ModelField Name="Code" Type="String" />
<ext:ModelField Name="ProductIdName" Type="String" />
<ext:ModelField Name="PrepaymentCharge" Type="Float" />
<ext:ModelField Name="OneTimeCharge" Type="Float" />
<ext:ModelField Name="RecurringCharge" Type="Float" />
<ext:ModelField Name="EndDate" Type="String" />
<ext:ModelField Name="EffectiveDate" Type="String" />
<ext:ModelField Name="Level1" Type="String" />
<ext:ModelField Name="Level2" Type="String" />
<ext:ModelField Name="Level3" Type="String" />
<ext:ModelField Name="Level4" Type="String" />
<ext:ModelField Name="Level5" Type="String" />
<ext:ModelField Name="Manufacturer" Type="String" />
<ext:ModelField Name="Model" Type="String" />
<ext:ModelField Name="DataPackage" Type="String" />
<ext:ModelField Name="StoragePackage" Type="String" />
<ext:ModelField Name="ColorPackage" Type="String" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Exception Handler="
var error = operation.getError(),
message = Ext.isString(error) ? error : ('(' + error.status + ')' + error.statusText);
Ext.net.Notification.show({
iconCls : 'icon-exclamation',
html : message,
title : 'EXCEPTION',
autoScroll : true,
hideDelay : 5000,
width : 300,
height : 200
});" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Flex="1" Text="Quantity" DataIndex="Quantity" MinWidth="70" Align="Center">
<Editor>
<ext:NumberField runat="server" MinValue="1" MaxValue="1000" />
</Editor>
</ext:Column>

<ext:Column runat="server" Flex="1" Text="Duration" DataIndex="Duration" MinWidth="80" Align="Center">
<Editor>
<ext:NumberField runat="server" AllowDecimals="false" MinValue="1" MaxValue="1000" />
</Editor>
</ext:Column>

<ext:Column runat="server" Text="Request Type" Flex="1" DataIndex="RequestTypeID" MinWidth="120">
<Renderer Fn="reqTypeRenderer" />
<Editor>
<ext:ComboBox runat="server" QueryMode="Local" Editable="false" StoreID="reqTypeStore" DisplayField="Name" ValueField="ID" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Category" Flex="1" DataIndex="Category" MinWidth="70" />
<ext:Column runat="server" Text="Code" Flex="1" DataIndex="Code" MinWidth="130" />
<ext:Column runat="server" Text="Name" DataIndex="ProductIdName" MinWidth="250" />

<ext:NumberColumn runat="server" Text="Total First Month" Flex="1" DataIndex="PrepaymentCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
<ext:NumberColumn runat="server" Text="One-Time Charges" Flex="1" DataIndex="OneTimeCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
<ext:NumberColumn runat="server" Text="Reccuring Amount" Flex="1" DataIndex="RecurringCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
<ext:Column runat="server" Text="End Date" Flex="1" DataIndex="EndDate" MinWidth="100" Align="Right" />
<ext:Column runat="server" Text="Effective Date" Flex="1" DataIndex="EffectiveDate" MinWidth="100" Align="Center" />
<ext:Column runat="server" Text="Level 1" Flex="1" DataIndex="Level1" MinWidth="180" />
<ext:Column runat="server" Text="Level 2" Flex="1" DataIndex="Level2" MinWidth="180" />
<ext:Column runat="server" Text="Level 3" Flex="1" DataIndex="Level3" MinWidth="180" />
<ext:Column runat="server" Text="Level 4" Flex="1" DataIndex="Level4" MinWidth="180" />
<ext:Column runat="server" Text="Level 5" Flex="1" DataIndex="Level5" MinWidth="180" />
<ext:Column runat="server" Text="Manufacturer" Flex="1" DataIndex="Manufacturer" MinWidth="180" />
<ext:Column runat="server" Text="Model" Flex="1" DataIndex="Model" MinWidth="100" />
<ext:Column runat="server" Text="Data" Flex="1" DataIndex="DataPackage" MinWidth="90" />
<ext:Column runat="server" Text="Storage" Flex="1" DataIndex="StoragePackage" MinWidth="80" />
<ext:Column runat="server" Text="Color" Flex="1" DataIndex="ColorPackage" MinWidth="80" />
</Columns>
</ColumnModel>

<Plugins>
<ext:RowEditing runat="server" ClicksToEdit="1" />
</Plugins>
</ext:GridPanel>

</Items>
</ext:Window><ext:Window
ID="winAddNewProductEntry" runat="server" Title="Add Products" Icon="ApplicationFormAdd" Height="500" Width="800" Hidden="true" ClientIDMode="Static"
BodyStyle="background-color: #fff;" BodyPadding="3" Modal="true" Layout="TableLayout">
<LayoutConfig>
<ext:TableLayoutConfig Columns="1" />
</LayoutConfig>

<Items>

<ext:Panel ID="pnSearchControls" runat="server" Title="Search Criteria">
<Content>
<table>
<tr>
<td>Keywords<br />
<ext:TextField ID="txtSearchProduct" runat="server" MinWidth="100" />
</td>
<td>Level 1<br />
<ext:ComboBox ID="cbLevel1" runat="server" Editable="false" Width="280px" QueryMode="Local" TriggerAction="All" EmptyText="Select Level 1" IDMode="Static">
<Listeners>
<Select Handler="#{cbLevel2}.clearValue(); #{stcbLevel2}.reload();" />
</Listeners>
</ext:ComboBox>
</td>

<td>Level 2<br />
<ext:ComboBox ID="cbLevel2" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 2" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel2" AutoLoad="false" OnReadData="LevelsRefresh" IDMode="Static">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="2" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
<Listeners>
<Select Handler="#{cbLevel3}.clearValue(); #{stcbLevel3}.reload();" />
</Listeners>
</ext:ComboBox>
</td>
</tr>
<tr>
<td>Category<br />
<ext:ComboBox ID="cbProductTypes" runat="server" Editable="false" MinWidth="100" />
</td>
<td>Level 3<br />
<ext:ComboBox ID="cbLevel3" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 3" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel3" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="3" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
<Listeners>
<Select Handler="#{cbLevel4}.clearValue(); #{stcbLevel4}.reload();" />
</Listeners>
</ext:ComboBox>
</td>
<td>Level 4<br />
<ext:ComboBox ID="cbLevel4" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 4" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel4" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="4" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
<Listeners>
<Select Handler="#{cbLevel5}.clearValue(); #{stcbLevel5}.reload();" />
</Listeners>
</ext:ComboBox>
</td>
</tr>
<tr>
<td>
<ext:Button runat="server" Text="Search Products" Icon="Application">
<DirectEvents>
<Click OnEvent="AddRow_Click" />
</DirectEvents>
</ext:Button>
</td>
<td>Level 5<br />
<ext:ComboBox ID="cbLevel5" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 5" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel5" AutoLoad="true" OnReadData="LevelsRefresh">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="5" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
</ext:ComboBox>
</td>
</tr>

</table>
</Content>
</ext:Panel>

<ext:GridPanel ID="gpCatProductEdit" runat="server" AutoScroll="true" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align ="StretchMax" />
</LayoutConfig>
<Store>
<ext:Store runat="server" AutoSync="false" ShowWarningOnFailure="true">
<Model>
<ext:Model runat="server" IDProperty="Id" Name="SelectedProductCatEntryItem" ClientIdProperty="Id" IDMode="Static">
<Fields>
<ext:ModelField Name="Id" Type="string" />
<ext:ModelField Name="Quantity" Type="Int" DefaultValue="1" />
<ext:ModelField Name="Duration" Type="Int" DefaultValue="1" />
<ext:ModelField Name="RequestTypeID" Type="Int" DefaultValue="1" />
<ext:ModelField Name="Category" Type="String" />
<ext:ModelField Name="Code" Type="String" />
<ext:ModelField Name="ProductIdName" Type="String" />
<ext:ModelField Name="PrepaymentCharge" Type="Float" />
<ext:ModelField Name="OneTimeCharge" Type="Float" />
<ext:ModelField Name="RecurringCharge" Type="Float" />
<ext:ModelField Name="EndDate" Type="String" />
<ext:ModelField Name="EffectiveDate" Type="String" />
<ext:ModelField Name="Level1" Type="String" />
<ext:ModelField Name="Level2" Type="String" />
<ext:ModelField Name="Level3" Type="String" />
<ext:ModelField Name="Level4" Type="String" />
<ext:ModelField Name="Level5" Type="String" />
<ext:ModelField Name="Manufacturer" Type="String" />
<ext:ModelField Name="Model" Type="String" />
<ext:ModelField Name="DataPackage" Type="String" />
<ext:ModelField Name="StoragePackage" Type="String" />
<ext:ModelField Name="ColorPackage" Type="String" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Exception Handler="
var error = operation.getError(),
message = Ext.isString(error) ? error : ('(' + error.status + ')' + error.statusText);
Ext.net.Notification.show({
iconCls : 'icon-exclamation',
html : message,
title : 'EXCEPTION',
autoScroll : true,
hideDelay : 5000,
width : 300,
height : 200
});" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Flex="1" Text="Quantity" DataIndex="Quantity" MinWidth="70" Align="Center">
<Editor>
<ext:NumberField runat="server" MinValue="1" MaxValue="1000" />
</Editor>
</ext:Column>

<ext:Column runat="server" Flex="1" Text="Duration" DataIndex="Duration" MinWidth="80" Align="Center">
<Editor>
<ext:NumberField runat="server" AllowDecimals="false" MinValue="1" MaxValue="1000" />
</Editor>
</ext:Column>

<ext:Column runat="server" Text="Request Type" Flex="1" DataIndex="RequestTypeID" MinWidth="120">
<Renderer Fn="reqTypeRenderer" />
<Editor>
<ext:ComboBox runat="server" QueryMode="Local" Editable="false" StoreID="reqTypeStore" DisplayField="Name" ValueField="ID" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Category" Flex="1" DataIndex="Category" MinWidth="70" />
<ext:Column runat="server" Text="Code" Flex="1" DataIndex="Code" MinWidth="130" />
<ext:Column runat="server" Text="Name" DataIndex="ProductIdName" MinWidth="250" />

<ext:NumberColumn runat="server" Text="Total First Month" Flex="1" DataIndex="PrepaymentCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
<ext:NumberColumn runat="server" Text="One-Time Charges" Flex="1" DataIndex="OneTimeCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
<ext:NumberColumn runat="server" Text="Reccuring Amount" Flex="1" DataIndex="RecurringCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
<ext:Column runat="server" Text="End Date" Flex="1" DataIndex="EndDate" MinWidth="100" Align="Right" />
<ext:Column runat="server" Text="Effective Date" Flex="1" DataIndex="EffectiveDate" MinWidth="100" Align="Center" />
<ext:Column runat="server" Text="Level 1" Flex="1" DataIndex="Level1" MinWidth="180" />
<ext:Column runat="server" Text="Level 2" Flex="1" DataIndex="Level2" MinWidth="180" />
<ext:Column runat="server" Text="Level 3" Flex="1" DataIndex="Level3" MinWidth="180" />
<ext:Column runat="server" Text="Level 4" Flex="1" DataIndex="Level4" MinWidth="180" />
<ext:Column runat="server" Text="Level 5" Flex="1" DataIndex="Level5" MinWidth="180" />
<ext:Column runat="server" Text="Manufacturer" Flex="1" DataIndex="Manufacturer" MinWidth="180" />
<ext:Column runat="server" Text="Model" Flex="1" DataIndex="Model" MinWidth="100" />
<ext:Column runat="server" Text="Data" Flex="1" DataIndex="DataPackage" MinWidth="90" />
<ext:Column runat="server" Text="Storage" Flex="1" DataIndex="StoragePackage" MinWidth="80" />
<ext:Column runat="server" Text="Color" Flex="1" DataIndex="ColorPackage" MinWidth="80" />
</Columns>
</ColumnModel>

<Plugins>
<ext:RowEditing runat="server" ClicksToEdit="1" />
</Plugins>
</ext:GridPanel>

</Items>
</ext:Window>

Daniil
Aug 18, 2014, 2:04 PM
Hi @PANAYIOTISP,

According to what you've described, I can provide you with such an example.

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Window runat="server" Height="400" Width="400">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel runat="server" Title="Search conditions" Flex="1" />
<ext:Panel runat="server" Title="GridPanel" Flex="1" />
</Items>
</ext:Window>
</form>
</body>
</html>

You can use a GridPanel instead of the second Panel.

PANAYIOTISP
Aug 18, 2014, 2:40 PM
Thanks for the quick answer.

I have tried many combinations, including the one provided. The issue with the one provided is that the gridpanel does no show the scrollbar (both vertical and horizontal).

Check the attached screenshot of how this looks after applying the suggested change.

Thanks
Panayiotis

Daniil
Aug 18, 2014, 2:57 PM
I don't see any data in the GridPanel. Could you, please, clarify why you expect a vertical scrollbar to be appeared? I think it should not.

As for horizontal scrollbar, it appears for me if the combined width of the columns exceeds the GridPanel's width

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Window runat="server" Height="400" Width="400">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel runat="server" Title="Search conditions" Flex="1" />
<ext:GridPanel runat="server" Title="GridPanel" Flex="1">
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Column 1" Width="250" />
<ext:Column runat="server" Text="Column 2" Width="250" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Window>
</form>
</body>
</html>

PANAYIOTISP
Aug 18, 2014, 3:19 PM
Hi Danil,

as you can see from my code in the original post, the last column should had been the color, but instead it only shows until the first half of the total first month charge.

Daniil
Aug 18, 2014, 3:23 PM
Unfortunately, I cannot run your code, it throws Exceptions.

Also I would suggest you to use my example as a boilerplate and build the things up.

PANAYIOTISP
Aug 18, 2014, 4:00 PM
Hi Daniil,

I did followup your example as I mentioned, but still the result was the same.
To help out, I put everything in a simple ASP webform for you



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="dotCRMPortalV2.WebForm1" %>

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" class="no-js">
<head runat="server">
<ext:ResourcePlaceHolder runat="server" />
<title></title>
<script type="text/javascript">
var reqTypeRenderer = function (value) {
try {
var r = App.reqTypeStore.getById(value);

if (Ext.isEmpty(r)) {

return "";
}
return r.data.Name;
} catch (e) {
debugger;
return "";
}
};
</script>
<script runat="server">
public class ProductCatalogEntryItemx {

public string Id { get; set; }

public Nullable<int> Quantity { get; set; }
public Nullable<int> Duration { get; set; }
public int RequestTypeID { get; set; }

public string Category { get; set; }
public string Code { get; set; }
public string ProductName { get; set; }
public string DefaultUoMId { get; set; }
public Nullable<decimal> PrepaymentCharge { get; set; }
public Nullable<decimal> OneTimeCharge { get; set; }
public Nullable<decimal> RecurringCharge { get; set; }
public string EndDate { get; set; }
public string EffectiveDate { get; set; }
public string Level1 { get; set; }
public string Level2 { get; set; }
public string Level3 { get; set; }
public string Level4 { get; set; }
public string Level5 { get; set; }
public string Manufacturer { get; set; }
public string Model { get; set; }
public string DataPackage { get; set; }
public string StoragePackage { get; set; }
public string ColorPackage { get; set; }

} // Class: ProductCatalogEntryItemx


protected void Page_Load(object sender, EventArgs e) {

}


protected void LevelsRefresh(object sender, Ext.Net.StoreReadDataEventArgs e) {
var levelID = int.Parse(e.Parameters["Level"]);
//LoadDataForLevel(levelID);

}

protected void Search_Click(object sender, Ext.Net.DirectEventArgs e) {
}

protected void AddRow_Click(object sender, Ext.Net.DirectEventArgs e) {
}
</script>
</head>
<body>
<form id="frmMain" runat="server">
<div>
<ext:ResourceManager runat="server" ID="extNetRMan" FormID="frmMain" />

<ext:Button runat="server" Text="show window" ID="testbutton" Icon="EmoticonWink" >
<Listeners>
<Click Handler="#{winAddNewProductEntry}.show();"/>
</Listeners>
</ext:Button>

<ext:Window
ID="winAddNewProductEntry" runat="server" Title="Add Products" Icon="ApplicationFormAdd" Height="500" Width="800" Hidden="true" ClientIDMode="Static"
BodyStyle="background-color: #fff;" BodyPadding="3" Modal="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="pnSearchControls" runat="server" Title="Search Criteria">
<Content>
<table>
<tr>
<td>Keywords<br />
<ext:TextField ID="txtSearchProduct" runat="server" MinWidth="100" />
</td>
<td>Level 1<br />
<ext:ComboBox ID="cbLevel1" runat="server" Editable="false" Width="280px" QueryMode="Local" TriggerAction="All" EmptyText="Select Level 1" IDMode="Static">
<Listeners>
<Select Handler="#{cbLevel2}.clearValue(); #{stcbLevel2}.reload();" />
</Listeners>
</ext:ComboBox>
</td>

<td>Level 2<br />
<ext:ComboBox ID="cbLevel2" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 2" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel2" AutoLoad="false" OnReadData="LevelsRefresh" IDMode="Static">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="2" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
<Listeners>
<Select Handler="#{cbLevel3}.clearValue(); #{stcbLevel3}.reload();" />
</Listeners>
</ext:ComboBox>
</td>
</tr>
<tr>
<td>Category<br />
<ext:ComboBox ID="cbProductTypes" runat="server" Editable="false" MinWidth="100" />
</td>
<td>Level 3<br />
<ext:ComboBox ID="cbLevel3" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 3" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel3" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="3" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
<Listeners>
<Select Handler="#{cbLevel4}.clearValue(); #{stcbLevel4}.reload();" />
</Listeners>
</ext:ComboBox>
</td>
<td>Level 4<br />
<ext:ComboBox ID="cbLevel4" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 4" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel4" AutoLoad="true" OnReadData="LevelsRefresh" IDMode="Static">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="4" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
<Listeners>
<Select Handler="#{cbLevel5}.clearValue(); #{stcbLevel5}.reload();" />
</Listeners>
</ext:ComboBox>
</td>
</tr>
<tr>
<td>
<ext:Button runat="server" Text="Search Products" Icon="Application">
<DirectEvents>
<Click OnEvent="Search_Click" />
</DirectEvents>
</ext:Button>
</td>
<td>Level 5<br />
<ext:ComboBox ID="cbLevel5" runat="server" Width="280px" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="name" ValueField="id" EmptyText="Select Level 5" ValueNotFoundText="No Values" IDMode="Static" Enabled="false">
<Store>
<ext:Store runat="server" ID="stcbLevel5" AutoLoad="true" OnReadData="LevelsRefresh">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="id" Type="String" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Level" Value="5" Mode="Value" Action="read" />
</Parameters>
</ext:Store>
</Store>
</ext:ComboBox>
</td>
<td>
<ext:Button runat="server" Text="Accept Product Selection" Icon="Accept">
<DirectEvents>
<Click OnEvent="AddRow_Click" Before="return #{gpCatProductEdit}.store.isDirty();">
<ExtraParams>
<ext:Parameter Name="data" Value="#{gpCatProductEdit}.store.getChangedData()" Mode="Raw" Encode="true" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</td>
</tr>

</table>
</Content>
</ext:Panel>

<ext:GridPanel ID="gpCatProductEdit" runat="server" AutoScroll="true">
<Store>
<ext:Store runat="server" ShowWarningOnFailure="true">
<Model>
<ext:Model runat="server" IDProperty="Id" Name="ProductCatalogEntryItem" ClientIdProperty="Id" IDMode="Static">
<Fields>
<ext:ModelField Name="Id" Type="string" />
<ext:ModelField Name="Quantity" Type="Int" />
<ext:ModelField Name="Duration" Type="Int" />
<ext:ModelField Name="RequestTypeID" Type="Int" DefaultValue="1" />
<ext:ModelField Name="Category" Type="String" />
<ext:ModelField Name="Code" Type="String" />
<ext:ModelField Name="ProductName" Type="String" />
<ext:ModelField Name="PrepaymentCharge" Type="Float" />
<ext:ModelField Name="DefaultUoMId" Type="String" />
<ext:ModelField Name="OneTimeCharge" Type="Float" />
<ext:ModelField Name="RecurringCharge" Type="Float" />
<ext:ModelField Name="EndDate" Type="Date" DateFormat="dd-MMM-yyyy" />
<ext:ModelField Name="EffectiveDate" Type="Date" DateFormat="dd-MMM-yyyy" />
<ext:ModelField Name="Level1" Type="String" />
<ext:ModelField Name="Level2" Type="String" />
<ext:ModelField Name="Level3" Type="String" />
<ext:ModelField Name="Level4" Type="String" />
<ext:ModelField Name="Level5" Type="String" />
<ext:ModelField Name="Manufacturer" Type="String" />
<ext:ModelField Name="Model" Type="String" />
<ext:ModelField Name="DataPackage" Type="String" />
<ext:ModelField Name="StoragePackage" Type="String" />
<ext:ModelField Name="ColorPackage" Type="String" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Exception Handler="
var error = operation.getError(),
message = Ext.isString(error) ? error : ('(' + error.status + ')' + error.statusText);
Ext.net.Notification.show({
iconCls : 'icon-exclamation',
html : message,
title : 'EXCEPTION',
autoScroll : true,
hideDelay : 5000,
width : 300,
height : 200
});" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Flex="1" Text="Quantity" DataIndex="Quantity" MinWidth="70" Align="Center">
<Editor>
<ext:NumberField runat="server" AllowBlank="true" AllowDecimals="false" />
</Editor>
</ext:Column>

<ext:Column runat="server" Flex="1" Text="Duration" DataIndex="Duration" MinWidth="80" Align="Center">
<Editor>
<ext:NumberField runat="server" AllowBlank="true" AllowDecimals="false" />
</Editor>
</ext:Column>

<ext:Column runat="server" Text="Request Type" Flex="1" DataIndex="RequestTypeID" MinWidth="120">
<Renderer Fn="reqTypeRenderer" />
<Editor>
<ext:ComboBox runat="server" QueryMode="Local" Editable="false" StoreID="reqTypeStore" DisplayField="Name" ValueField="ID" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Category" Flex="1" DataIndex="Category" MinWidth="70" />
<ext:Column runat="server" Text="Code" Flex="1" DataIndex="Code" MinWidth="130" />
<ext:Column runat="server" Text="Name" DataIndex="ProductName" MinWidth="250" />

<ext:NumberColumn runat="server" Text="Total First Month" Flex="1" DataIndex="PrepaymentCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
<ext:NumberColumn runat="server" Text="One-Time Charges" Flex="1" DataIndex="OneTimeCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
<ext:NumberColumn runat="server" Text="Reccuring Amount" Flex="1" DataIndex="RecurringCharge" MinWidth="110" Align="Right" EmptyCellText="--" />
<ext:Column runat="server" Text="End Date" Flex="1" DataIndex="EndDate" MinWidth="100" Align="Right" />
<ext:Column runat="server" Text="Effective Date" Flex="1" DataIndex="EffectiveDate" MinWidth="100" Align="Center" />
<ext:Column runat="server" Text="Level 1" Flex="1" DataIndex="Level1" MinWidth="180" />
<ext:Column runat="server" Text="Level 2" Flex="1" DataIndex="Level2" MinWidth="180" />
<ext:Column runat="server" Text="Level 3" Flex="1" DataIndex="Level3" MinWidth="180" />
<ext:Column runat="server" Text="Level 4" Flex="1" DataIndex="Level4" MinWidth="180" />
<ext:Column runat="server" Text="Level 5" Flex="1" DataIndex="Level5" MinWidth="180" />
<ext:Column runat="server" Text="Manufacturer" Flex="1" DataIndex="Manufacturer" MinWidth="180" />
<ext:Column runat="server" Text="Model" Flex="1" DataIndex="Model" MinWidth="100" />
<ext:Column runat="server" Text="Data" Flex="1" DataIndex="DataPackage" MinWidth="90" />
<ext:Column runat="server" Text="Storage" Flex="1" DataIndex="StoragePackage" MinWidth="80" />
<ext:Column runat="server" Text="Color" Flex="1" DataIndex="ColorPackage" MinWidth="80" />
</Columns>
</ColumnModel>

<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="2" />
</Plugins>
</ext:GridPanel>

</Items>
</ext:Window>

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

Daniil
Aug 19, 2014, 5:31 AM
Comparing with my example, I don't see a Flex="1" setting for the GridPanel in your example.

PANAYIOTISP
Aug 20, 2014, 2:39 AM
Thanks Daniil,

that seems to have been the trick. I didn't anticipate flex to make this work