[CLOSED] How to center align the GridCommands in Grid Panel command column

  1. #1

    [CLOSED] How to center align the GridCommands in Grid Panel command column

                                <ext:CommandColumn Width="500px" Align="Center">
                                    <Commands>
                                        <ext:CommandSpacer />
                                        <ext:GridCommand Text="Edit" CommandName="Edit" StandOut="true" />
                                        <ext:CommandSpacer />
                                        <ext:CommandSpacer />
                                        <ext:GridCommand Text="Delete" CommandName="Delete" StandOut="true" />
                                    </Commands>
                                </ext:CommandColumn>
    In this I need the Grid commands should be align to center of the Column
    Last edited by Daniil; Dec 09, 2010 at 8:33 AM. Reason: [CLOSED]
  2. #2
    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>
    Last edited by Daniil; Dec 08, 2010 at 12:42 PM. Reason: Minor correction
  3. #3
    Feature ticket has been created:
    https://extnet.lighthouseapp.com/pro...-commandcolumn

    Implemented in revision #3370

    After update this code will work.

    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[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" }
                };
                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>
    </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="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                    <ext:CommandColumn Header="No ButtonAlign" Width="200">                    
                        <Commands>
                            <ext:GridCommand Text="Edit" CommandName="Edit" StandOut="true" />
                            <ext:CommandSpacer />
                            <ext:GridCommand Text="Delete" CommandName="Delete" StandOut="true" />
                        </Commands>
                    </ext:CommandColumn>
                    <ext:CommandColumn Header="ButtonAlign=&quot;Left&quot;" Width="200" ButtonAlign="Left">                    
                        <Commands>
                            <ext:GridCommand Text="Edit" CommandName="Edit" StandOut="true" />
                            <ext:CommandSpacer />
                            <ext:GridCommand Text="Delete" CommandName="Delete" StandOut="true" />
                        </Commands>
                    </ext:CommandColumn>
                    <ext:CommandColumn Header="ButtonAlign=&quot;Center&quot;" Width="200" ButtonAlign="Center">                    
                        <Commands>
                            <ext:GridCommand Text="Edit" CommandName="Edit" StandOut="true" />
                            <ext:CommandSpacer />
                            <ext:GridCommand Text="Delete" CommandName="Delete" StandOut="true" />
                        </Commands>
                    </ext:CommandColumn>
                    <ext:CommandColumn Header="ButtonAlign=&quot;Right&quot;" Width="200" ButtonAlign="Right">                    
                        <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>
  4. #4

    Issue Solved

    Thanks Danil,
    Issue solved

Similar Threads

  1. [CLOSED] Center align panel in container
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 04, 2012, 6:55 AM
  2. Replies: 0
    Last Post: Feb 09, 2012, 2:39 PM
  3. How can i do align grid command icon
    By fatihunal in forum 1.x Help
    Replies: 5
    Last Post: Jan 20, 2012, 3:52 AM
  4. [CLOSED] Align Center in Panel
    By macap in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 30, 2009, 9:52 AM
  5. Center Align Image in Grid cell
    By bsnezw in forum 1.x Help
    Replies: 0
    Last Post: Aug 25, 2009, 12:25 PM

Tags for this Thread

Posting Permissions