1. #1
    Sencha User
    Join Date
    Jul 2009
    Location
    Austin, TX
    Posts
    47
    Vote Rating
    0
    slsmithtx is on a distinguished road

      0  

    Default Textarea in subrow

    Textarea in subrow


    I have a process that renders a panel with a form to a div in a grid subrow created with Ext.ux.grid.RowExpander. The form includes a textarea field and what I am finding is that when I try to edit the text in the textarea I can only get my mouse to click at the beginning of the text string. I can't click inside the text string or select any of the text. Has anyone experienced this or have an idea of the cause or solution?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,984
    Vote Rating
    455
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Can you provide a quick example of what you are doing so we can have a look?

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Location
    Austin, TX
    Posts
    47
    Vote Rating
    0
    slsmithtx is on a distinguished road

      0  

    Default


    So here is the method that creates the subrow. It creates a panel that includes a button for opening the form with the description field. The panel with the form is rendered to a div in the XTemplate template.time_entry_description.

    Code:
        
        ,setExpander:function(obj){
            try {
                obj.expander = new Ext.grid.RowExpander2({
                    expandOnDblClick:false,
                    header: 'Info',
                    tooltip: 'Use this column to open the details subrow, where you can provide a description of the entry and upload any needed files.',
                    preserveRowsOnRefresh:true,
                    tpl : new Ext.Template(
                        '<p></p>'
                    )
                });
                obj.expander.on('expand',function(exp,rec,bd,rowindex){
                    var fileDisplay = template.file_simplelink.apply(rec.data);
                    var descr = template.time_entry_description.apply(rec.data);
                    var show_desc_btn = obj.show_expander_btns;
                    var descTxt = '<span style="font-weight:bold">[Add]&nbsp;&nbsp;</span>'
                    if (obj.system_data_templateid > 0){
                        for (var o in rec.data.owner) {
                            if (o == 'system_data_template' && !Ext.isEmpty(rec.data.owner[o])){
                                show_desc_btn = true;
                            }
                        }
                    } 
                    if (!Ext.isEmpty(rec.data.description)){
                        descTxt = '<span style="font-weight:bold">[Edit]&nbsp;&nbsp;</span>'
                    }
                    var w = obj.getWidth()-25;
                    if (Ext.isIE) w = w - 30;
                    var pnl = new Ext.Panel({
                        renderTo: bd
                        ,border: false
                        ,width: w
                        ,layout: 'column'        
                        ,items: [{
                            html: '<div>&nbsp;</div>'
                            ,border: false
                            ,width: 40
                        },{
                            xtype: 'button'
                            ,ctCls: 'plain-btn'
                            ,scale: 'medium'
                            ,hidden: !show_desc_btn
                            ,width:60
                            ,text: descTxt
                            ,tooltip: 'Click to add/update a description of the entry'
                            ,rowindex: rowindex
                            ,record: rec
                            ,listeners: {click: function(btn,e){
                                obj.setDescriptionPanel(obj,btn.record,btn.rowindex,pnl)
                            },scope:obj }
                        },{
                            html: descr
                            ,border: false
                            ,columnWidth: 0.5
                        },{
                            xtype: 'button'
                            ,ctCls: 'plain-btn'
                            ,scale: 'medium'
                            ,hidden: !obj.show_expander_btns
                            ,width:60
                            ,text: '<span style="font-weight:bold">&nbsp;&nbsp;[Add]&nbsp;&nbsp;</span>'
                            ,tooltip: 'Click to add/update files associated with the entry'
                            ,time_entryid: rec.data.time_entryid
                            ,rowindex: rowindex
                            ,listeners: {click: function(btn,e){
                                var w = new SystemData.window.FileAssignmentTimeEntryTab({
                                    system_data_type:'time_entry'
                                    ,system_data_typeid:btn.time_entryid
                                    ,title: 'File Management for Time Entry #' + btn.time_entryid
                                    });
                                w.show();
                                w.on('association',function(grid,selection,fid){
                                        try {
                                            obj.setFileAssociation(obj,selection,btn.time_entryid,btn.rowindex);
                                        } 
                                        catch (e) {
                                            global.handleError(e);
                                        }
                                    })
                                w.on('deletefile',function(grid,fid,selection){
                                        try {
                                            var options = {
                                                time_entryid: btn.time_entryid,
                                                rowIndex: btn.rowindex
                                            }
                                            obj.singleStore.baseParams.time_entryid = btn.time_entryid;
                                            obj.singleStore.load(options);
                                            obj.expander.expandRow.defer(1500,obj.expander,[btn.rowindex]);
                                        } 
                                        catch (e) {
                                            global.handleError(e);
                                        }
                                    })
                            },scope:obj }
                        },{
                            html: fileDisplay
                            ,border: false
                            ,columnWidth: 0.5
                        }]
                    });
                },obj);
            } catch (e) {
                global.handleError(e);
            }
        }
    And here is the code for creating the form panel:
    Code:
        ,setDescriptionPanel: function(obj,record,rowindex,pnl){
            try {
                var o, i, ownerFound = false;
                    var r = pnl.el.query('.time_entry_desc_edit')
                    if (!Ext.isEmpty(r)) {
                        var p = new Ext.Panel({
                            renderTo: r[0],
                            height: 225,
                            border: false,
                            closable: false,
                            layout: 'fit',
                            time_entryid: record.data.time_entryid,
                            time_entry_record: record,
                            rowindex: rowindex,
                            owner_system_data_type: '',
                            owner_system_data_typeid: '',
                            items: [{
                                xtype: 'form',
                                border: false,
                                items: [{
                                    xtype: 'textarea',
                                    ref:  '../descText',
                                    
                                    hideLabel:true,
                                    anchor: '95%',
                                    height: '150',
                                    name:'time_entry_description',
                                    value: record.data.description
                                }, {
                                    xtype: 'checkbox',
                                    hideLabel:true,
                                    boxLabel: 'Send this text as a comment to the associated matter.',
                                    ref:  '../descCbox'
                                }]
                            }],
                            tbar: ['->',{
                                text: 'Apply',
                                iconCls: 'modal_save',
                                ctCls: 'plain-btn',
                                listeners: {
                                    click: function(){
                                        try {
                                            obj.updateDescription(obj,p);
                                        } 
                                        catch (e) {
                                            global.handleError(e);
                                        }
                                    }
                                }
                            }, {
                                text: 'Close',
                                iconCls: 'modal_close',
                                ctCls: 'plain-btn',
                                listeners: {
                                    click: function(){
                                        try {
                                            p.destroy();
                                        } 
                                        catch (e) {
                                            global.handleError(e);
                                        }
                                    }
                                }
                            }],
                            listeners: {
                                afterrender:function(dPnl){
                                    try {
                                        var t = dPnl.getTopToolbar();
                                        if (!Ext.isEmpty(t)){
                                            t.addClass('tbar-no-border');
                                        }
                                    }catch(e){
                                        global.handleError(e);
                                    }
                                    
                                }
                            }
                        });
                        for (o in record.data.owner) {
                            for (i = 0; i < record.data.owner[o].length; i++) {
                                p.owner_system_data_type = o;
                                p.owner_system_data_typeid = record.data.owner[o][i].id;
                                ownerFound = true;
                            }
                        }
                        var chkbx = p.descCbox;
                        chkbx.setDisabled(false);
                        chkbx.setValue(false);
                        if (!ownerFound) chkbx.setDisabled(true);
                    }
            } catch (e) {
                global.handleError(e);
            }
        }

Thread Participants: 1

Tags for this Thread