PDA

View Full Version : How to put button right after text field



sachin sachdeva
15 Mar 2011, 3:29 AM
hello sir i want to put button right after text field my code is


var checkinForm1 = new Ext.FormPanel({
standardSubmit : true,
url : 'checkinRevisionResult.jsp,
frame : true,
id : 'chkformpanel',
bodyStyle : 'height:345px;',
defaultType : 'textfield',
autoWidth : true,
fileUpload : true,
monitorValid : true,
labelWidth : 100,
autoRegion : true,
height : 298,
waitMsgTarget : true,
defaults : {
width : 230
},
items : [{
html : "<b>Fill the required fields to check in<b><br /><br />",
xtype : "panel"
}, {
fieldLabel : 'Title<span style="color:red">*</span>',
name : 'title',
id : 'title',
value : title,
minLength : 0,
maxLength : 250,
allowBlank : false
}, {
fieldLabel : 'Folder Selected<span style="color:red">*</span>',--//I want to put button here rest you can see in the attachment
name : 'folder',
id : 'folder',
value : folder,
readOnly : true,
disabled : true,
allowBlank : false.........
buttons : [{
text : 'Check In',
formBind : true,
handler : function() {
var checkinForm1 = Ext.getCmp("chkformpanel");
if (checkinForm1.getForm().isValid()) {
checkinForm1.getForm().submit({
method : 'POST',
waitMsg : 'Sending data...',
success : function(form, action) {
var o = {};
o = Ext
.decode(action.response.responseText);
}
});
}
}
}, {
text : 'Reset',
handler : function() {
var checkinForm1 = Ext.getCmp("chkformpanel");
checkinForm1.getForm().reset();
}
}]

rivarecords
15 Mar 2011, 4:01 AM
Why not use a trigger field?

Here's one I extended to have a button that clears the selection:



Ext.form.clearableTrigger = Ext.extend(Ext.form.TriggerField, {
triggerTip: 'Click to clear selection.',
spObj:'',
spForm:'',
initComponent : function(){
Ext.form.clearableTrigger.superclass.initComponent.call(this);
this.triggerConfig = {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"};
},
onRender: function(ct, position){
Ext.form.clearableTrigger.superclass.onRender.call(this, ct, position);
this.trigger.on('mouseover',this.showSpTip,this)
},
onTriggerClick : function() {this.reset(); // clear contents of combobox
if(this.spObj!==''){
Ext.getCmp(this.spObj).store.removeAll();
}
if(this.spForm!==''){
Ext.getCmp(this.spForm).getForm().reset();
}
},
showSpTip : function() {
Ext.QuickTips.register({
target: this.trigger,
text: this.triggerTip,
dismissDelay: 5000
});
}
});


Your other choice if your really set on just having a button would be to use a column layout.

sachin sachdeva
15 Mar 2011, 4:52 AM
where can i put this variable in my form....

rivarecords
15 Mar 2011, 6:48 AM
where can i put this variable in my form....

You wouldn't put this in your form as we are just extending a class for a reusable object.
You could register it and reference it as an xtype:


// register xtype to allow for lazy initialization
Ext.reg('clearableTrigger', Ext.form.clearableTrigger);

Then in your form add the object:


{xtype:'clearableTrigger',
fieldLabel: 'Text field w/button'
}

Now all this might be overkill if this is just a onetime instance that you need this.
If so just use a triggerfield


{xtype:' trigger ',
fieldLabel: 'Text field w/button',
triggerClass: ‘mybuttoncss’,
onTriggerClick: function(){
//do your stuff…
}
}

sachin sachdeva
15 Mar 2011, 10:00 PM
I am using column layout as per ur instruction which is working really fine now my requirement is i want to move my button one row down u can see the required attachment plz tell me how to do this my code is



Ext.onReady(function() {
Ext.QuickTips.init();
var currDate = new Date();
var expDate = new Date(currDate.getFullYear() + 1, currDate.getMonth(),
currDate.getDate() - 1);
varid++;

var checkinForm1 = new Ext.FormPanel({
standardSubmit : true,
url : 'checkinRevisionResult.jsp?contentID=' + contValue
+ '&documentID=' + documentId + '&revLabel=' + revLabel
+ '&myfiles=' + myfiles + '&myReview=' + myReview
+ '&mystatus=' + mystatus + '&myassets=' + myassets
+ '&recent=' + recent + '&author=' + author + '&folder='
+ folder + '&folderid=' + folderid,
frame : true,
id : 'chkformpanel',
bodyStyle : 'height:555px;',

autoWidth : true,
fileUpload : true,
monitorValid : true,
labelWidth : 100,
autoRegion : true,
height : 298,
waitMsgTarget : true,
defaults : {
width : 150
},
items: [{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
fieldLabel: 'First Name',
anchor:'95%'
},
{
fieldLabel: 'second Name',
anchor:'95%'
},

]
},{
columnWidth:.5,
columnHeight:10,
layout: 'form',
items: [{
xtype: 'button',
text: 'Click me',
anchor:'20%'
}]
}]
},

]

});

checkinForm1.render('checkInPopUpFormDiv');
});

The out put of this code is attached image .......