PDA

View Full Version : [CLOSED] GridPanel, through the "ValidityChange" FormPanel



opendat2000
Sep 01, 2015, 10:43 PM
Hi Community !

I wanna know if it’s possible to enable a button when we enter a data in a GridPanel Control, through the "ValidityChange" from FormPanel Control.

I implemented the following example to illustrate my issue, I accept suggestions ideas or comments




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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
}
}

protected void Button1_Click(object sender, DirectEventArgs e)
{
object theObject = new
{
Column1 = TextField1.Text,
Column2 = TextField2.Text,
Column3 = TextField3.Text,
};

Store1.Add(theObject);
}
</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" DefaultAnchor="90%">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server"
Region="North"
Margins="5 5 5 5"
BodyPadding="5"
Frame="true">
<Listeners>
<ValidityChange Handler="#{Button1}.setDisabled(!valid);" />
</Listeners>
<Items>
<ext:TextField ID="TextField1" runat="server" FieldLabel="Column1" AllowBlank="false" />
<ext:TextField ID="TextField2" runat="server" FieldLabel="Column2" AllowBlank="false" />
<ext:TextField ID="TextField3" runat="server" FieldLabel="Column3" AllowBlank="false" />
</Items>
<DockedItems>
<ext:Toolbar ID="Toolbar1" runat="server" Dock="Top" >
<Items>
<ext:ToolbarFill />
<ext:Button ID="Button1" runat="server" Text="Add" Icon="Add" Disabled="true">
<DirectEvents>
<Click OnEvent="Button1_Click"></Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Save" Icon="Disk" Disabled="true" />
</Items>
</ext:Toolbar>

</DockedItems>
</ext:FormPanel>

<ext:GridPanel ID="GridPanel1" runat="server"
Height="250"
Width="400"
Title="GridPanel1"
ForceFit="true"
Border="false"
Margins="0 5 5 5"
Frame="true">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Column1" Type="String"></ext:ModelField>
<ext:ModelField Name="Column2" Type="String"></ext:ModelField>
<ext:ModelField Name="Column3" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Listeners>
<DataChanged Handler="#{Button2}.setDisabled(#{GridPanel1}.getStore().ge tCount() > 0 ? false : true);" />
</Listeners>
</ext:Store>
</Store>

<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Column1" DataIndex="Column1"></ext:Column>
<ext:Column ID="Column2" runat="server" Text="Column2" DataIndex="Column2" ></ext:Column>
<ext:Column ID="Column3" runat="server" Text="Column3" DataIndex="Column3" ></ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Viewport>

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



I accept suggestions ideas or comments

Regards.

Daniil
Sep 01, 2015, 11:53 PM
Hi @opendat2000,


when we enter a data in a GridPanel Control

Please clarify what exactly you mean.

Sorry, I am not entirely understand the requirement. Please elaborate.

opendat2000
Sep 02, 2015, 3:32 PM
Hi Daniil

When I insert an entry in the control store, the button "Button2" it must be enabled, so I implement the following, but not working




<Listeners>
<ValidityChange Handler="#{Button2}.setDisabled(#{GridPanel1}.getStore().ge tCount() > 0 ? false : true);" />
</Listeners>

fabricio.murta
Sep 04, 2015, 12:02 AM
Hello @opendat2000

Thank you for this simple straightforward sample to illustrate your issue. It really makes it easier for us to determine and give you a solution for your problem.

Well, short answer is no, you can't use ValidityChange for that purpose. You must use another event on the GridPanel1 store to enable the button once valid input is added there.

Longer answer is because validity does not actually change when you just add an entry to the grid. Validity is only authenticating data in the form, not the grid. If you just click 'Add' no field in the form will change at all, so no validity change will ever happen.

In your example, follow this workflow:
1. fill column1 column2 and column3 with 'test'.
2. once you press the first char on 'column3' (assuming you followed the order), the 'add' button (button1) will become available.
At this point one validityChange has been triggered
3. Click add, the entry will be shown on the gridPanel.
4. Erase any of the Column1, Column2 or Column3 field. The 'save' button will become available!
At this point another validityChange has been triggered

Essentially, the 'save' button logic is bound to the contents of the grid. So the event which enables/disables it must be bound to the grid's store. For that, I can suggest you using the store's 'Change' event.

Said words in code, I believe this version could fulfill your needs:


<%@ 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)
{
}
}

protected void Button1_Click(object sender, DirectEventArgs e)
{
object theObject = new
{
Column1 = TextField1.Text,
Column2 = TextField2.Text,
Column3 = TextField3.Text,
};

Store1.Add(theObject);
}
</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" DefaultAnchor="90%">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server"
Region="North"
Margins="5 5 5 5"
BodyPadding="5"
Frame="true">
<Listeners>
<ValidityChange Handler="#{Button1}.setDisabled(!valid);" />
</Listeners>
<Items>
<ext:TextField ID="TextField1" runat="server" FieldLabel="Column1" AllowBlank="false" />
<ext:TextField ID="TextField2" runat="server" FieldLabel="Column2" AllowBlank="false" />
<ext:TextField ID="TextField3" runat="server" FieldLabel="Column3" AllowBlank="false" />
</Items>
<DockedItems>
<ext:Toolbar ID="Toolbar1" runat="server" Dock="Top">
<Items>
<ext:ToolbarFill />
<ext:Button ID="Button1" runat="server" Text="Add" Icon="Add" Disabled="true">
<DirectEvents>
<Click OnEvent="Button1_Click"></Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Save" Icon="Disk" Disabled="true" />
</Items>
</ext:Toolbar>

</DockedItems>
</ext:FormPanel>

<ext:GridPanel ID="GridPanel1" runat="server"
Height="250"
Width="400"
Title="GridPanel1"
ForceFit="true"
Border="false"
Margins="0 5 5 5"
Frame="true">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Column1" Type="String"></ext:ModelField>
<ext:ModelField Name="Column2" Type="String"></ext:ModelField>
<ext:ModelField Name="Column3" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Listeners>
<DataChanged Handler="#{Button2}.setDisabled(#{GridPanel1}.getStore().ge tCount() > 0 ? false : true);" />
</Listeners>
</ext:Store>
</Store>

<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Column1" DataIndex="Column1"></ext:Column>
<ext:Column ID="Column2" runat="server" Text="Column2" DataIndex="Column2"></ext:Column>
<ext:Column ID="Column3" runat="server" Text="Column3" DataIndex="Column3"></ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>


Hope this helps!

opendat2000
Sep 07, 2015, 9:33 PM
Hi Fabricio,

Thanks a lot for your reply.

Please close the thread.

Saludos
Mauricio.

Note: I modified the code, to provide in the community.