PDA

View Full Version : [CLOSED] RowExpander with more then one formpanel



trePjt
Sep 30, 2013, 2:30 AM
I have create a girdpanel as following example

http://examples2.ext.net/#/GridPanel/RowExpander/Shared_Component/

Now, I want to show different formpanel to user base on the record expand.

I have two ideas.
First one is to create two formpanel in the component tag of rowexpander, and set the visibility where render.
Second is create one formpanel, but add control base on the record in codebehind.

I have try the first one, but seems it cannot add more than one formpanel in component tag.
So which method I should use? Any example I can follow?
And how to get the rowrecord in codebehind?

Thank you.

trePjt
Sep 30, 2013, 2:57 AM
And I also need show two formpanel in same time. Is it possible?

Daniil
Sep 30, 2013, 5:12 AM
Hi @trePjt,

If there is limited amount of different FormPanels which you can predefine, then you could put those FormPanels into a container with CardLayout and choose a respective card into a RowExpander's Expand event.

If there is no way to predefine all FormPanel and it should be customized on the fly, then please investigate this example:
http://examples2.ext.net/#/GridPanel/RowExpander/Dynamic_GridPanels/

It renders inner GridPanels, but it is possible to render any other component inlcuding FormPanels.

trePjt
Sep 30, 2013, 5:59 AM
I have try to put two formpanel in a panel



<ext:RowExpander ID="repPrd" runat="server" SingleExpand="false">
<Component>
<ext:Panel runat="server">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
<Items>
<ext:TextField ID="txtLblLabel" Name="TMDITMNO" runat="server" ColumnWidth="0.25"/>
</Items>
<Listeners>
<AfterRender Handler="this.getForm().loadRecord(this.record);" />
</Listeners>
</ext:FormPanel>
<ext:FormPanel ID="FormPanel2" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
<Items>
<ext:TextField ID="TextField1" Name="TMDTICKET" runat="server" ColumnWidth="0.25"/>
</Items>
<Listeners>
<AfterRender Handler="this.getForm().loadRecord(this.record);" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
</Component>
</ext:RowExpander>


then is return error when the row expanding



loadRecord:function(a){this._record=a;return this.setValues(a.getData())}
'undefined' is null or not an object


It seems "this.record" not work when I put the formpanel in a panel.

Then I try do it in directmethod.


<ext:RowExpander ID="repPrd" runat="server" SingleExpand="false">
<Component>
<ext:Panel runat="server">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
<Items>
<ext:TextField ID="txtLblLabel" Name="TMDITMNO" runat="server" ColumnWidth="0.25"/>
</Items>
</ext:FormPanel>
<ext:FormPanel ID="FormPanel2" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
<Items>
<ext:TextField ID="TextField1" Name="TMDTICKET" runat="server" ColumnWidth="0.25"/>
</Items>
</ext:FormPanel>
</Items>
</ext:Panel>
</Component>
<DirectEvents>
<Expand OnEvent="rowExp"></Expand>
</DirectEvents>
</ext:RowExpander>


Codebehind



protected void rowExp(object sender, DirectEventArgs e)
{
RowSelectionModel sm = (RowSelectionModel)tblPrd.GetSelectionModel();
Store store = tblPrd.GetStore();

repPrd.CollapseRow(2);
//FormPanel fp = (FormPanel)repPrd.Component.First();
FormPanel fp = (FormPanel)Ext.Net.X.GetCmp("FormPanel1");
fp.LoadRecord(store.GetAt(sm.SelectedIndex));
//FormPanel1.LoadRecord(store.GetAt(sm.SelectedIndex ));
}


But this time it show me



'App.FormPanel1' is null or not an object


I have try some alternative method to get the formpanel, but the result is same.

Any solution??

trePjt
Sep 30, 2013, 11:15 AM
Above problem I solved by setting SingleExpand="true"

Now I recode my program

Previously the formpanel loadrecord by listener



<ext:FormPanel ID="FormPanel1" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
<Items>
<ext:TextField ID="txtLblLabel" Name="TMDITMNO" runat="server" ColumnWidth="0.25"/>
</Items>
<Listeners>
<AfterRender Handler="this.getForm().loadRecord(this.record);" />
</Listeners>
</ext:FormPanel>


But I want to do it at Directmethod, as I want to do some more process when when the row expand.
I change it to


<ext:FormPanel ID="FormPanel1" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
<Items>
<ext:TextField ID="txtLblLabel" Name="TMDITMNO" runat="server" ColumnWidth="0.25"/>
</Items>
<DirectEvents>
<AfterRender OnEvent="rowExp"></AfterRender>
</DirectEvents>
</ext:FormPanel>


The problem is as SingleExpand="true", AfterRender will only fire on first time.

So I add this directevent to rowexpander


<DirectEvents>
<Expand OnEvent="rowExp"></Expand>
</DirectEvents>


and the DirectEvents in codebehind like this



protected void hihi(object sender, DirectEventArgs e)
{
RowSelectionModel sm = (RowSelectionModel)tblPrd.GetSelectionModel();
Store store = tblPrd.GetStore();
FormPanel1.LoadRecord(store.GetAt(sm.SelectedIndex ));
}


however it still have problem. If I double click the row, it works fine.
If I expand the row by clicking the "+" sign on the left hand side of the record, the sm.SelectedIndex return the last row number instead of new one.
How can I solve this?

Daniil
Sep 30, 2013, 11:24 AM
A FormPanel doesn't have the "record" property, so using this.record in its AfterRender is not an option.

As for SelectedIndex. Well, an expanded row doesn't mean it is selected. I would not use it in a common case.

Please investigate this example.

Example

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

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var onExpand = function (rowExpander, record, body, row, rowIndex) {
var cards = rowExpander.component.layout;

if (rowIndex === 1) {
cards.setActiveItem(1);
} else {
cards.setActiveItem(0);
}

cards.getActiveItem().loadRecord(record);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" Height="300">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander runat="server">
<Component>
<ext:Container runat="server" Layout="CardLayout">
<Items>
<ext:FormPanel runat="server" Title="FormPanel1">
<Items>
<ext:TextField runat="server" Name="test1" />
<ext:TextField runat="server" Name="test2" />
</Items>
</ext:FormPanel>
<ext:FormPanel runat="server" Title="FormPanel2">
<Items>
<ext:TextField runat="server" Name="test3" />
</Items>
</ext:FormPanel>
</Items>
</ext:Container>
</Component>
<Listeners>
<Expand Fn="onExpand" />
</Listeners>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>

trePjt
Oct 02, 2013, 1:16 AM
Thanks for your help Daniil.

Can the above example change to direct event?
As I want to control the visibility of different formpanel there.

trePjt
Oct 02, 2013, 2:00 AM
I tried the above example, it returns "cards.setActiveItem" is undefined

trePjt
Oct 02, 2013, 2:10 AM
I tried the above example, it returns "cards.setActiveItem" is undefined

Sorry, just ignore this. I forgot to change to cardlayout

trePjt
Oct 02, 2013, 2:57 AM
I have solved the problem now.
I will show my code after finishing the modification.
Thanks for help.

Daniil
Oct 02, 2013, 3:06 PM
I will show my code after finishing the modification.


We much appreciate sharing solutions with the community. Thank you!

trePjt
Oct 03, 2013, 9:16 AM
Here is my code for reference


<ext:RowExpander>
<Component>
<ext:Container ID="Container2" runat="server" Layout="CardLayout">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" Header="false" Border="false" Layout="ColumnLayout" ButtonAlign="Center">
<Items>
<ext:TextField ID="txtLblLabel" Name="TMDITMNO" runat="server" ColumnWidth="0.15" Disabled="true" DisabledCls=""/>
<ext:TextField ID="TextField3" Name="TMDTICKET" runat="server" ColumnWidth="0.15"/>
<ext:TextField ID="TextField4" Name="TMDDESC" runat="server" ColumnWidth="0.25" Disabled="true" DisabledCls=""/>
<ext:TextField ID="TextField5" Name="TMDCOLOR" runat="server" ColumnWidth="0.05" Disabled="true" DisabledCls=""/>
<ext:TextField ID="TextField6" Name="TMDWIDTH" runat="server" ColumnWidth="0.05" Disabled="true" DisabledCls=""/>
<ext:TextField ID="TextField7" Name="TMDUNIT" runat="server" ColumnWidth="0.05" Disabled="true" DisabledCls=""/>
<ext:TextField ID="TextField8" Name="TMDRMK" runat="server" ColumnWidth="0.25"/>
</Items>
<Buttons>
<ext:Button ID="cmdPrdCorSave" runat="server" Text="_LblSave" Icon="Disk">
<Listeners>
<Click Handler="var grid = #{tblPrd}, form = #{FormPanel1};
grid.getRowExpander().collapseAll();
form.getForm().updateRecord(form.record);grid.stor e.sync();" />
</Listeners>
</ext:Button>
<ext:Button ID="cmdPrdCorCancel" runat="server" Text="_LblCancel" Icon="Decline">
<Listeners>
<Click Handler="var grid = #{tblPrd}, form = #{FormPanel1};
grid.getRowExpander().collapseAll();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
<ext:Container ID="Container3" runat="server">
<Items>
<ext:FormPanel ID="FormPanel2" runat="server" Title="_Add a New Product" Border="false" ButtonAlign="Center">
<Items>
<ext:TextField ID="txtPrdAddNTicket" Name="TMDTICKET" runat="server" />
<ext:TextField ID="txtPrdAddNRemark" Name="TMDRMK" runat="server" />
<ext:TextField ID="TextField2" Name="TMDDEVELOP" runat="server"/>
</Items>
<Buttons>
<ext:Button ID="cmdPrdAddNSave" runat="server" Text="_LblSave" Icon="Disk">
<Listeners>
<Click Handler="var grid = #{tblPrd}, form = #{FormPanel2};
grid.getRowExpander().collapseAll();
form.getForm().updateRecord(form.record);grid.stor e.sync();" />
</Listeners>
</ext:Button>
<ext:Button ID="cmdPrdAddNCancel" runat="server" Text="_LblCancel" Icon="Decline">
<Listeners>
<Click Handler="var grid = #{tblPrd}, form = #{FormPanel2};
grid.getRowExpander().collapseAll();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
<ext:FormPanel ID="FormPanel4" runat="server" Title="_Development" Border="false" ButtonAlign="Center">
<Items>
<ext:TextField ID="txtPrdAddDItmNo" Name="TMDITMNO" runat="server"/>
<ext:TextField ID="txtPrdAddDTicket" Name="TMDTICKET" runat="server"/>
<ext:TextField ID="txtPrdAddDDesc" Name="TMDDESC" runat="server" />
<ext:TextField ID="txtPrdAddDColor" Name="TMDCOLOR" runat="server" />
<ext:TextField ID="txtPrdAddDWidth" Name="TMDWIDTH" runat="server" />
<ext:TextField ID="txtPrdAddDUnit" Name="TMDUNIT" runat="server" />
<ext:TextField ID="txtPrdAddDRmk" Name="TMDRMK" runat="server"/>
<ext:TextField ID="TextField1" Name="TMDDEVELOP" runat="server"/>
</Items>
<Buttons>
<ext:Button ID="cmdPrdAddDSave" runat="server" Text="_LblSave" Icon="Disk">
<Listeners>
<Click Handler="var grid = #{tblPrd}, form = #{FormPanel4};
grid.getRowExpander().collapseAll();
form.getForm().updateRecord(form.record);grid.stor e.sync();" />
</Listeners>
</ext:Button>
<ext:Button ID="cmdPrdAddDCancel" runat="server" Text="_LblCancel" Icon="Decline">
<Listeners>
<Click Handler="var grid = #{tblPrd}, form = #{FormPanel4};
grid.getRowExpander().collapseAll();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</Items>
</ext:Container>
</Items>
</ext:Container>
</Component>
<Listeners>
<Expand Fn="onExpand" />
</Listeners>
</ext:RowExpander>

JAVASCRIPT



var onExpand = function (rowExpander, record, body, row, rowIndex) {
var cards = rowExpander.component.layout;

if (record.get('TMDITMNO') === '') {
cards.setActiveItem(1);
cards.getActiveItem().items.getAt(0).loadRecord(re cord);
record.set('TMDDEVELOP','Y');
cards.getActiveItem().items.getAt(1).loadRecord(re cord);
} else {
cards.setActiveItem(0);
cards.getActiveItem().loadRecord(record);
}
};

Daniil
Oct 03, 2013, 12:21 PM
Thank you for sharing!