I have a form panel with one text field. I want to do something like this:
fieldLabel : ___________________ in Kilos.
How can I bring in Kilos to the right side of the text field in extjs4?
Using afterLabelTextTpl does not cut it, I want it to show immediately after the textfield.
Any suggestions on how I can achieve this?
Here's an example of what I do in my application:
{
xtype: "fieldcontainer",
layout: "column",
width: 300,
items: [
{
xtype: "textfield",
fieldLabel: "fieldLabel",
width: 200
},
{
xtype: "displayfield",
value: "in Kilos",
width: 100
}
]
}
Related
Is there any way to append two xtypes in single. I mean i have one xtype as textfield and other one as button.
Here i am giving the code for a button next to a textfield and its working.
But now i need both the textfield and button in single.
{
layout: "column",
anchor: "0",
items: [{
columnWidth: .5,
layout: "form",
items: {
xtype: "textfield",
name: "agent",
fieldLabel: "Representant",
anchor: "0"
}
},{
columnWidth: .5,
items: {
xtype: 'button',
text: 'Click me'
}
}]
}
xtype or widget
A xtype is a sort of a shortconstructor for a class. What you can nest inside a class depends on the class. As for a textfield you can't append any childs. You should take a look at the API if you want more info about any class. Basicly you can nest them as you did it in your question
For what you want
To makes this really clean you could either extend textfield, use triggerfield (this one has already buttons where you can change the layout) or write a plugin which then can get appended to any appropriate field.
Comment Answer
You can try the following untested code! Instead of a composite field you could also use a container with a applied hbox layout. But this feels more suitable for me.
{
xtype: 'compositefield',
labelWidth: 120
items: [
{
xtype : 'textfield',
fieldLabel: 'Title',
flex : 1,
ref : '../myTextfieldRef' // set a selfreference to the ownerCt
},
{
xtype : 'button',
iconCls : 'icon-class-name',
text : 'My Button Text',
width : 20,
ref : '../myButtonRef', // set a selfreference to the ownerCt
handler : function(btn) {
console.log(btn.ownerCt.myTextfieldRef.value);
}
}
]
}
For your requirement, as being said by sra, it is better to use triggerfield (or twinTriggerField if you have two buttons).
For combining other fields, you can also take a look at compositeField.
I am new at Extjs and Sencha. i started to design my UI and i could successfully add an iconCls with buttons. now i need to add icon to a checkitem menue http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.menu.CheckItem
but i couldn't ! even though i use iconCls property.
anyone have done this before ?
If you just want the icon right next to the text, you can just insert an image after the menu item is rendered
Ext.create('Ext.menu.Menu', {
width: 100,
height: 200,
floating: false,
renderTo: Ext.getBody(),
items: [{
xtype: 'menucheckitem',
text: 'select all',
listeners: {
render: function(comp) {
Ext.DomHelper.insertAfter(comp.getEl().down(".x-menu-item-icon"), {
tag: 'img',
src: "http://flyosity.com/images/_blogentries/networkicon/stepfinal2.png",
width: 16,
height: 16
});
}
}
}]
});
Ideally, you'd create a plugin or a subclass so you can reuse this functionality. The above code does not realign the separator, it's single separator for the entire menu, but it should give you a head start
What I try to achieve is something alike this:
Only then in a Sencha Touch application.
I have achieved an input field with a button next to it but not a button inside of a input field.
Is there a way to get this functionality in Sencha Touch 2? (without using css to float the button above the input.
you can achieve this, let's try:
{
xtype: 'textfield',
component: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'textfield',
flex: 3,
},
{
xtype: 'button',
flex: 1,
text: 'test'
}
]},
},
Explanation: component is a special config for input fields and by default, it's set to {xtype: "input", type: "text"}, that's the key of this work-around. Scale your textfield vs button widths with flex config
Hope it helps. :)
I'm having trouble getting a panel to fill the space within its container panel. The container is a panel with a vbox layout having two child panels. I looked at Extjs how to set 100% height for vbox panel
and have something similar but it doesn't seem to work.
Screenshots:-
http://i.imgur.com/nAbCr.png
The screenshot is from when i use a 'fit' layout or dont even have the combobox or optionsview in a containing panel. So, what i want is for the 'options' panel to extend all the way down till the 'results' panel.
with the present vbox layout this is what i get - http://i.imgur.com/cB0k1.png
Ext.define('PA.view.CreateReportView', {
extend: 'Ext.panel.Panel',
alias: 'widget.createreportview',
id: 'createreport-panel',
requires: [
'PA.view.OptionsView', // options panel
'PA.common.Connection'],
title: 'Create Report',
items: [{
xtype: 'panel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
border: false,
height: '50px',
items: [{
xtype: 'combobox',
....
}]
}, {
xtype: 'panel',
border: false,
flex: 1,
items: [{
xtype: 'optionsview', // options panel
style: {
paddingTop: '10px'
}
}]
}]
}]
});
The value of height: should be a number, not a string. So use height: 50 instead.
I think you have it close to what you need. Couple of observations:
1. Heights need to be set as integers (no px suffix)
2. Each container that will have children should have a layout defined for them, even though there is default - it might not be what you want.
Here is your layout working reasonably well http://jsfiddle.net/dbrin/NJjhB/
One other suggestion I would add is to use a tool like Illuminations for Developers - a firebug plugin that knows about ExtJS framework.
Hi I've got an Ext.Toolbar with form elements in it including a FileUploadField. I'd like to be able to submit this "form" using an Ext.form.BasicForm. How should I do this? Ideally it should behave as a FormPanel with a ToolbarLayout (though this doesn't render correctly).
I've just tried the other way and it seems to work ok (using a form inside a toolbar), at least for the rendering part...
You can try it out with this toolbar code...
var toolBarConversationList = new Ext.Toolbar({
items:[
{
xtype: 'button',
text: 'Some Button'
},
{xtype: 'tbfill'},
{
xtype: 'form',
id: 'toolbarForm',
border: false,
bodyStyle: {
background: 'transparent',
marginTop: 3
},
items: [
{
xtype: 'textfield',
name: 'form.text',
fieldLabel: 'Some Text'
}
]
}
});
If you want you can style up the label with labelStyle on each field. If you want to include more fields you could use a column layout and form layout for each of the fields.
To submit the form you could use Ext.getCmp('toolbarForm').getForm().submit();
I hope this is what you're looking for...