What's New?

[CLOSED] Image Column - Images only shown on the current selected row

  1. #1
    Nov 30, 2011, 2:39 PM

    [CLOSED] Image Column - Images only shown on the current selected row

    Hi again...

    I'd like to use a Image Column in a Grid with many rows. To make the GUI more clear,I'd like to show the Images of the included Image Column only when the Column is selected (RowMouseDown or RowClick)...

    Two questions:

    1. Is that possible ?

    if so

    2. Any Code Examples available ?


    Kind regards
    Peter
    Last edited by Daniil; Dec 01, 2011 at 8:22 AM. Reason: [CLOSED]
  2. #2
    Nov 30, 2011, 4:28 PM
    Hi,

    Possible, please look at the example.

    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)
        {
            this.Store1.DataSource = new object[] 
            { 
                new object[] { "test1" },
                new object[] { "test2" },
                new object[] { "test3" }
            };
            this.Store1.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 prepareCommand = function (grid, command, record, row) {
            command.hidden = !grid.getSelectionModel().isSelected(record);
        };

        var refreshRow = function (selModel, rowIndex, record) {
            this.grid.getView().refreshRow(rowIndex);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store ID="Store1" 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:ImageCommandColumn Width="45">
                        <Commands>
                            <ext:ImageCommand Icon="Delete" CommandName="Delete" />
                             <ext:ImageCommand Icon="NoteEdit" CommandName="Edit" />
                        </Commands>
                        <PrepareCommand Fn="prepareCommand" />
                    </ext:ImageCommandColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server">
                    <Listeners>
                        <RowSelect Fn="refreshRow" />
                        <RowDeselect Fn="refreshRow" />
                    </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Dec 01, 2011, 7:48 AM
    Hmm, something doesn't work.

    The Prepare Script shows the Command Name (command.command) correctly, but the refreshRow Script has no Command Name

    		var refreshRow = function (grid, command, record, row) {

			alert("Refresh " + command.command + "   Record id : " + record.id);

			command.hidden = !grid.getSelectionModel().isSelected(record);
		};
    Output : Refresh undefined Record id : 85604422-a0c1-44f4-8e28-9b7b549f5799

    That's my Markup

    	<ext:GridPanel runat="server" ID="gridBordereau" StripeRows="true" StoreID="storeBordereau" TrackMouseOver="true" Margins="0 0 5 5" Layout="Fit" AutoExpandColumn="InternalNote" MaskDisabled="False">
												<ColumnModel runat="server">
													<Columns>
														<ext:Column ColumnID="BordereauId" Header="BordereauId" Width="75" Hidden="true" DataIndex="BordereauId" Editable="False" Groupable="False" Sortable="False" MenuDisabled="True" />
														<ext:Column ColumnID="BordereauNumber" Header='<%$ I18n: Caption.BordereauNumber %>' Width="150" Hidden="False" DataIndex="BordereauNumber" Editable="False" Groupable="true" Sortable="true" MenuDisabled="false" />
														<ext:Column ColumnID="InvoiceDate" Header='<%$ I18n: Caption.InvoiceDate %>' Width="150" Hidden="False" DataIndex="InvoiceDate" Editable="False" Groupable="true" Sortable="true" MenuDisabled="false" />
														<ext:Column ColumnID="InternalNote" Header='<%$ I18n: Caption.InternalNote %>' Width="75" Hidden="False" DataIndex="InternalNote" Editable="False" Groupable="true" Sortable="true" MenuDisabled="false" />
														<ext:ImageCommandColumn Width="80" Align="Center" Resizable="False">
															<Commands>
																<ext:ImageCommand CommandName="ExchnageModeMail" Icon="Mail">
																	<ToolTip Text='<%$ I18n: ToolTip.Mail %>' />
																</ext:ImageCommand>
															</Commands>
															<Commands>
																<ext:ImageCommand CommandName="ExchnageModePrint" Icon="Printer">
																	<ToolTip Text='<%$ I18n: ToolTip.Print %>' />
																</ext:ImageCommand>
															</Commands>
															<Commands>
																<ext:ImageCommand CommandName="ExchnageModeFile" Icon="Disk">
																	<ToolTip Text='<%$ I18n: ToolTip.Save %>' />
																</ext:ImageCommand>
															</Commands>
															<PrepareCommand Fn="prepareCommand" />
														</ext:ImageCommandColumn>
													</Columns>
												</ColumnModel>
												<SelectionModel>
													<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
														<Listeners>
															<RowSelect Fn="refreshRow" />
															<RowDeselect Fn="refreshRow" />
														</Listeners>
													</ext:RowSelectionModel>
												</SelectionModel>
												<DirectEvents>
													<Command OnEvent="HandleGridCommand">
														<EventMask ShowMask="true" />
														<ExtraParams>
															<ext:Parameter Name="CommandName" Value="command" Mode="Raw" />
															<ext:Parameter Name="Values" Value="Ext.encode(#{gridBordereau}.getRowsValues({selectedOnly : true}))" Mode="Raw" />
														</ExtraParams>
													</Command>
												</DirectEvents>
												<TopBar>
													<ext:Toolbar runat="Server" ID="MainToolBar" EnableOverflow="true">
														<Items>
															<%--Show by CustomsAccount--%>
															<ext:Button ID="cmdAccountSelect" runat="server" Text='<%$ I18n: Action.SelectCustomsAccount %>' Icon="Book">
																<Menu>
																	<ext:Menu ID="mnuSelectAccount" runat="server">
																		<Items>
																			<ext:GridPanel runat="server" ID="GridPanel1" StoreID="storeAccounts" AutoExpandColumn="AccountName" StripeRows="true" TrackMouseOver="true" Margins="0 0 5 5" Layout="Fit" HideHeaders="True" Width="250" Height="120">
																				<ColumnModel runat="server">
																					<Columns>
																						<ext:Column ColumnID="accountId" Width="5" Hidden="true" DataIndex="Id" Editable="False" Groupable="False" Sortable="False" MenuDisabled="True" />
																						<ext:Column ColumnID="AccountNumber" Width="40" DataIndex="AccountNumber" Editable="False" Groupable="False" Sortable="False" MenuDisabled="True" />
																						<ext:Column ColumnID="AccountName" Width="180" DataIndex="AccountName" Editable="False" Groupable="False" Sortable="False" MenuDisabled="True" />
																						<ext:Column ColumnID="HasBordereauData" Width="150" DataIndex="HasBordereauData" Hidden="true" Editable="False" Groupable="False" Sortable="False" MenuDisabled="True" />
																						<ext:ImageCommandColumn Width="25" ColumnID="commandColApproved" Fixed="True" Editable="False" Groupable="False" Resizable="False" Sortable="False">
																							<Commands>
																								<ext:ImageCommand CommandName="cmdNewNoBordereau">
																									<ToolTip Text='<%$ I18n: Tooltip.HasNoNewBordereau %>' />
																								</ext:ImageCommand>
																								<ext:ImageCommand CommandName="cmdNewBordereau" Icon="New">
																									<ToolTip Text='<%$ I18n: Tooltip.HasNewBordereau %>' />
																								</ext:ImageCommand>
																							</Commands>
																							<PrepareCommand Fn="prepareNewBordereauState" />
																						</ext:ImageCommandColumn>
																					</Columns>
																				</ColumnModel>
																				<SelectionModel>
																					<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true">
																						<DirectEvents>
																							<RowSelect>
																								<EventMask ShowMask="true" />
																								<ExtraParams>
																									<ext:Parameter Name="Values" Value="Ext.encode(#{gridAccount}.getRowsValues({selectedOnly : true}))" Mode="Raw" />
																								</ExtraParams>
																							</RowSelect>
																						</DirectEvents>
																					</ext:RowSelectionModel>
																				</SelectionModel>
																				<BottomBar>
																					<ext:Toolbar runat="server" ID="toolBarAccounts">
																						<Items>
																							<ext:Button runat="server" ID="cmdSelectAccount" Text='<%$ I18n: Action.SelectCustomsAccountSelect %>' Icon="Accept">
																								<DirectEvents>
																									<Click OnEvent="cmdSelectAccountClick">
																										<ext:EventMask ShowMask="true" />
																										<ExtraParams>
																											<ext:Parameter Name="Values" Value="Ext.encode(#{gridAccount}.getRowsValues({selectedOnly : true}))" Mode="Raw" />
																										</ExtraParams>
																									</Click>
																								</DirectEvents>
																							</ext:Button>
																						</Items>
																					</ext:Toolbar>
																				</BottomBar>
																			</ext:GridPanel>
																		</Items>
																	</ext:Menu>
																</Menu>
															</ext:Button>
															<ext:Label runat="server" ID="lblCurrentAccount" />
														</Items>
													</ext:Toolbar>
												</TopBar>
											</ext:GridPanel>

    and that's my script

    		var prepareCommand = function (grid, command, record, row) {

			//alert("Hide : " + command.command + "   Record id : " + record.id);

			command.hidden = !grid.getSelectionModel().isSelected(record);
		};

		var refreshRow = function (grid, command, record, row) {

			alert("Refresh " + command.command + "   Record id : " + record.id);

			command.hidden = !grid.getSelectionModel().isSelected(record);
		};
  4. #4
    Dec 01, 2011, 7:58 AM
    I don't understand.

    Why the refreshRow function should has a "command" argument since it's a RowSelect and RowDeselect listener?

    See also
    http://docs.sencha.com/ext-js/3-4/#!...vent-rowselect
    http://docs.sencha.com/ext-js/3-4/#!...nt-rowdeselect
  5. #5
    Dec 01, 2011, 8:03 AM
    Yay :-/

    That's the Result of Copy-Pasting w/o Thinking :-(

    Didn't change the Method signature...
    Sorry for the confusion.

    Peter
  6. #6
    Dec 01, 2011, 8:08 AM
    No problem. Can we mark the thread as closed?
  7. #7
    Dec 01, 2011, 8:20 AM
    Yes, all works perfect !

Similar Threads

  1. [CLOSED] insert selected grid row text from context menu to currently focused textarea control's current cursor position
    By ISI in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Feb 29, 2012, 3:57 PM
  2. Put an image from my images directory as an icon of a panel?
    By walle in forum 1.x Help
    Replies: 0
    Last Post: Jun 20, 2011, 5:13 PM
  3. [CLOSED] A dynamic column of images in Gridpanel
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 19, 2011, 7:58 PM
  4. [CLOSED] How to get the current node selected in a tree panel?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 13, 2010, 4:43 PM
  5. [CLOSED] Edit current record in a Column-Editor.
    By macap in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 04, 2009, 3:57 PM

Posting Permissions