Hmm, I can't see any way to scroll toolbar and grid together.
I can suggest you to use an alternative way - using an additional header row.
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.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { 1, 4, 7 },
new object[] { 2, 5, 8 },
new object[] { 3, 6, 9 }
};
store.DataBind();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var updateTotal = function () {
var column,
field,
data = {},
c,
grid = this,
cs = grid.view.getColumnData();
for (var j = 0, jlen = grid.store.getCount(); j < jlen; j++) {
var r = grid.store.getAt(j);
for (var i = 0, len = cs.length; i < len; i++) {
c = cs[i];
column = grid.getColumnModel().columns[i];
if (!Ext.isDefined(data[c.name])) {
data[c.name] = 0;
}
data[c.name] += r.data[c.name];
}
}
for (var i = 0; i < grid.getColumnModel().columns.length; i++) {
column = grid.getColumnModel().columns[i];
field = function() {
switch (column.dataIndex) {
case "test1" : return Ext.getCmp("ColumnField1");
case "test2" : return Ext.getCmp("ColumnField2");
case "test3" : return Ext.getCmp("ColumnField3");
}
}();
c = cs[i];
field.setValue((c.renderer)(data[c.name], {}, {}, 0, i, grid.store));
}
}
</script>
<style type="text/css">
.total-field {
background-color: #fff;
font-weight: bold !important;
color: #000;
border: solid 1px silver;
padding: 2px;
margin-right: 5px;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Height="100"
Width="200"
AutoScroll="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
<ext:RecordField Name="test3" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1">
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Test2" DataIndex="test2">
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Test3" DataIndex="test3">
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<HeaderRows>
<ext:HeaderRow>
<Columns>
<ext:HeaderColumn>
<Component>
<ext:DisplayField
ID="ColumnField1"
runat="server"
DataIndex="test1"
Cls="total-field"
Text="-" />
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn>
<Component>
<ext:DisplayField
ID="ColumnField2"
runat="server"
DataIndex="test2"
Cls="total-field"
Text="-" />
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn>
<Component>
<ext:DisplayField
ID="ColumnField3"
runat="server"
DataIndex="test3"
Cls="total-field"
Text="-" />
</Component>
</ext:HeaderColumn>
</Columns>
</ext:HeaderRow>
</HeaderRows>
</ext:GridView>
</View>
<Listeners>
<AfterRender Fn="updateTotal" Delay="100" />
<ViewReady Handler="this.getView().refreshRow = this.getView().refreshRow.createSequence(updateTotal, #{GridPanel1});" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>