I have a fieldset with textfield checkbox pairs, how do i align them in rows so that i have like below, thanks in advance.
[CHECKBOX] [TEXTBOX]
[CHECKBOX] [TEXTBOX]
[CHECKBOX] [TEXTBOX]
You should use fieldContainer with layout: 'hbox' configuration.
For example:
var formConfig = {
xtype: 'form'
// Your form configuration here
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'My pair label', // If you want a label for both fields, or you can put fieldLabel to either/both/none fields
layout: {
type: 'hbox',
align: 'middle', // or any other align of your choosing
},
items: [
{
xtype: 'checkbox',
// your checkbox configuration here, i.e. hideLabel: true or fieldLabel: 'checkbox label'
},
{
xtype: 'textfield',
// your textfield configuration here
}
]
}
]
}
Related
I am working on a front UI, a dropdown will be provided which will have the list of commands and one or two variables depending of command, what I am trying to do is when I select the command from dropdown, it should populate textfield where the user will provide the values.
e,g Command : "show route table <vrf_name> <ip_addr>"
then two new textfields should be created for user to fill in these values. I am stumped on how to create textfields with variable names. ?
var commands = Ext.create('Ext.data.Store', {
fields: ['command', 'reqvalues'],
data : [
{"command":"op find-security-zone ip <ip_addr>", "reqvalues":"ip_addr"},
{"command":"show configuration | display set | match <match_text>", "reqvalues":"match_text"},
{"command":"show route table <vrf_name> <ip_addr>", "reqvalues":"vrf_name, ip_addr"}
]
});
// Create the combo box, attached to the data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Select Command',
store: commands,
queryMode: 'local',
displayField: 'command',
valueField: 'command',
renderTo: Ext.getBody(),
});
Fiddle : https://fiddle.sencha.com/fiddle/3f2t
For dynamically adding fields, try the following code. It adds an initially empty fieldset, and when user selects something from the combobox, it adds textfields to the fieldset, after deleting all previously added textfields. (Instead of fieldset you can use container etc.)
This is a working fiddle.
var commands = Ext.create('Ext.data.Store', {
fields: ['command', 'reqvalues'],
data : [
{"command":"op find-security-zone ip <ip_addr>", "reqvalues":"ip_addr"},
{"command":"show configuration | display set | match <match_text>", "reqvalues":"match_text"},
{"command":"show route table <vrf_name> <ip_addr>", "reqvalues":"vrf_name, ip_addr"}
]
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
items: [{
xtype: 'combobox',
fieldLabel: 'Select Command',
store: commands,
queryMode: 'local',
displayField: 'command',
valueField: 'command',
listeners: {
// this is needed to remove all textfields when nothing is selected
change: function(combo, newValue, oldValue, eOpts) {
if (!newValue) {
// remove all existing textfields from fieldset
combo.up('panel').getComponent('parameters').removeAll();
}
},
select: function(combo, records, eOpts ) {
// get fieldSet
var fieldSet = combo.up('panel').getComponent('parameters');
// remove previous textfields
fieldSet.removeAll();
// get parameters from selection, assuming only 1 can
// be selected and delimiter in reqvalues is always ', '
var parameters = records[0].get('reqvalues').split(', ');
// loop through parameters and add textfield for each
Ext.Array.each(parameters, function(parameter) {
fieldSet.add({
xtype: 'textfield',
fieldLabel: parameter,
// by setting itemId, you can easily get textfield values,
// for example:
// fieldSet.getComponent('parameter_name')
itemId: parameter
})
});
}
}
}, {
// fieldSet for parameters, initially empty, can be container etc.
xtype: 'fieldset',
title: 'Parameters',
itemId: 'parameters'
}]
});
Better to use card layout with pre-defined forms and switch them using combobox. Something like this:
Ext.define('CommandsStore', {
extend: 'Ext.data.Store',
fields: ['command', 'cardIndex'],
data: [{
command: "op find-security-zone ip <ip_addr>",
cardIndex: 0
}, {
command: "show configuration | display set | match <match_text>",
cardIndex: 1
}, {
command: "show route table <vrf_name> <ip_addr>",
cardIndex: 2
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
layout: 'card',
title: "Commands",
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'combobox',
fieldLabel: 'Select Command',
store: Ext.create('CommandsStore'),
queryMode: 'local',
displayField: 'command',
valueField: 'cardIndex',
width: 400,
value: 0,
listeners: {
select: function (combo, records) {
var cardIndex = records[0].get('cardIndex');
this.up('panel').getLayout().setActiveItem(cardIndex);
}
}
}]
}],
defaults: {
xtype: 'form',
layout: 'form',
bodyPadding: 5,
border: false,
},
items: [{
items: [{
xtype: 'textfield',
fieldLabel: "IP Address",
name: 'ip_addr'
}]
}, {
items: [{
xtype: 'textfield',
fieldLabel: "Match Text",
name: 'match_text'
}]
}, {
items: [{
xtype: 'textfield',
fieldLabel: "IP Address",
name: 'ip_addr'
}, {
xtype: 'textfield',
fieldLabel: "VRF Name",
name: 'vrf_name'
}]
}],
height: 400,
renderTo: Ext.getBody()
})
}
});
I want to group textfields by columns & rows, I have tried with layout type 'table' but I'm unable to group the textfields, I need Like below, please help me, Im completely new to Ext jS,thanks in advance.
column 1 column 2 column 3
Row 1 Name: textfield RollNo: textfield Language: textfield
Row 2 Age: textfield Ph: textfield Class: textfield
Row 3 ID: textfield Email: textfield Class: textfield
There is multiple ways how to achieve this but what you could do is to set the layout of the main form to hbox (horizontal box) than add 3 containers (or you could use fieldset, fieldcontainers) and in them set the layout to default or vbox (vertical). You can also play with the flex config to position your fields correctly.
You can always add more containers and play with their layouts.
Also you could try to use table layout http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#layout-table
I personally use Sencha Architect so it's much faster for me to create such form with hbox and vbox layouts.
Check out this fiddle: https://fiddle.sencha.com/#view/editor&fiddle/200h
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias: 'widget.myform',
requires: [
'Ext.form.FieldContainer',
'Ext.form.field.Text'
],
bodyPadding: 10,
title: 'My Form',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
},
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
},
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
}
]
});
I have following code-
{ fieldLabel: 'Date', name: 'Date', xtype: 'datefield' }
{ fieldLabel: 'Name', name: 'PerName', xtype: 'textfield' },
{
xtype: 'panel',
layout: 'form',
border: false,
labelWidth: 200,
items: [
this.fields.check1 = { xtype: 'checkbox', name: 'Check1', fieldLabel: 'Checkbox 1', width: 320 },
this.fields.check2 = { xtype: 'checkbox', name: 'Check2', fieldLabel: 'Checkbox 2', width: 320 }
]
}
Here, I am taking the checkboxes inside a panel as I need to increase the label width.
The label is showing but checkbox is not displaying .
What I am doing wrong
How about you add your checkboxes inside a FormPanel something like this:
var myPanel = new Ext.form.Panel({
alias: 'widget.myformPanel',
renderTo: Ext.getBody(),
defaults: {
labelWidth: 100,
},
items: [{
xtype: 'checkbox',
name: 'Check1',
fieldLabel: 'Checkbox 1'
}, {
xtype: 'checkbox',
name: 'Check2',
fieldLabel: 'Checkbox 2'
}]
});
In that way, you can set the labelWidth of the formPanel items.
Try to play it with jsfiddle.
Build your application with
sencha app build
It seems that you need to build only for deployment, however, development version uses production css. Therefore, anytime you add a new class you need to build the app to re-create css to include the new class styling.
I'd like to achieve this behavior:
If a field (combo, text, date ...) in a form panel has a custom property set true
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name',
customProp: true
},
then add a button or other components behind the actual component. Writen in json it would look like this:
{
xtype: 'container',
margin: '0 0 8 0',
layout: 'hbox',
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name',
},
{
xtype: 'button',
text: 'xxx',
tooltip: 'I\'m a custom tooltip'
}
]
}
I'm wondering how i could achieve this. Is this even possible ?
It is.
Ext.require('*');
Ext.onReady(function() {
var form = new Ext.form.Panel({
renderTo: document.body,
width: 400,
height: 100,
items: {
xtype: 'textfield',
fieldLabel: 'Foo'
}
});
setTimeout(function() {
var field = form.down('textfield');
// We have a reference to the field, let's go!
var owner = field.ownerCt;
owner.remove(field, false);
owner.add({
xtype: 'container',
layout: 'hbox',
items: [field, {
xtype: 'button',
text: 'Foo'
}]
});
}, 1000);
});
Where container is a reference to the container with the hbox layout.
I need to set a dynamic text (units of measurement,Eg:*C,mm) beside a textfield
I declared the text field as,
{
xtype:'textfield',
hidden:true,
id:'XX',
fieldLabel:' Value',
name:'Value'
}
and label as
{
xtype:'label',
id:'X',
name:'X'
}
I could set and get the values but the alignment is the problem. Plz help me with that.
Thank you
You probably need to wrap this textfield into fieldcontainer, something like:
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Temperature',
}, {
xtype: 'displayfield',
value: '*C'
}]
}