PDA

View Full Version : Textarea in subrow



slsmithtx
12 Apr 2012, 11:34 AM
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?

scottmartin
12 Apr 2012, 12:27 PM
Can you provide a quick example of what you are doing so we can have a look?

Regards,
Scott.

slsmithtx
12 Apr 2012, 12:44 PM
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.



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


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