PDA

View Full Version : [CLOSED] Setting a ComboBox read-only w/o affecting the Triggers



Peter.Treier
May 03, 2016, 1:29 PM
Good Afternoon

I need to set a ComboBox in a 'read-only' mode so that the user can not change the selection. But the user should be able to clear the combo by clicking a Trigger...

Any Idea on how to Disable the Box and let the Trigger be enabled ?

Peter

fabricio.murta
May 03, 2016, 6:47 PM
Hello Peter!

I believe Editable="false" is what you want!

Peter.Treier
May 04, 2016, 10:41 AM
Right, that's it :-)

Peter.Treier
May 04, 2016, 1:16 PM
But there is something that doesn't work...

I'd like to set the Combo as not editable as soon as I've set the Value in Codebehind.

Here's an Example :


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ComboBoxBlurCodeBehind.aspx.cs" Inherits="Ext.Net.Forum.ComboBoxBlurCodeBehind" %>


<script runat="server">

protected void Page_Load(object sender, EventArgs e)
{
var store = cboTest.GetStore();

store.DataSource = new object[]
{
new object[] {"AL", "Alabama", "The Heart of Dixie"},
new object[] {"AK", "Alaska", "The Land of the Midnight Sun"},
new object[] {"AZ", "Arizona", "The Grand Canyon State"},
new object[] {"AR", "Arkansas", "The Natural State"},
new object[] {"CA", "California", "The Golden State"},
new object[] {"WA", "Washington", "Green Tree State"}
};

store.DataBind();

cboTest.Value = "AR";
cboTest.Editable= false; //DOES NOT WORK !?
}

</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server"/>

<ext:ComboBox runat="server" ID="cboTest" FieldLabel="Select a single state" DisplayField="name" Width="320" LabelWidth="130" QueryMode="Local" TypeAhead="true">
<Store>
<ext:Store runat="server" AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="abbr"/>
<ext:ModelField Name="name"/>
<ext:ModelField Name="slogan"/>
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader/>
</Reader>
</ext:Store>
</Store>

<Listeners>
<Blur Handler="if(this.getRawValue( ) !== '') this.setEditable(false);"></Blur>
</Listeners>

<Triggers>
<ext:FieldTrigger Icon="Clear"/>
</Triggers>
<Listeners>
<TriggerClick Handler="this.clearValue();this.setEditable(true);"/>
</Listeners>

</ext:ComboBox>

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

The Blur seems to work, she is non editable as soon as I click in the Combo and leaf with Tab (The Combo isn't grey but it is impossible to write into the box - have no idea why the box doesn't appear in grey !?)

What can I do the set the Box Editable(False) from Code Behind ?

Peter

Peter.Treier
May 04, 2016, 2:17 PM
Sorry, found the Problem - was in a old JS Class we used :-/

fabricio.murta
May 05, 2016, 9:09 PM
Okay! Glad you could make it to work!

Just a side note about your simplified example -- that you may have left to keep the sample simple: Page_Load() is run from every postback or ajax call, so that's why you often see in Examples Explorer that the function has either (or both) tests:


if (!X.IsAjaxRequest) {
...
}

if (!IsPostBack)
{
...
}


For example, if you had a code to display a message during load without one of those tests, it would be run at every direct method/event triggered on the page.

Peter.Treier
May 06, 2016, 6:46 AM
Thanks Fabricio for the hint, I normally do that...