Featured Post

Writing Ext-JS Plugin Procedure

-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="ext3/css/ext-all.css" />

<script type="text/javascript" src="ext3/ext-base.js"></script>

<script type="text/javascript" src="ext3/ext-all-debug.js"></script>

<script type="text/javascript">

Ext.BLANK_IMAGE_URL = 'ext3/images/default/s.gif';
Ext.QuickTips.init();

Ext.ns('Plugins');

Ext.onReady(function() {

Plugins.CharsLeftReminder = (function() {

return {

init: function(field) {

var thisXType = field.getXType();

if (false == (field instanceof Ext.form.TextArea))
return; // We only want to modify textarea fields.

var maxChars = field.maxLength;
var charsLeft;
var suffix = ' of ' + maxChars + ' characters
left';
var instanceId = field.id + '-charsLeft';

var getCharsLeft = function(field) {
var charsLeft = maxChars -
field.getValue().length;
return charsLeft;
};

var keyupHandler = function(f, evt) {
charsLeft = getCharsLeft(field);
Ext.getDom(instanceId).innerHTML = charsLeft +
suffix;
};

Ext.apply(field, {
enableKeyEvents: true,
onRender:
field.onRender.createSequence(function(ct, position) {
if (Ext.getDom(instanceId)) return;
charsLeft = getCharsLeft(field);
var reminder = {
tag: 'div',
id: instanceId,
html: charsLeft + suffix,
style: 'padding:1px 1px 5px 1px;'
}
Ext.DomHelper.insertAfter(this.el,
reminder);
field.on('keyup', keyupHandler);
}),
onDestroy:
field.onDestroy.createSequence(function() {
var el = Ext.getDom(instanceId);
if (el) {
Ext.removeNode(el);
}
})
});


}
};
});

Plugins.updateForm = new Ext.FormPanel({
id: 'updateForm',
frame: true,
renderTo: Ext.getBody(),
title: 'What\'s happening?',
bodyStyle: 'padding:5px',
width: 550,
layout: 'form',
items: [
{
xtype: 'textarea',
hideLabel: true,
name: 'comments',
anchor: '100%',
height: 100,
maxLength: 140,
plugins: [new Plugins.CharsLeftReminder()]
}
],
buttons: [{
text: 'Send'
}, {
text: 'Cancel',
handler: function() {
Ext.getCmp('updateForm').destroy();
}
}]
});
});

</script>

</head>
<body style="padding: 20px;">
</body>
</html>

This e-Mail may contain proprietary and confidential information and is sent for the intended recipient(s) only. If by an addressing or transmission error this mail has been misdirected to you, you are requested to delete this mail immediately. You are also hereby notified that any use, any form of reproduction, dissemination, copying, disclosure, modification, distribution and/or publication of this e-mail message, contents or its attachment other than by its intended recipient/s is strictly prohibited.

Visit us at http://www.polaris.co.in

Comments

Post a Comment