[CLOSED] [Razor] renderer for form fields?

  1. #1

    [CLOSED] [Razor] renderer for form fields?

    Hi Guys

    Looking the best way to reuse my Renderer's from my grid panel's with form fields, had a search but nothing really jumping out.

    I'm using MVC on 2.1 currently

    Regards

    Steven
    Last edited by Daniil; Feb 04, 2014 at 11:34 AM. Reason: [CLOSED]
  2. #2
    Quote Originally Posted by OriCoder View Post
    Hi Guys

    Looking the best way to reuse my Renderer's from my grid panel's with form fields, had a search but nothing really jumping out.

    I'm using MVC on 2.1 currently

    Regards

    Steven
    Can you post a sample of what you would like to do? or a description?
    Geoffrey McGill
    Founder & CEO
  3. #3
    I can do a description as if I knew how to do it I would have my answer :D


    I have a screen that has grid panel at the top when you click on a record, this then load the details into a form panel ... this all works fine. The gridpanel use's renderer's to turn my ID's from in the gridpanel store to there text value, I want the formpanel to do the same...
  4. #4
    Quote Originally Posted by OriCoder View Post
    I can do a description as if I knew how to do it I would have my answer :D


    I have a screen that has grid panel at the top when you click on a record, this then load the details into a form panel ... this all works fine. The gridpanel use's renderer's to turn my ID's from in the gridpanel store to there text value, I want the formpanel to do the same...
    Unfortunately I'd just be making assumptions about how you have things configured, so we won't be able to assist based on the limited information you have provided.
    Geoffrey McGill
    Founder & CEO
  5. #5
    hi geoffrey

    I know you can help, I am looking for a renderer but on a form panel.

    e.g.

    on my grid panel store I get 1,2,3,4,5 in to a column and I use a renderer to change this into a,b,c,d,e

    Just want to know the best way of doing this with a form panel when using somthing like the following example

    http://mvc.ext.net/#/GridPanel_Update/Batch/
    So in my case fred,willma,pebbles etc are 1,2,3 in the store and I am using a renderer to turn them back in to the text.

    Does this help more?
  6. #6
    Why not just set the TextField with the Name?
    Geoffrey McGill
    Founder & CEO
  7. #7
    Quote Originally Posted by geoffrey.mcgill View Post
    Why not just set the TextField with the Name?
    Not sure I a follow, I have on my gridpanel the following code which loads the record into the formpanel

    Html.X().RowSelectionModel()
                                        .Mode(SelectionMode.Single)
                                        .Listeners(l =>
                                        {
                                            l.Select.Handler = "App.ticketDetails.getForm().loadRecord(record);";
                                        })
    not sure how I can make the renderer effect the .Name doing something like

     Html.X().ComboBox().FieldLabel("Status").Name("OrderStatusId").Renderer("renOrderStatus"),
    would be ideal but the "renderer" does not exist.
  8. #8
    Hi,

    Fields don't support such the functionality.

    Overriding the setValue method could help to emulate it. Here is an example for a TextField.

    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 
                    {
                        Name = "Some Name",
                        Surname = "Some Surname"   
                    }  
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            Ext.form.field.Text.override({
                setValue: function(value) {
                    if (!Ext.isEmpty(value)) {
                        value = this.renderer(value);
                    }
    
                    this.callParent(arguments);
                }
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="Name" />
                            <ext:ModelField Name="Surname" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
    
            <ext:FormPanel ID="FormPanel1" runat="server" Width="300">
                <Items>
                    <ext:TextField runat="server" Name="Name">
                        <CustomConfig>
                            <ext:ConfigItem Name="renderer" Value="function(value) { return value + ' Hello!'; }" Mode="Raw" />
                        </CustomConfig>
                    </ext:TextField>
    
                    <ext:TextField runat="server" Name="Surname">
                        <CustomConfig>
                            <ext:ConfigItem Name="renderer" Value="function(value) { return value + ' Hello!'; }" Mode="Raw" />
                        </CustomConfig>
                    </ext:TextField>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Load" Handler="App.FormPanel1.getForm().loadRecord(App.Store1.getAt(0));" />
                </Buttons>
            </ext:FormPanel>
        </form>
    </body>
    </html>
    For a ComboBox it might be more complicated.

    Please note that it won't help to stylize the text inside a field, it will work for text transformation only.

    Personally, I would prefer not to override the setValue method and recommend you not to do it as well.

    Please share the code for "renOrderStatus". I am interested what exactly you need to do inside that renderer.
  9. #9
    Hi

    Sorry for not replying to this sooner but have been working on another part of the application, for the last month and only got back to the bit today

    var renOrderStatus = function (value, meta) {
            var r = App.StoreOrderStatusList.getById(value);
    
            if (value == "Enquiry") {
                metadata.tdCls = "cell-blue";
                return "Enquiry";
            }
            if (value == "Executed") {
                metadata.tdCls = "cell-red";
                return "Executed";
            }
    
            if (Ext.isEmpty(r)) {
                return "";
            }
    
            return r.data.Name;
        };
    So it basicly reads from a two column store then returns the value.
  10. #10
    Ok, you should do the following:

    1. Get a record's data.
    var data = record.getData();
    2. Modify the data as needed and style the respective fields as needed.

    3. Load to a form
    form.setValues(data);
    I am afraid we cannot suggest an easier solution.

    There is one problem more.

    Let's say there is a TextField in a FormPanel. You load a record to the FormPanel. There is "original value" for the TextField in that record. You retrieve the data from a record, then change "original value" to "renderer value" and, finally, load the modified data to the FormPanel. The problem is the fact that the FormPanel and the TextField won't know anything about the "original value". So, if you update the Store's record from the FormPanel, the original value will be lost.

Similar Threads

  1. Widths of Form fields
    By thedarklord in forum 2.x Help
    Replies: 2
    Last Post: Oct 08, 2012, 5:31 AM
  2. [CLOSED] MVC/Razor Configure a Renderer in a GridPanel
    By adelaney in forum 2.x Premium Help
    Replies: 6
    Last Post: May 10, 2012, 7:51 PM
  3. [CLOSED] Two form fields, one validator
    By jmcantrell in forum 1.x Premium Help
    Replies: 1
    Last Post: Mar 14, 2012, 7:57 AM
  4. Form Field Renderer functions
    By fpw2377 in forum 1.x Help
    Replies: 5
    Last Post: Feb 25, 2010, 1:12 AM
  5. Mask formatter for form fields
    By olimpia in forum 1.x Help
    Replies: 3
    Last Post: Jun 08, 2009, 10:42 AM

Tags for this Thread

Posting Permissions