[CLOSED] Higlighting of changed controls

  1. #1

    [CLOSED] Higlighting of changed controls

    Hello

    I highlight using style anthing what user changed on the page.
    it works fine

    the style is like

    .alaHiglightEnabledRoot .x-form-dirty.x-form-type-checkbox, .alaHiglightEnabledRoot .x-form-dirty .x-form-text, .alaHiglightEnabledRoot .x-form-dirty.x-form-type-radio, .alaHiglightEnabledRoot .x-form-dirty textarea {
    			background: darkgray;
    		}
    the root element on the page has

    <form runat="server" class="alaHiglightEnabledRoot">
    Hovewer I have a problem with grid pager, it higlights the page number as well, even it's not a (UI) field that user edit

    is there any workaround?
    somehow instruct the pager to reset its value immediately when changed?


    sample code is taken from https://examples4.ext.net/#/GridPane...rayWithPaging/
    with very little modifications

    thanks
    Jiri

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
    
        protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
        {
            this.BindData();
        }
    
        private void BindData()
        {
            Store store = this.GridPanel1.GetStore();
    
            store.DataSource = this.Data;
            store.DataBind();
        }
    
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    	<style>
    		.alaHiglightEnabledRoot .x-form-dirty.x-form-type-checkbox, .alaHiglightEnabledRoot .x-form-dirty .x-form-text, .alaHiglightEnabledRoot .x-form-dirty.x-form-type-radio, .alaHiglightEnabledRoot .x-form-dirty textarea {
    			background: darkgray;
    		}
    	</style>
        <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>
    
        <ext:XScript runat="server">
            <script type="text/javascript">
                var handlePageSizeSelect = function (item, records) {
                    var curPageSize = #{GridPanel1}.store.pageSize,
                        wantedPageSize = parseInt(item.getValue(), 10);
    
                    if (wantedPageSize != curPageSize) {
                        #{GridPanel1}.store.pageSize = wantedPageSize;
                        #{GridPanel1}.store.reload();
                    }
                }
            </script>
        </ext:XScript>
    </head>
    <body>
        <form runat="server" class="alaHiglightEnabledRoot">
            <ext:ResourceManager runat="server" />
    
            <h1>Array Grid with Local Paging and Remote Reloading</h1>
    
            <p>Demonstrates how to create a grid from Array data with Local Paging and Remote Reloading.</p>
    
            <p>Notice <b>Last Updated</b> column is revised with a new server-side DateTime stamp when the GridPanel "Refresh" button is clicked.<br />
               This demonstrates that when the GridPanel is refreshed, the Data is requested again from the server via a DirectEvent, but the Paging and Sorting is done completely client-side in the browser.</p>
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="800">
                <Store>
                    <ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="10">
                        <Model>
                            <ext:Model 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" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:RowNumbererColumn runat="server" Width="35" />
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                        <ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn runat="server" Text="Last Updated" Width="125" DataIndex="lastChange" Format="H:mm:ss" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Multi" />
                </SelectionModel>
                <View>
                    <ext:GridView runat="server" StripeRows="true" />
                </View>
                <BottomBar>
                     <ext:PagingToolbar runat="server">
                        <Items>
                            <ext:Label runat="server" Text="Page size:" />
                            <ext:ToolbarSpacer runat="server" Width="10" />
                            <ext:ComboBox runat="server" Width="80">
                                <Items>
                                    <ext:ListItem Text="1" />
                                    <ext:ListItem Text="2" />
                                    <ext:ListItem Text="10" />
                                    <ext:ListItem Text="20" />
                                </Items>
                                <SelectedItems>
                                    <ext:ListItem Value="10" />
                                </SelectedItems>
                                <Listeners>
                                    <Select Fn="handlePageSizeSelect" />
                                </Listeners>
                            </ext:ComboBox>
                        </Items>
                        <Plugins>
                            <ext:ProgressBarPager runat="server" />
                        </Plugins>
                    </ext:PagingToolbar>
                </BottomBar>
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Print" Icon="Printer" Handler="this.up('grid').print();" />
                            <ext:Button runat="server" Text="Print current grid page" Icon="Printer" Handler="this.up('grid').print({currentPageOnly : true});" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Apr 27, 2018 at 2:39 PM.
  2. #2
    Hello @jirihost!

    Use the :not() CSS3 pseudo-class to exclude what you want from your CSS rule.

    For the specific test case for example, you can just use this rule:
    .alaHiglightEnabledRoot .x-form-dirty:not(.x-toolbar-item) .x-form-text,
    And have the fields within the toolbar not get the custom CSS colors when changed.

    Or alternatively, instead of giving the whole page your CSS class, give it only to containers or the fields themselves via the Cls attribute.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    OK
    that helped with higlighting

    But open another problem - the textbox with paging has still isDirty value
    is there a way how to prevent this?

    I'm warning the user that there is such control and he should be saving changges before modifying it

    Which does not make too much sence if only changed controls is pager textbox (even if user dod not changed page number)
  4. #4
    Hello @jirihost!

    I'm not sure how exactly you are doing that part of "warning the user about such (dirty) controls" but you probably be better using FormPanels with the actual fields and checking if the grid Store is dirty for the grid instead of just blindly looking at the whole page. You'd either have to hack into ExtJS code to make these fields from the paging toolbar not mark themselves as changed as they are changed without breaking the change events they trigger (to update the page, or page size, etc), or in your whole-page-check just ignore those components.

    Maybe some of these examples involving validation would help:

    - Form > Validation > Custom VType
    - Form > Miscellaneaous > Checkout Form
    - GridPanel > Update > SqlDataSource

    If these still don't help, please provide an updated test case so that we can reproduce the issue in our side. Then I believe we'd be able to provide further advice.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello @jirihost!

    It's been a while since we last replied your inquiry here and still no feedback from you. Did the samples posted above help you on sorting your issue out? We may mark the thread as closed if you do not post a follow-up in 7+ days from now, but we won't lock up the thread, so you'll still be able to post afterwards.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. ext:textfield can not be changed / type
    By neosaint in forum 2.x Help
    Replies: 4
    Last Post: Jun 18, 2014, 1:45 AM
  2. How to get the changed items in the MultiCombo.
    By ascsolutions in forum 1.x Help
    Replies: 0
    Last Post: Sep 05, 2012, 3:05 PM
  3. Highlight changed controls
    By Zdenek in forum 1.x Help
    Replies: 1
    Last Post: Mar 19, 2012, 6:46 AM
  4. How to Get the Value From The Changed Grid
    By fancycloud in forum 1.x Help
    Replies: 0
    Last Post: Dec 29, 2009, 10:05 PM
  5. Input changed
    By Nime in forum 1.x Help
    Replies: 4
    Last Post: Feb 06, 2009, 11:21 AM

Posting Permissions