PDA

View Full Version : [CLOSED] GridPanel SelectionModel with Loader



softmachine2011
Jul 13, 2012, 11:49 AM
Hi,

We need to build a DropDownField with a pageable and multi-selectable GridPanel inside. And this control should be placed into a ButtonGroup loaded dynamically.

First, we would like to have GridPanel width greater than DropDown control size. Something like this example:

http://examples2.ext.net/#/Form/ComboBox/Two_Columns/

Does this possible?

But our main problem now is regarding SelectionModel when we load this UserControl using a Loader:


<ext:ButtonGroup
runat="server"
Height="97"
Title="Sample"
HeaderPosition="Bottom"
Columns="1">
<Items>
<ext:DropDownField runat="server" Width="160" FieldLabel="Grid" LabelAlign="Top"
LabelStyle="line-height: 7px; padding-top: 2px;" TriggerIcon="Combo">
<Component>

<ext:GridPanel ID="GridPanel1" runat="server" Width="200" Height="300" Header="false" Border="false">
<View>
<ext:GridView runat="server" StripeRows="true" TrackOver="true" LoadMask="false" LoadingUseMsg="false" />
</View>
<Store>
<ext:Store ID="Store1" runat="server" RemoteSort="true" ShowWarningOnFailure="false" PageSize="10">
<Proxy>
<ext:AjaxProxy Url='<%# this.Page.GetRouteUrl("Data", new { controller="Sample", action="List" }) %>'
AutoDataBind="true">
<Reader>
<ext:JsonReader IDProperty="Id" Root="data" TotalProperty="total" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Name" Type="String" SortDir="ASC" />
<ext:ModelField Name="Description" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Name" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="Id" Text="Id" Hidden="true" Hideable="false" />
<ext:Column runat="server" DataIndex="Name" Text="Name" Width="100">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Description" Text="Description" Width="200">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" Mode="Multi" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" StoreID="Store1" DisplayInfo="false" Weight="10" />
</BottomBar>
</ext:GridPanel>
</Component>
</ext:DropDownField>
</Items>
</ext:ButtonGroup>

If we register the control in a view, there is no problem. But if we load it dynamically, then nothing is shown. Removing SelectionModel tag makes it works again.

Any suggestion about these problems?

Thanks.

Vladimir
Jul 13, 2012, 3:03 PM
First, we would like to have GridPanel width greater than DropDown control size.

Use MatchFieldWidth="false" fro DropDownField



If we register the control in a view, there is no problem. But if we load it dynamically, then nothing is shown. Removing SelectionModel tag makes it works again.

I cannot reproduce the issue, please provide test sample
Here is my test case

Page


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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="Child.ascx" TagName="Test" TagPrefix="ext" %>

<script runat="server">
[DirectMethod]
public static string UserControl()
{
return ComponentLoader.ToConfig("Child.ascx");
}
</script>

<!DOCTYPE html>

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

<ext:Container runat="server">
<Loader Mode="Component" DirectMethod="#{DirectMethods}.UserControl" />
</ext:Container>
</form>
</body>
</html>


UserControl


<%@ Control Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<ext:ButtonGroup
runat="server"
Height="97"
Title="Sample"
HeaderPosition="Bottom"
Columns="1">
<Items>
<ext:DropDownField runat="server" Width="160" FieldLabel="Grid" LabelAlign="Top"
LabelStyle="line-height: 7px; padding-top: 2px;" TriggerIcon="Combo">
<Component>

<ext:GridPanel ID="GridPanel1" runat="server" Width="200" Height="300" Header="false" Border="false">
<View>
<ext:GridView runat="server" StripeRows="true" TrackOver="true" LoadMask="false" LoadingUseMsg="false" />
</View>
<Store>
<ext:Store ID="Store1" runat="server" RemoteSort="true" ShowWarningOnFailure="false" PageSize="10">
<Proxy>
<ext:AjaxProxy Url="FakeUrl">
<Reader>
<ext:JsonReader IDProperty="Id" Root="data" TotalProperty="total" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Name" Type="String" SortDir="ASC" />
<ext:ModelField Name="Description" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Name" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="Id" Text="Id" Hidden="true" Hideable="false" />
<ext:Column runat="server" DataIndex="Name" Text="Name" Width="100">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Description" Text="Description" Width="200">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" Mode="Multi" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" StoreID="Store1" DisplayInfo="false" Weight="10" />
</BottomBar>
</ext:GridPanel>
</Component>
</ext:DropDownField>
</Items>
</ext:ButtonGroup>

softmachine2011
Jul 16, 2012, 1:32 PM
Well,

Trying to move the same behaviour to a TriggerField, with the GridPanel inside a Window, instead of a DropDownField, I get more detailed information about the error.

It is related with Namespace. We have a blank value defined in our ResourceManager, so we must add the same property value to the Window, but also for CheckSelectionModel (or any other SelectionModel), because generated code is using App:


window.App.idef877913baf0ea9a=Ext.create("Ext.selection.CheckboxModel", ... );

In this way, if we add Namespace="" to CheckSelectionModel in DropDownField, it works without errors.

Is this a normal behaviour?

Vladimir
Jul 16, 2012, 2:04 PM
Namespace is inherited from parent control, so if a grid with selection model inside a window with empty namespace then the grid and selection model will use empty namespace automatically. Please provide test sample (which we can be used without any changes on our side)

If you use empty namespace globally then it is better to set it inside web.config instead RersourceManager

softmachine2011
Jul 17, 2012, 7:45 AM
Thanks.

It works better setting these parameters at Web.config. In this way, there is no need to set blank namespace at Window and SelectionModel controls.

Sorry, but at the moment we are really busy moving our full application to v2.X, trying to perform new developments and dealing our bugs and with new v2.X bugs. This is harder than we expected, and our views are complex enough to build a simple sample test in all cases.

Thanks again, for your kind help.