1. #1
    Sencha User
    Join Date
    Jan 2011
    Location
    Lincoln RI
    Posts
    97
    Vote Rating
    0
    webarnie is on a distinguished road

      0  

    Default Add a custom render for a column in Ext Designer

    Add a custom render for a column in Ext Designer


    I am using a EditorGridPanel and one of the columns is a description. I want the column to be a constant width, which may truncate the data. The way I’ve handled this in the past is taking a substring the length I want and adding … to show there is more data and place the full data in the qtip. This way if the end user wants to see the full data, they just have to mouse over the field. Below is a code sample of how I have done this in the past but not sure the best way using the code generated by Ext Designer or specify a custom render in Ext Designer. How can I do this with the code generated by Ext designer?

    Code:
    var officeGrid = new Ext.grid.GridPanel({
        store: officeStore,
        bbar: pagingBar,
        columns: [
        {id:'office',header: "Office", width: 80, sortable: true, hidden: false, renderer: officeActions, dataIndex: 'office', hidden: true },
            {header: "Name", width: 20, sortable: true, renderer: function userNameAbbreviator(value, metadata, dataRecord) {
                                if (value.length > 10 ) {
                                    metadata.attr = 'ext:qtip="' + value + '"';
                                	return value.substring(0,10) + "...";
                                } else {
                                	return value;
    							}
    					},  dataIndex: "fullName"},

  2. #2
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    Hi Walt,

    You can use either a TemplateColumn or you can attach a renderer to the column in your .js file.

    TemplateColumn example template:
    Code:
    {[ values.myField.length > 50 ? values.myField.substring(0, 49) + "..." : values.myField ]}
    or
    Code:
    <tpl if="myField.length &gt; 50">
    {[ values.myField.substring(0, 49) + "..." ]}
    </tpl>
    <tpl if="myField.length &lt;= 50">
    {myField}
    </tpl>
    The first is obviously the better choice, but I just wanted to show a bit of xtemplate power.

    renderer, assuming you have a "ref" of "myGrid":
    Code:
    MyViewport = Ext.extend(MyViewportUi, {
        initComponent: function() {
            MyViewport.superclass.initComponent.call(this);
    
            var idx = 3; // Index of the column to which I want to add a renderer
            this.myGrid.colModel.config[idx].renderer = this.myRenderer;
        },
    
        myRenderer: function(v) {
            if (v.length > 50) {
                v = v.substring(0, 49) + '...';
            }
    
            return v;
        }
    });
    Hope that helps

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Location
    Lincoln RI
    Posts
    97
    Vote Rating
    0
    webarnie is on a distinguished road

      0  

    Default


    You solution is interesting. I continued to work on the problem after posting and managed to get it to work. Here my solution

    Code:
    returnPremiumWindow = Ext.extend(returnPremiumWindowUi, { initComponent:
    function() { returnPremiumWindow.superclass.initComponent.call(this); this.returnPremiumGrid.on('afteredit', this.onAfterEdit, this); this.processButton.on('click', this.onButtonProcess, this); this.cancelButton.on('click', this.onButtonCancel, this); this.returnPremiumGrid.on('afteredit', this.onAfterEdit, this); this.returnPremiumGrid.on('beforerender', this.onBeforeRender, this); }, onAfterEdit: function(o) { var enteredAmount = o.value; var originalAmount = o.originalValue; var returnPremiumAmount = Ext.getCmp('returnPremiumAmount').getValue(); var appliedAmount = Ext.getCmp('appliedAmount').getValue(); if (originalAmount > 0) { appliedAmount -= originalAmount; // reverse the amount previously entered
    } appliedAmount += enteredAmount;
    var totalApplied = returnPremiumAmount - appliedAmount;
    var xxx = Ext.util.Format.number(appliedAmount, "0,000.00"); appliedAmount = Ext.util.Format.number(appliedAmount, "0,000.00"); Ext.getCmp("appliedAmount").setValue(appliedAmount);
    Ext.getCmp(
    'remainingAmount').setValue(totalApplied); if (appliedAmount > returnPremiumAmount) { Ext.MessageBox.alert("Error","Please reduce applied amount by " + Math.abs(totalApplied.toFixed(2))); } }, onBeforeRender: function(o) { o.colModel.setRenderer(1, descriptionRender);
    },.....
    function
    descriptionRender(value, metadata, dataRecord) { if (value.length > 10 ) { metadata.attr = 'ext:qtip="' + value + '"'; return value.substring(0,10) + "..."; } else { return value; }
    }

  4. #4
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    Indeed, setRenderer would be the preferred way to do it. I did it the under-the-hood way. You win! Nice work.

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Location
    Lincoln RI
    Posts
    97
    Vote Rating
    0
    webarnie is on a distinguished road

      0  

    Default renderer or tpl for lvcolumn

    renderer or tpl for lvcolumn


    I need to apply a renderer to a column in a ListView. The columns are lvcolumn. Looking at the properties for this type, it does not allow for a render, it looks like you can only specify tpl. In your pervious sample using tpl, you show how to shorten a field but how do you set the qtip with the full value?

  6. #6
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    I suppose you could just do something like this

    Code:
    <span <tpl if="myField.length &gt; 50">ext:qtip="{myField}"</tpl> >
    <tpl if="myField.length &gt; 50">
    {[ values.myField.substring(0, 49) + "..." ]}
    </tpl>
    <tpl if="myField.length &lt;= 50">
    {myField}
    </tpl>
    </span>

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Location
    Lincoln RI
    Posts
    97
    Vote Rating
    0
    webarnie is on a distinguished road

      0  

    Default


    i modified as you suggesed. using preview in designer i get nothing. exporting the code and displaying it in a browser, i get an error.

  8. #8
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    This is a bug in the Designer. ListView templates cannot accept an array of strings, unfortunately

    If you add this just after including ext-all.js (or at the top of Ext.onReady):

    Code:
        Ext.list.Column.prototype.constructor = function(c){
            if(!c.tpl){
                c.tpl = new Ext.XTemplate('{' + c.dataIndex + '}');
            }
            else if(Ext.isString(c.tpl) || Ext.isArray(c.tpl)){
                c.tpl = new Ext.XTemplate(c.tpl);
            }
            
            Ext.apply(this, c);
        };
    It should workaround the issue for now. Thanks for the report.

  9. #9
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    On a side note, I had to remove your code because it actually was breaking vBulletin Not sure how! You're still copying from Word aren't you?

  10. #10
    Sencha User
    Join Date
    Jan 2011
    Location
    Lincoln RI
    Posts
    97
    Vote Rating
    0
    webarnie is on a distinguished road

      0  

    Default


    i made the changes you suggested but it did not work. I think part of it might be how i codeed it. here is what i did.

    HTML Code:
    [LEFT]<!-- Auto Generated with Ext Designer -->
    <!-- Modifications to this file will be overwritten. -->
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Billing Options</title>
    <link rel="stylesheet" type="text/css" href="../../javascript/ext-3.3.1/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../javascript/ext-3.3.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../javascript/ext-3.3.1/ext-all-debug.js"></script>
    <script type="text/javascript" src="../../javascript/amica/BillingOptionApplication.ui.js"></script>
    <script type="text/javascript" src="../../javascript/amica/BillingOptionApplication.js"></script>
    <script type="text/javascript" src="../../javascript/amica/billingOptions.js"></script>
    <script type="text/javascript" src="../../javascript/amica/returnPremiumWindow.ui.js"></script>
    <script type="text/javascript" src="../../javascript/amica/returnPremiumWindow.js"></script>
    <script type="text/javascript" src="../../javascript/amica/returnPremiumStore.js"></script>
    <script type="text/javascript" src="../../javascript/amica/accountHistory.ui.js"></script>
    <script type="text/javascript" src="../../javascript/amica/accountHistory.js"></script>
    <script type="text/javascript" src="../../javascript/amica/receviableViewOnlinePaymentStore.js"></script>
    <script type="text/javascript" src="../../javascript/amica/receviableViewPolicyStore.js"></script>
    <script type="text/javascript" src="../../javascript/amica/receviableViewTransactionStore.js"></script>
    <script type="text/javascript" src="../../javascript/amica/receviableViewAccountStore.js"></script>
    <script type="text/javascript">
    Ext.list.Column.prototype.constructor = function(c){
    if(!c.tpl){
    c.tpl = new Ext.XTemplate('{' + c.dataIndex + '}');
    }
    else if(Ext.isString(c.tpl) || Ext.isArray(c.tpl)){
    c.tpl = new Ext.XTemplate(c.tpl);
    }
    
    Ext.apply(this, c);
    };
    </script>
    </head>
    <body></body>[/LEFT]
    </html>
    Code:
    { xtype :
    'lvcolumn', header : 'Transaction', dataIndex : 'transaction', width : 0.35, tpl: [ '<span <tpl if="transaction.length &gt; 50">ext:qtip="{transaction}"</tpl> >', '{[ values.transaction.substring(0, 49) + "..." ]}', '</tpl>', '<tpl if="transaction.length &lt;= 50">', '{transaction}', '</tpl>', '</span>'
    ]
    },
    do you need anything else? any other suggestions?

    the error:

    UUncaught TypeError: Object <span <tpl if="transaction.length &gt; 50">ext:qtip="{transaction}"</tpl> >,{[ values.transaction.substring(0, 49) + "..." ]},</tpl>,<tpl if="transaction.length &lt;= 50">,{transaction},</tpl>,</span> has no method 'apply'

Similar Threads

  1. ExtJS Designer - how to add custom property
    By mveronez in forum Ext 3.x: User Extensions and Plugins
    Replies: 1
    Last Post: 9 Dec 2011, 1:48 AM
  2. In Grid ->custom render call back func how to get row and column index
    By sivaengn in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 24 Jul 2010, 3:55 PM
  3. How to add a custom component via Ext Designer?
    By Nightwish in forum Ext Designer: Help & Discussion
    Replies: 1
    Last Post: 18 Jun 2010, 8:15 AM
  4. Custom Grid Column Render
    By Supial in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 8 Jun 2010, 11:40 AM
  5. Re-render content in resizable column using custom renderer?
    By KimH in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 25 Jun 2008, 8:34 AM

Thread Participants: 2