Hi,
It needs to add the ButtonAlign property to the toolkit. For now, it can look something like this.
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[] {"test11", "test12", "test13"},
new object[] {"test12", "test22", "test23"},
new object[] {"test13", "test32", "test33"}
};
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>
<ext:ResourcePlaceHolder runat="server" />
<script type="text/javascript">
Ext.net.CommandColumn.override({
insertToolbars : function (start, end, row) {
var tdCmd = this.select(),
width = 0;
if (Ext.isEmpty(start) || Ext.isEmpty(end)) {
start = 0;
end = tdCmd.length;
}
if (this.commands) {
for (var i = start; i < end; i++) {
var toolbar = new Ext.Toolbar({
items: this.commands,
enableOverflow: false,
buttonAlign: this.buttonAlign // added
}),
div;
if (row) {
div = Ext.fly(this.select(row)[0]).first("div");
} else {
div = Ext.fly(tdCmd[i]).first("div");
}
this.cache.push(toolbar);
div.dom.innerHTML = "";
div.addClass("row-cmd-cell-ct");
toolbar.render(div);
var record = this.grid.store.getAt(i);
toolbar.record = record;
if (this.prepareToolbar && this.prepareToolbar(this.grid, toolbar, i, record) === false) {
toolbar.destroy();
continue;
}
toolbar.grid = this.grid;
toolbar.rowIndex = i;
toolbar.record = record;
toolbar.items.each(function (button) {
if (button.on) {
button.toolbar = toolbar;
if (button.standOut) {
button.on("mouseout", function () {
this.getEl().addClass("x-btn-over");
}, button);
}
if (!Ext.isEmpty(button.command, false)) {
button.on("click", function () {
this.toolbar.grid.fireEvent("command", this.command, this.toolbar.record, this.toolbar.record.store.indexOf(this.toolbar.record));
}, button);
}
if (button.menu && !button.menu.shared) {
this.initMenu(button.menu, toolbar);
}
}
}, this);
if (this.autoWidth) {
var tbTable = toolbar.getEl().first("table"),
tbWidth = tbTable.getComputedWidth();
width = tbWidth > width ? tbWidth : width;
}
}
if (this.autoWidth && width > 0) {
var cm = this.grid.getColumnModel();
cm.setColumnWidth(cm.getIndexById(this.id), width + 4);
this.grid.view.autoExpand();
}
if (this.grid.view.syncRows) {
this.grid.view.syncRows(start);
}
}
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="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" />
<ext:Column Header="Test2" DataIndex="test2" />
<ext:Column Header="Test3" DataIndex="test3" />
<ext:CommandColumn Width="500">
<CustomConfig>
<ext:ConfigItem Name="buttonAlign" Value="center" Mode="Value" />
</CustomConfig>
<Commands>
<ext:GridCommand Text="Edit" CommandName="Edit" StandOut="true" />
<ext:CommandSpacer />
<ext:GridCommand Text="Delete" CommandName="Delete" StandOut="true" />
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>