requested best practice for resizable textarea's [Archive]

arnold

15 Jul 2007, 1:43 PM

I'm facing a problem that's puzzling me for quite some time now.
The code specified below runs on FF2.0 but its performance of creating
a resizable textarea is quite poor. Furthermore the code doesn't run on IE7.0.
The codebase I'm using is ext-1.1-rc1

Am I missing a best practice how to handle textarea's that should
be resizable in both height and width?

The code specified below is a cut down version of what it should become.
I've already noticed the examples given in the documentation all use textarea
as part of the html page, they are not dynamically added. I would like to add
the resizable textares dynamically.

Thanks for your input.

<head>
<script type="text/javascript" src="./js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./js/ext/ext-all-debug.js"></script>
<script>
Ext.onReady(function() {
var dynamicForm = new Ext.form.Form({
labelWidth: 75,
});
var memo = new Ext.form.TextArea({
fieldLabel: 'myMemo',
name: 'myMemo',
width:75
});
dynamicForm.add(
memo
);
dynamicForm.render('form-ct');

new Ext.Resizable(memo.getEl(), {
width:100,
height:100,
minWidth:50,
minHeight: 50,
wrap:true,
pinned:false,
handles: 'all'
});
});
</script>
<link rel="stylesheet" type="text/css" href="./js/ext/resources/css/ext-all.css" />
</head>
<body>
<div style="width:300px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">

<h3 style="margin-bottom:5px;">Ext Validation Form</h3>
<div id="form-ct">
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</body>
</html>