PDA

View Full Version : [CLOSED] toggle / untoggle all commandcolumns in a grid



blueworld
Jun 14, 2013, 9:07 AM
Sorry i have posted this thread in 2.x Help, please delete it: http://forums.ext.net/showthread.php?25284-toggle-untoggle-all-commandcolumns-in-a-grid


Hi, I have a code example with a grid that contains a commandcolumn (togglebutton)
I have a topbar with a button that should toogle / untoggle all these commandcolumns, of course with firing their command handler.
Is there any way to do that? If not by toggle buttons, how could I do that with a checkbox-column?




<%@ Page Language="VB" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
Protected Sub Page_Load(sender As Object, e As EventArgs)
If Not ExtNet.IsAjaxRequest Then
Me.Store1.DataSource = Me.Data
Me.Store1.DataBind()
End If
End Sub

Private ReadOnly Property Data() As Object()
Get
Return New Object() {New Object() {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"}, New Object() {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"}, New Object() {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"}, New Object() {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"}, New Object() {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"}, New Object() {"AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"}, _
New Object() {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"}, New Object() {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"}, New Object() {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"}, New Object() {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"}, New Object() {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"}, New Object() {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"}, _
New Object() {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"}, New Object() {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"}, New Object() {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"}, New Object() {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"}, New Object() {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"}, New Object() {"Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"}, _
New Object() {"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am"}, New Object() {"McDonald""s Corporation", 36.76, 0.86, 2.4, "9/1 12:00am"}, New Object() {"Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"}, New Object() {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"}, New Object() {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"}, New Object() {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"}, _
New Object() {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"}, New Object() {"The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"}, New Object() {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"}, New Object() {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"}, New Object() {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}}
End Get
End Property
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">

<script>
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />


<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="600"
Height="350">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Toggle/Untoogle all">
<Listeners>
<Click Handler="" /> <%-- Please toogle or untoggle them all--%>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
<ext:CommandColumn ID="CommandColumn9" runat="server" Width="30">
<Commands>
<ext:GridCommand Icon="World" CommandName="TestCommand" StandOut="false">
<ToolTip Text="Toogle me" />
<CustomConfig>
<ext:ConfigItem Name="enableToggle" Value="true" />
<ext:ConfigItem Name="pressed" Value="false" />
</CustomConfig>
</ext:GridCommand>
</Commands>
<Listeners>
<Command Handler="console.log(record.data.company);" />
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>

Daniil
Jun 14, 2013, 1:28 PM
Hi @blueworld,

It can be achieved running this script:


var i,
toolbars = App.CommandColumn9.cache,
tb;

for (i = 0; i < toolbars.length; i++) {
tb = toolbars[i];
tb.items.get(0).toggle();
tb.column.fireEvent("command", tb.column, tb.command, tb.record, tb.rowIndex);
}

But please note that the command toggle status won't persist after refreshing of the GridPanel (for example, sorting causes refreshing).

Also the above script is quite expensive in the performance aspect. It might be better to iterate all the Store's records and run the required actions for them without toggling the commands and using the fireEvent method.

blueworld
Jun 14, 2013, 2:40 PM
Hi Daniil,
thank you very much this helped me a lot! Performance is good enough.
What was happening here was just a flip of the current toggles, so I have extended the script a bit with a global bool variable that determines if all rows have to be pressed or unpressed




function toggleTasks(){

var i,
toolbars = App.TaskTasksCommand.cache,
tb;

for (i = 0; i < toolbars.length; i++) {
tb = toolbars[i];
if(tasksPressed == true){
if(tb.items.get(0).pressed == true){
tb.items.get(0).toggle();
tb.column.fireEvent("command", tb.column, tb.command, tb.record, tb.rowIndex);
}

}else if(tasksPressed == false){
if(tb.items.get(0).pressed == false){
tb.items.get(0).toggle();
tb.column.fireEvent("command", tb.column, tb.command, tb.record, tb.rowIndex);
}
}

}
tasksPressed = !tasksPressed;


}

Baidaly
Jun 14, 2013, 11:19 PM
Hello!

Can we close this thread?

blueworld
Jun 17, 2013, 7:32 AM
yes this one can be closed