How to add ellipsis to breadcrumb navigation toolbar for a long text in Extjs

Question

I have an ext.js application where in i have a breadcrumb toolbar which is displaying a title of a document with the complete selection path.My problem is how to to truncate the long title of a document. Breadcrumb Toolbar Image

var nStore = breadCrumbToolbar.getStore();
var dRecord = nStore.findRecord('id', pubId+'_'+docId);

 if(dRecord) {
     breadCrumbToolbar.suspendEvent('change');
     breadCrumbToolbar.setSelection(dRecord);
     breadCrumbToolbar.resumeEvent('change');
}

This code populate the toolbar shown above i am not able to find the way to truncate the title of the document. I did try to put style in main view but didn't work.

Generated HTML

<a class="x-btn x-breadcrumb-btn x-breadcrumb-btn-usp-breadcrumb-menu x-unselectable x-box-item x-btn-plain-toolbar-small" hidefocus="on" unselectable="on" role="button" aria-hidden="false" aria-disabled="false" aria-haspopup="true" aria-owns="menu-1184" id="button-1183" tabindex="0" data-componentid="button-1183" style="right: auto; left: 317px; top: 0px; margin: 0px;"><span id="button-1183-btnWrap" data-ref="btnWrap" role="presentation" unselectable="on" style="" class="x-btn-wrap x-btn-wrap-plain-toolbar-small "><span id="button-1183-btnEl" data-ref="btnEl" role="presentation" unselectable="on" style="" class="x-btn-button x-btn-button-plain-toolbar-small x-btn-text    x-btn-button-center "><span id="button-1183-btnIconEl" data-ref="btnIconEl" role="presentation" unselectable="on" class="x-btn-icon-el x-btn-icon-el-plain-toolbar-small  " style=""></span><span id="button-1183-btnInnerEl" data-ref="btnInnerEl" unselectable="on" class="x-btn-inner x-btn-inner-plain-toolbar-small">International Food Additives Council Good Manufacturing Practice Quality Assurance Audit Guide for Food Additives and GRAS Substances</span></span></span></a>

Did you take a look at this post? http://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working — JonSG, Nov 30 '16 at 21:19
How in in ext js breadCrumbToolbar.setSelection(dRecord) is setting the complete path that means somehow i have to grab the title from the dRecord and truncate it and set it back. i am able to get the title dRecord.data.title but how can i set it to the drecord before the selction. basically need to any method to set it back to data. — divein, Nov 30 '16 at 21:25
I don't know extjs (otherwise I would post an "answer"). Conceptually, I would inspect the elements and classes emitted from **breadCrumbToolbar.setSelection()** and apply the 3 or 4 key styles required for true ellipsis support. If you update your question with the HTML that results from that call, I will give you the CSS you need (if possible) ;-) — JonSG, Nov 30 '16 at 21:32

How to add ellipsis to breadcrumb navigation toolbar for a long text in Extjs

0 Answers0