2008-06-25 [Revision #73, Version 0.6.0]

  1. #1

    2008-06-25 [Revision #73, Version 0.6.0]

    1. Changed GridPanel Renderer property to use new Renderer type.

      The following example demonstrates setting a custom Handler to check if a boolean value is 'true', then return 'Yes' or 'No'. The Handler is automatically wrapped in a function(){} template and the Column arguments are passed into the function.

      Example

      <ext:Column Header="Indoor?" DataIndex="Indoor" Sortable="true">
          <Renderer Handler="return (value) ? 'Yes':'No';" />
      </ext:Column>
      // arguments
      // "value", "metadata", "record", "rowIndex", "colIndex", "store"

      The following example demonstrates setting a custom function. The function is rendered as a raw value and no formatting is applied.

      Example

      <ext:Column Header="Availability" DataIndex="Availability">
          <Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
      </ext:Column>
      The following example demonstrates setting one of the Renderer helper Formats. The Renderer helper Format are a list of pre-defined list of functions which wrap common formatting functionality.

      Example

      <ext:Column Header="Price" DataIndex="Price" Sortable="true">
          <Renderer Format="UsMoney" />
      </ext:Column>
      Other Format types include:

      None,
      Capitalize,
      Date,
      DateRenderer,
      DefaultValue,
      Ellipsis,
      FileSize,
      HtmlDecode,
      LowerCase,
      StripScripts,
      StripTags,
      Substr,
      Trim,
      Undef,
      Uppercase,
      UsMoney

      The following example demonstrates setting the Ellipsis Format and passing an extra argument to trim the description at 50 characters.

      Example

      <ext:Column Header="Description" DataIndex="description" Width="150">
          <Renderer Format="Ellipsis" FormatArgs="50" />
      </ext:Column>
    Geoffrey McGill
    Founder
  2. #2
    Geoffrey, this looks really useful. Few questions (using 1.0)

    1) Is there a way to string a number of these functions together?

    I could imagine I'd often want to say trim and then capitalize, etc. If our option to combine these is to manually chain these, then do we simply create our own JavaScript function which calls each formatter in turn? If so, how do we access the client side representation for these pre-defined format types? Do they map to Ext.util.Format.xxx where xxx is the Format Type (in camelCase)?

    2) One of your examples is as follows:

    <ext:Column Header="Availability" DataIndex="Availability">
        <Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
    </ext:Column>
    You use "Fn" -- should that be "Handler" as you are passing arguments in? (I assumed Fn was a function pointer?)

    3) More generally, I am trying to figure out the best way to do some stuff with the grid. We have data that need to be converted into links (based on say the Id of the row, plus a URL format string), or have a column's value substituted for a corresponding image (where we supply the mapping array), or substitute some text for an abbreviated bit of text (where we again have the list of strings to match and replace), etc.

    With our current grid component, we do all this on the server side as we generate and bind each item to its cell. I was looking through the latest examples, but I don't see any server side binding of item cells in this particular way. I just wanted to double check that the recommended way is to use the Renderer stuff as you have in your original post here and to use JavaScript for it? (If so, I guess we simply need to build our own little library of custom utilities etc). Does that sound right?

    Thanks!
  3. #3
    Hello, anup!

    Please create a new thread on the Premium help forum.
    Just the same text with a link on this release note.
    Thank you.

Posting Permissions