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
Code:
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
Code:
.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)
Code:
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'
}]
});
});