PDA

View Full Version : Extension help



talha06
3 Mar 2010, 1:10 AM
Hello to everyone,

I need a textfield that contains a image button(will have 'handler').

I looked some tutorials including official tutorial. I need your helps, I'm really new to extensions.

Here's my code:

Ext.ux.ButtonText.js


Ext.namespace('Ext.ux');

Ext.ux.ButtonText = function(config) {
// call parent constructor
Ext.ux.ButtonText.superclass.constructor.call(this, config);
Ext.apply(this, config);

this.tpl = config.tpl ||
'<tpl for="."><div class="x-button-text-item x-button-text-item {'
+ this.iconClsField
+ '}">{'
+ this.displayField
+ '}</div></tpl>'
;

this.on({
render:{scope:this, fn:function() {
//var wrap = this.el.up('div.x-form-field-wrap');
//this.wrap.applyStyles({position:'relative'});
this.el.addClass('x-button-text-input');
this.flag = Ext.DomHelper.append(wrap, {
tag: 'div', style:'position:absolute'
});
}}
});
}; // eo constructor

Ext.extend(Ext.ux.ButtonText, Ext.form.TextField, {
setIconCls: function() {
var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
if(rec) {
this.flag.className = 'x-button-text-icon ' + rec.get(this.iconClsField);
}
},
setValue: function(value) {
Ext.ux.ButtonText.superclass.setValue.call(this, value);
this.setIconCls();
}
});
Ext.reg( 'buttontext', Ext.ux.ButtonText );


Ext.ux.ButtonText.css


.add-icon {
background-image: url(./lib/ext/ux/ButtonText/img/add.png) !important;
}
.x-button-text-icon {
background-repeat: no-repeat;
background-position: 0 50%;
width: 18px;
height: 14px;
}
.x-button-text-input {
padding-left: 25px;
}
.x-form-field-wrap .x-button-text-icon {
top: 3px;
left: 5px;
}
.x-button-text-item {
background-repeat: no-repeat !important;
background-position: 3px 50% !important;
padding-left: 24px;
}

my Page(User Interface)

Ext.onReady(function() {
Ext.QuickTips.init();

var form = new Ext.form.FormPanel({
id : 'MyForm',
renderTo : document.body,
frame : true,
border : true,
autoHeight : true,
width : 400,
items : [{
xtype : 'buttontext',
id : 'myButtonText',
fieldLabel : 'Text',
iconCls : 'add-icon'
}]
});
});

talha06
3 Mar 2010, 1:40 AM
any recommendations? it's urgent, please I need your helps.. it'll be enough to reference a tutorial too.. I must learn how to create extensions..
Thanx..

Animal
3 Mar 2010, 2:06 AM
Why don't you use a TriggerField?

talha06
3 Mar 2010, 6:54 AM
thank you so much for your reply.. really this is exactly what I need.

But there's not action despite I implemented onTriggerClick event.. please, can you correct my code, where is my absence or mistake?

Here's the code for TriggerField:



xtype : 'trigger',
id : 'myTrigger',
fieldLabel : '<b>Text</b>',
anchor : '95%',
width : 100,
autoHeight : true,
frame : true,
listeners : {
'onTriggerClick' : function() {
Ext.Msg.alert('Sonuc', 'Trigger t?kland?!');
}

talha06
3 Mar 2010, 7:07 AM
Why don't you use a TriggerField?
Thank you so much for your reply.. well despite that I implemented 'onTriggerClick' event, I'm not able to see any action. By the way as I wrote in my first message I need to render an image instead of combo-icon(arrow).

Here's my code for TriggerField item, I'll be happy if you can say my mistakes and how to render image on combo-icon..

Thanks in advance,
T



xtype : 'trigger',
id : 'myTrigger',
fieldLabel : '<b>Text</b>',
anchor : '95%',
width : 100,
autoHeight : true,
frame : true,
listeners : {
'onTriggerClick' : function() {
Ext.Msg.alert('Sonuc', 'Trigger t?kland?!');
}
}