PDA

View Full Version : [CLOSED] template



CarWise
Feb 07, 2013, 1:49 PM
Hi,

Trying to create a combo in which i'm able to disable some items (so, sitll visible, but not selectable)
How to achieve ? I've found a 1.* example, but not able to ' convert' to 2.* ..

For this test example I would like to disable all items with 'CT' abbr ..



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


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


<script runat="server">

private object TestData
{
get
{
return 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[] { "CO", "Colorado", "The Mountain State" },
new object[] { "CT", "Connecticut", "The Constitution State" },
new object[] { "DE", "Delaware", "The First State" },
new object[] { "DC", "District of Columbia", "The Nation's Capital" },
new object[] { "FL", "Florida", "The Sunshine State" },
new object[] { "GA", "Georgia", "The Peach State" },
new object[] { "HI", "Hawaii", "The Aloha State" },
new object[] { "ID", "Idaho", "Famous Potatoes" },
new object[] { "IL", "Illinois", "The Prairie State" },
new object[] { "IN", "Indiana", "The Hospitality State" },
new object[] { "IA", "Iowa", "The Corn State" },
new object[] { "KS", "Kansas", "The Sunflower State" },
new object[] { "KY", "Kentucky", "The Bluegrass State" },
new object[] { "LA", "Louisiana", "The Bayou State" },
new object[] { "ME", "Maine", "The Pine Tree State" },
new object[] { "MD", "Maryland", "Chesapeake State" },
new object[] { "MA", "Massachusetts", "The Spirit of America" },
new object[] { "MI", "Michigan", "Great Lakes State" },
new object[] { "MN", "Minnesota", "North Star State" },
new object[] { "MS", "Mississippi", "Magnolia State" },
new object[] { "MO", "Missouri", "Show Me State" },
new object[] { "MT", "Montana", "Big Sky Country" },
new object[] { "NE", "Nebraska", "Beef State" },
new object[] { "NV", "Nevada", "Silver State" },
new object[] { "NH", "New Hampshire", "Granite State" },
new object[] { "NJ", "New Jersey", "Garden State" },
new object[] { "NM", "New Mexico", "Land of Enchantment" },
new object[] { "NY", "New York", "Empire State" },
new object[] { "NC", "North Carolina", "First in Freedom" },
new object[] { "ND", "North Dakota", "Peace Garden State" },
new object[] { "OH", "Ohio", "The Heart of it All" },
new object[] { "OK", "Oklahoma", "Oklahoma is OK" },
new object[] { "OR", "Oregon", "Pacific Wonderland" },
new object[] { "PA", "Pennsylvania", "Keystone State" },
new object[] { "RI", "Rhode Island", "Ocean State" },
new object[] { "SC", "South Carolina", "Nothing Could be Finer" },
new object[] { "SD", "South Dakota", "Great Faces, Great Places" },
new object[] { "TN", "Tennessee", "Volunteer State" },
new object[] { "TX", "Texas", "Lone Star State" },
new object[] { "UT", "Utah", "Salt Lake State" },
new object[] { "VT", "Vermont", "Green Mountain State" },
new object[] { "VA", "Virginia", "Mother of States" },
new object[] { "WA", "Washington", "Green Tree State" },
new object[] { "WV", "West Virginia", "Mountain State" },
new object[] { "WI", "Wisconsin", "America's Dairyland" },
new object[] { "WY", "Wyoming", "Like No Place on Earth" }
};
}
}
</script>


<!DOCTYPE html>


<html>
<head id="Head1" runat="server">
<title>Combo Boxes - Ext.NET Examples</title>
<script type="text/javascript">
var getAttributes = function (value) {
var cls = "class='x-combo-list-item";
if (value != 'CT') {
return cls + "'";
} else {
return cls + " disabled-item'";
}
}
</script>
<link href="../Style/StyleSheet.css" rel="stylesheet" type="text/css" />


<style type="text/css">
.disabled-item {
color: gray;
padding : 2px;
}
.disabled-item.x-combo-selected {
border: 1px solid white !important;
background-color:inherit;
cursor: default;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />


<ext:ObjectHolder ID="DataHolder" runat="server" />
<ext:ComboBox ID="ComboBox2"
runat="server"
FieldLabel="Select a single state"
DisplayField="name"
Width="320"
LabelWidth="130"
QueryMode="Local">

<Store>
<ext:Store ID="Store2" runat="server" Data="<%# TestData %>" AutoDataBind="true">
<Model>
<ext:Model ID="Model2" 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>

<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div>{name}</div>
</Html>
</ItemTpl>
</ListConfig>
</ext:ComboBox>
</form>
</body>
</html>

Daniil
Feb 07, 2013, 2:10 PM
Hello Martin,



How to achieve ? I've found a 1.* example

Please share the link.

CarWise
Feb 07, 2013, 2:26 PM
Hello Martin,



Please share the link.

Sorry.. here's the link: http://forums.ext.net/showthread.php?12822-CLOSED-How-to-selectively-disable-some-items-in-combobox

Daniil
Feb 07, 2013, 4:11 PM
Thank you.

This example should help you.

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.ComboBox1.GetStore();
store.DataSource = new object[]
{
new object[] { "1", "Item 1" },
new object[] { "2", "Item 2" },
new object[] { "3", "Item 3" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

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

<style>
li.disabled-item {
color: gray;
}

li.disabled-item.x-boundlist-item-over {
background: white;
border-color: white;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox
ID="ComboBox1"
runat="server"
DisplayField="text"
ValueField="value">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="value" />
<ext:ModelField Name="text" />
<ext:ModelField Name="disabled">
<Convert Handler="return record.get('value') === '2';" />
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<ListConfig>
<Tpl runat="server">
<Html>
<ul class="x-list-plain">
<tpl for=".">
<li role="option" class="x-boundlist-item <tpl if="disabled">disabled-item</tpl>">
{text}
</li>
</tpl>
</ul>
</Html>
</Tpl>
</ListConfig>
<Listeners>
<BeforeSelect Handler="return !record.data.disabled;" />
</Listeners>
</ext:ComboBox>
</form>
</body>
</html>

CarWise
Feb 08, 2013, 6:44 AM
Thanks Daniil,

Exactly what I tried to achieve !

Martin

Daniil
Jul 29, 2013, 12:58 PM
To get it working with the v2.2 release and further you might need to add this call for the ul element.

<ul class="x-list-plain">

Daniil
Sep 05, 2013, 9:14 AM
Here is an example in Razor.
http://forums.ext.net/showthread.php?26372&p=116861&viewfull=1#post116861