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 am using an EXTJS xtype: container to create a row and when I want to insert a row into the store the row gets added to the top of the existing row instead of the bottom, is there any way to add the newly created row to the bottom?
Below is the code:
somefunc: function (token, filter, op) {
var filter = Ext.create({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
})
]
});
this.insert(0, filter);
this.doLayout();
return filter;
}
Any idea why this could be happening and how to fix this?
Any idea why this could be happening and how to fix this?
Because you are using insert() method instead of this you can use add() method it will by default add in last index.
In this FIDDLE, I have created a demo using add() method to adding new component. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'Add new row',
renderTo: Ext.getBody(),
tbar: [{
text: 'Add new',
handler: function (btn) {
var panel = btn.up('panel');
panel.add({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [{
xtype: 'textfield',
emptyText:'enter value here',
fieldLabel:'this is field '+( panel.items.items.length+1)
}]
});
}
}]
})
}
});
When i submit my form and I try to get value in php server like
$_POST['dis']
But that's undefined. I make a example of my problem in http://jsfiddle.net/LVBGr/
Here is my code
items: [{
labelAlign : 'right',
labelWidth: 72,
width:300,
xtype: 'displayfield',
fieldLabel: 'How to get',
name: 'dis',
value: 'Hello'
}],
buttons: [{
text: 'Submit',
handler: function () {
var form = this.up('form').getForm();
var values = form.getValues();
alert(values['dis']); // undefinded
}
}]
How to get value in xtype: displayfield thanks
The displayfield is configured by default to not submit any value. You can change this by specifying submitValue: true in the configuration.
I need to make an app that shows a form in a window on one screen and the main window with part of the same form - or is this is'n possible another form - on the other screen. Is this possible with ExtJs ? How ? Has anyone seen an example or perhaps an extension that does such ?
You can use a 'card' layout inside your form.
In the following example, the user sees three different pages, the first two pages have fields and the last one a button.
Clicking on the button retrieves the values from the fields. It doesn't matter that the fields are in different containers, as long as these containers are 'descendants' of the form.
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
layout:'card',
activeItem: 0,
bbar: [{
text: '« Previous',
handler: function(button) {
var cardlayout = button.up('form').getLayout();
var prev = cardlayout.getPrev();
if (prev) {
cardlayout.setActiveItem(prev);
}
}
},{
text: 'Next »',
handler: function(button) {
var cardlayout = button.up('form').getLayout();
var next = cardlayout.getNext();
if (next) {
cardlayout.setActiveItem(next);
}
}
}],
items: [{
xtype: 'container',
items: [{
xtype: 'textfield',
fieldLabel: 'First name',
name: 'firstName'
}]
},{
xtype: 'container',
items: [{
xtype: 'textfield',
fieldLabel: 'Last name',
name: 'lastName'
}]
},{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Submit',
handler: function(button) {
var formValues = button.up('form').getValues();
alert('Name: ' + formValues.firstName
+ ' ' + formValues.lastName);
}
}]
}]
});
}
});
var confirmWindow = Ext.create('Ext.window.Window', {
title: 'Selected Item List',
autoHeight: true,
width: 500,
layout: 'fit',
modal: true,
items: [{
xtype: 'panel',
bodyPadding : 5,
items: [{
xtype: 'textfield',
id : 'freightFee',
fieldLabel: 'Freight Fee ',
name : 'freight' // I need this value, when I click the button
}]
}],
bbar: ['->', {
xtype: 'buttongroup',
items: [{
text: "test",
handler: function () {
// I want to get the textfield value (freightFee)
var freightFee = Ext.getCmp('freightFee').getValue(); // error :Ext.getCmp('freightFee') is undefined
}
}]
}
});
I have a window like above, and I want to get the text inputbox value when I click the button.
I tried,
var freightFee = Ext.getCmp('freightFee').getValue();
but error message say,
Ext.getCmp('freightFee') is undefined
anybody know this?
thank you!
Don't use getCmp ever! It's very expensive and unnecessary. Check out up/down methods to locate elements parents/childrens http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-down
In your case something like that should work:
handler: function(button) {
var tf = button.up('window').down('#freightFee');
}