results.RowDetails.js

Ext.define('MyApp.view.search.results.RowDetails', {
    extend: 'Ext.container.Container',
    xtype: 'search.results.rowdetails',

    requires: [
        'Acclaim.mixin.Tooltip',
        'Acclaim.util.Renderers',
        'Acclaim.util.Collections',

        'Acclaim.view.document.field.Assignee',
        'Acclaim.view.document.field.UsClass',
        'Acclaim.view.document.field.Ipc',
        'Acclaim.view.document.field.Cpc',
        'Acclaim.view.document.field.AssigneeCurrent',
        'Acclaim.view.document.field.AssigneeGuess',
        'Acclaim.view.document.field.AssigneeOriginal'
    ],

    mixins: [
        'Acclaim.mixin.Tooltip'
    ],
    cls: 'search-result-display-row-details',
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    width: '100%', // This should fix the width narrowing issue
    defaultListenerScope: true,

    items: [
        {
            xtype: 'container',
            itemId: 'leftContainer',
            margin: '5',
            width: 240,
            items: [
                {
                    xtype: 'splitbutton',
                    itemId: 'splitButton',
                    hidden: true,
                    text: 'View PDF',
                    margin: '-5px 0 10px 0',
                    listeners: {
                        click: 'onViewPdfClick'
                    },
                    menu: {
                        defaults: {
                            margin: '0 5'
                        },
                        items: [
                            {
                                text: 'Download PDF',
                                itemId: 'download'
                            },
                            {
                                text: 'View PDF in Google Docs',
                                itemId: 'docs'
                            }
                        ],
                        listeners: {
                            click: 'onOpenPdfClick'
                        }
                    }
                },
                {
                    xtype: 'component',
                    itemId: 'imagesCmp',
                    hidden: true,
                    data: [],
                    margin: '5',
                    width: 230,
                    listeners: {
                        click: {
                            fn: 'onDocImageClick',
                            delegate: '.doc-image',
                            element: 'el'
                        }
                    },
                    tpl: '<div class="doc-image" style="background-image: url({repImgSrc})"></div>'
                }
            ]
        },
        {
            xtype: 'container',
            itemId: 'rightContainer',
            columnWidth: 1,
            defaults: {
                margin: 0,
                ui: 'primary-bold'
            },
            flex: 1,
            items: [
                {
                    xtype: 'component',
                    itemId: 'fieldAbstract',
                    listeners: {
                        afterrender: 'onInventorFieldAfterRender'
                    },
                    tpl: [
                        '<div class="x-form-item">',
                        '   <label class="x-form-item-label cmp-label">Abstract:</label>',
                        '   <span>{abstract}</span>',
                        '</div>',
                        '<div class="x-form-item">',
                        '   <label class="x-form-item-label cmp-label">Inventor:</label>',
                        '   <span>{inventors}</span>',
                        '</div>'
                    ]
                },
                {
                    xtype: 'document.field.assigneeguess',
                    itemId: 'assigneeGuess',
                    fieldLabel: 'Assignee Guess',
                    hidden: true
                },
                {
                    xtype: 'document.field.assigneecurrent',
                    itemId: 'assigneeCurrent',
                    hidden: true
                },
                {
                    xtype: 'document.field.assigneeoriginal',
                    itemId: 'assigneeOriginal',
                    hidden: true
                },
                {
                    xtype: 'document.field.usclass',
                    itemId: 'usClass',
                    hidden: true
                },
                {
                    xtype: 'document.field.cpc',
                    itemId: 'cpc'
                },
                {
                    xtype: 'document.field.ipc',
                    itemId: 'ipc'
                },
                {
                    xtype: 'component',
                    itemId: 'tplCmp',
                    height: 80,
                    tpl: [
                        '<div class="hbox">',
                        '   <div class="x-form-item">',
                        '       <label class="x-form-item-label cmp-label">Filed:</label>',
                        '       <span>{app_date}</span>',
                        '   </div>',
                        '   <div class="x-form-item">',
                        '       <label class="x-form-item-label cmp-label">Published:</label>',
                        '       <span>{pub_date}</span>',
                        '   </div>',
                        '</div>',
                        '<div class="hbox">',
                        '   <div class="x-form-item">',
                        '       <label class="x-form-item-label cmp-label">Forward Cites:</label>',
                        '       <span>{num_forward_cit}</span>',
                        '   </div>',
                        '   <div class="x-form-item">',
                        '       <label class="x-form-item-label cmp-label">Reverse Cites:</label>',
                        '       <span>{num_ref_cited}</span>',
                        '   </div>',
                        '   <div class="x-form-item">',
                        '       <label class="x-form-item-label cmp-label">Claims:</label>',
                        '       <span>{num_claims}</span>',
                        '   </div>',
                        '</div>'
                    ]
                }
            ]
        }
    ],

    updateView: function () {
        var me = this;
        var record = me._rowContext.record;
        var fieldValue;
        var rightContainer = this.getComponent('rightContainer');
        var leftContainer = this.getComponent('leftContainer');
        var data = {
            abstract: record.get('abstract') || '-',
            inventors: this.formatLink(record, "inventors", "IN")
        };

        rightContainer.getComponent('fieldAbstract').update(data);

        fieldValue = this.getFieldValue(record, 'cur_assignee');

        if (record.get('ANA_ANG')) {
            fieldValue = fieldValue ? [fieldValue, 'ANG', '*'] : undefined;

            rightContainer.getComponent('assigneeGuess').show().setValue(fieldValue);

            rightContainer.getComponent('assigneeCurrent').hide();
            rightContainer.getComponent('assigneeOriginal').hide();

        } else {
            fieldValue = fieldValue ? [fieldValue, this.getFieldValue(record, 'ANRE_CUR')] : undefined;

            rightContainer.getComponent('assigneeCurrent').show().setValue(fieldValue);

            fieldValue = this.getFieldValue(record, 'assignee');
            fieldValue = fieldValue ? [fieldValue, this.getFieldValue(record, 'AN')] : undefined;

            rightContainer.getComponent('assigneeOriginal').show().setValue(fieldValue);

            rightContainer.getComponent('assigneeGuess').hide();
        }

        if (record.get('us_class')) {
            rightContainer.getComponent('usClass').show().setValue(record.get('us_class'));
        } else {
            rightContainer.getComponent('usClass').hide();
        }

        rightContainer.getComponent('cpc').setValue(record.get('CPC_OBJ'));
        rightContainer.getComponent('ipc').setValue(record.get('IPC_OBJ'));
        rightContainer.getComponent('tplCmp').update(record.data);

        leftContainer.getComponent('splitButton').setVisible(Acclaim.util.Collections.isPdfCollection(record.get('country')));

        var hasImageRep = Acclaim.util.Utils.isTrue(record.get('is_img_rep')),
            curImage = hasImageRep ? 0 : 1,
            repImgSrc = '/service/documents/loadImage?fullRez=false&doc_id=' + record.get('doc_id') + '&imgNum=' + curImage;

        var isVisible = record.get('img_count') > 0 || hasImageRep;


        if (isVisible) {
            leftContainer.getComponent('imagesCmp').update({repImgSrc: repImgSrc});
        }

        leftContainer.getComponent('imagesCmp').setVisible(isVisible);
    },

    getFieldValue: function (record, fieldName) {
        var highlightFieldName = fieldName + '_nohighlight';
        var value = record.get(highlightFieldName);

        if (!value) {
            value = record.get(fieldName);
        }

        return value;
    },

    formatLink: function (record, item, field, displayPrefix) {
        var items = this.getFieldValue(record, item);

        return Acclaim.util.Renderers.renderSearchFieldLinks(items, field, displayPrefix);
    },

    onViewPdfClick: function () {
        this.fireEvent('pdfview', 'frame', this._rowContext.record);
    },

    onOpenPdfClick: function (menu, item) {
        this.fireEvent('pdfview', item.itemId, this._rowContext.record);
    },

    onDocImageClick: function () {
        var record = this._rowContext.record;
        var hasImageRep = Acclaim.util.Utils.isTrue(record.get('is_img_rep')),
            curImage = hasImageRep ? 0 : 1;

        this.fireEvent('imageclick', curImage, record, hasImageRep);
    },

    onInventorFieldAfterRender: function (cmp) {
        Acclaim.view.document.field.Class.prototype.onSearchFiledAfterRender.call(this, cmp);
    }
});