PDA

View Full Version : [CLOSED] Ext:Hidden value types 101



cwolcott
Jan 07, 2013, 10:31 PM
I am little weak/confused on javascript and if/how ext:Hidden can hold various types of values?



<ext:Hidden ID="hRequestCompleted" runat="server" />


If I assign it from the server side



//Code behind
hRequestCompleted.SetValue(true);


Inspecting the control shows:

App.hRequestCompleted.value is true,
App.hRequestCompleted.rawValue is "true"


So in Javascript I can say:



if (App.hRequestCompleted.value) do something;


So what is the proper way in javascript to assign hRequestCompleted so it represents a boolean?

I tried to perform the following in javascript:


App.hRequestCompleted.setValue(false);


Inspecting the control shows:

App.hRequestCompleted.value is "true",
App.hRequestCompleted.rawValue is "true"


But performing the following in javascript gives me what I want (except rawValue is not set):


App.hRequestCompleted.value = false;


Inspecting the control shows:

App.hRequestCompleted.value is true,
App.hRequestCompleted.rawValue is ""


What is the proper way to assign the field so I can use the value for boolean testing? It is getting late and I must not have had enough sugar and caffeine.

Aurelio
Jan 07, 2013, 11:21 PM
Hi..CWolcott

This for me work ok, it's assign the value false correctly:

App.hRequestCompleted.setValue(false);



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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
hRequestCompleted.SetValue(true);
}

</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function testClick() {

alert(App.hRequestCompleted.value);
App.hRequestCompleted.setValue(false);
alert(App.hRequestCompleted.value);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" HideInDesign="True" Theme="Gray" />
<ext:Hidden ID="hRequestCompleted" runat="server" />
<ext:SplitButton ID="SplitButton1" runat="server" Text="Test" Region="Center">

<Listeners>
<Click Handler="testClick()"></Click>
</Listeners>
</ext:SplitButton>
</form>
</body>
</html>


Thanks
Aurelio

cwolcott
Jan 08, 2013, 1:37 AM
Hi..CWolcott

This for me work ok, it's assign the value false correctly:


If you actually inspect App.hRequestCompleted via Chrome:

App.hRequestCompleted is true (Boolean) after the window is display. After clicking on the button App.hRequestCompleted is "false" (string).

I was attempting to always have App.hRequestCompleted be a boolean value. so I could write javascript like:



if (App.hRequestCompleted.value) <i>do something</i>;


instead of


if (App.hRequestCompleted.getValue() == "true") <i>do something</i>;

Aurelio
Jan 08, 2013, 3:42 AM
HI.. cwolcott


I was attempting to always have App.hRequestCompleted be a boolean value. so I could write javascript like:

1 if (App.hRequestCompleted.value) <i>do something</i>;


The problem is the javascript: App.hRequestCompleted.setValue(false);
convert the value to a string..

Where work ok for me :)



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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
hRequestCompleted.SetValue(true);

}

</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function testClick() {


if (App.hRequestCompleted.value) {
alert("True", App.hRequestCompleted.value);
}
else {
alert("False", App.hRequestCompleted.value);
}

App.hRequestCompleted.value = false;
c = typeof (App.hRequestCompleted.value);
alert(App.hRequestCompleted.value);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" HideInDesign="True" Theme="Gray" />
<ext:Hidden ID="hRequestCompleted" runat="server" />
<ext:SplitButton ID="SplitButton1" runat="server" Text="Test" Region="Center">

<Listeners>
<Click Handler="testClick()"></Click>
</Listeners>
</ext:SplitButton>
</form>
</body>
</html>


Thanks
Aurelio

Daniil
Jan 08, 2013, 9:53 AM
Hi everybody,

Hidden uses an input HTML element. It deals with strings. Generally, Hidden is designed rather to submit things, not store.

Maybe, you could use a JavaScript property or a variable to store something?

If you really need a Hidden field, you could implement its rawToValue method.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Base-method-rawToValue

Example

<ext:Hidden ID="Hidden1" runat="server">
<CustomConfig>
<ext:ConfigItem
Name="rawToValue"
Value="function (rawValue) { return rawValue === 'true'; }"
Mode="Raw" />
</CustomConfig>
</ext:Hidden>

cwolcott
Jan 08, 2013, 10:59 AM
I guess that I am incorrectly using ext:Hidden as client side storage to make various javascript routines cleaner to read and I use them to pass ExtraParams in DirectEvents. For example I defined:



<ext:Hidden ID="hRequestId runat="server" ClientIDMode="Static" />
<ext:GridPanel ID="RequestGridPanel runat="server" ...... >
....


I was using hRequestId to hold the unique identifier of the row selected. It was set during the SelectionChange listener for the Grids SelectionModel. I used it in the following ways.


DirectEvent ExtraParams

<ext:Parameter Name="RequestId" value="hRequestId.value" Mode="Raw" />

** If I still use the hidden control I could have just called hRequestId.Value on the server side instead of passing an ext:Parameter.
** If I remove the hidden control I could have just passed an ext:Parameter with a value="#{RequestGridPanel}.getSelectionModel().getLastSel ected().data.RequestId"

I will change my code around to not use ext:Hidden controls incorrectly and implement your suggestion on configuring the "rawToValue" where and if needed.

Thanks ...

Daniil
Jan 08, 2013, 11:24 AM
Yes, Chris, if you submit some data via ExtraParams, you don't need Hiddens.

In your specific case, I think you chose the best solution to use the special method, i.e. the getLastSelected one.

In another case, please note that you can store anything as a value of some JavaScript property.

For example,

grid.lastSelectedId = record.getId();

cwolcott
Jan 08, 2013, 1:16 PM
I defined the following for my GridPanel



<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single" AllowDeselect="true" >
<Listeners>
<SelectionChange Fn="selectRequestRow"
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>


The signature for the event is:


function selectRequestRow(selectionModel, records) { }


What is the preferred way to access the Grid in the function:

Does the selectionModel now its grid?
Reference it globally App.RequestsGridPanel
Create my own function passing in #{RequestsGridPanel} as an attribute.

Daniil
Jan 08, 2013, 2:29 PM
I would use

selectionModel.view.panel
to be independent from ids.

"view" is a view which the selection model is attached to.

"panel" is a panel (in your case a GridPanel) which the view is attached to.

cwolcott
Jan 08, 2013, 3:15 PM
Perfect. Please close the thread.