Hi,
You can emulate cycle button. I simplified the example therefore all states are hardcoded
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { 1, "State1" },
new object[] { 2, "State2" },
new object[] { 3, "State3" },
};
this.Store1.DataBind();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function prepareCmd(grid, toolbar, rowIndex, record){
var btn = toolbar.items.get(0),
stateId = record.get("stateId");
btn.setText("Change to State"+stateId);
}
function doCmd(command, record, rowIndex){
switch(command){
case "s1":
case "s2":
case "s3":
record.set("stateId", command.slice(-1));
record.set("stateDescr", "State" + command.slice(-1));
break;
case "CycleState":
var stateId = record.get("stateId");
if(stateId >= 3){
stateId = 0;
}
record.set("stateId", stateId+1);
record.set("stateDescr", "State"+(stateId+1));
break;
}
this.getView().refreshRow(rowIndex);
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="stateId" Type="Int" />
<ext:RecordField Name="stateDescr" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
Title="Menu Row Command"
Width="600"
Height="300"
>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="stateDescr" Width="260" DataIndex="stateDescr" />
<ext:CommandColumn Width="150">
<Commands>
<ext:SplitCommand Icon="ArrowRotateClockwise" CommandName="CycleState">
<Menu EnableScrolling="false">
<Items>
<ext:MenuCommand Text="State 1" CommandName="s1" />
<ext:MenuCommand Text="State 2" CommandName="s2" />
<ext:MenuCommand Text="State 3" CommandName="s3" />
</Items>
</Menu>
<ToolTip Text="Cycle" />
</ext:SplitCommand>
</Commands>
<PrepareToolbar Fn="prepareCmd" />
</ext:CommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true" />
</SelectionModel>
<Listeners>
<Command Fn="doCmd" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>
Posting Permissions
| Frameworks and Tools for .NET Developers