Add a custom render for a column in Ext Designer

[webarnie]

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?

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"},

[jarrednicholls]

Hi Walt,

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

TemplateColumn example template:

{[ values.myField.length > 50 ? values.myField.substring(0, 49) + "..." : values.myField ]}

or

<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":

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

[webarnie]

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

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;
}

}

[jarrednicholls]

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

[webarnie]

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?

[jarrednicholls]

I suppose you could just do something like this

<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>

[webarnie]

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.

[jarrednicholls]

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):

    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.

[jarrednicholls]

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?

[webarnie]

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.

[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>

{
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'