We Keep Coding

Tagfield select e deselect: how to add and remove dinammicaly fieldcontainers to form

I need to change a combox (single selection) by a tagfield (multiselect) in a big form.
A request was made so that each tagfield item (list of cars) could be associated with a field to enter the value of each car.
What is the best solution to solve this question?
One possible solution is that it is exemplified in the fiddle that follows.
Whenever the user selects a tagfield item, a fieldecontainer with two textfields is dynamically added to the fom: the first one having the same name as the selected tagfield item and the second is for the car value.
My first problem to solve is: when a tagfield list item is deselected remove the corresponding fieldcontainer.
The second problem is to collect the values of each fieldcontainer (car name and respective price value) and send them together to the server side.
FIDDLE: https://fiddle.sencha.com/#view/editor&fiddle/1s6e

I'd just assign the field containers to a hash or something as I added them and then hide them as necessary.
beforeselect: function (combo, record, eOpts) {
var valueTagItem = record.get('name', this);
if (!Ext.isDefined(this.carFields)) {
this.carFields = {};
}
if (!Ext.isDefined(this.carFields[valueTagItem])) {
this.carFields[valueTagItem] = this.up('form').add({
xtype: 'fieldcontainer',
padding: '7 0 7 0',
defaults: {
hideLabel: true,
},
layout: {
type: 'hbox',
align: 'strech'
},
items: [{
xtype: 'textfield',
name: 'text',
value: valueTagItem,
editable: false,
padding: '0 3 5 0',
flex: 1
}, {
xtype: 'textfield',
name: 'value',
emptyText: 'car value',
submitEmptyText: false,
allowBlank: false,
minWidth: 100,
flex: 0.5
}]
});
}
this.carFields[valueTagItem].show();
},
beforedeselect: function (combo, record, index, eOpts) {
var valueTagItemdeselect = record.get('name', this);
this.carFields[valueTagItemdeselect].hide();
}
To send all of the values to the server just do a this.up('form').getForm().submit() or whatever.

ExtJS: Use of event listener in combobox to update fieldLabel in another form control

I have a combo box in an ExtJS (5.1.2) grid panel that is a component in a dockedItems toolbar, defined as:
{
xtype: 'combo',
flex: 1,
width: 400,
itemId: 'labCode',
queryMode: 'local',
triggerAction: 'all',
forceSelection: true,
loading: true,
fieldLabel: 'Select lab type',
displayField: 'description',
fieldName: 'description',
valueField: 'code',
store: 'Labs',
listeners: {
change: function(combo, value) {
if (value) {
record = this.getSelectedRecord();
console.log(record.raw.units);
units = record.raw.units;
console.log(combo.up('grid').down('#labValue'))
combo.up('grid').down('#labValue').fieldLabel = units
}
}
}
}
I am trying to update the fieldLabel in another form component #labValue when I select an item from my dropdown. When I write the form component object to the console it is definitely giving the expected value, but on the form itself, the fieldLabel for the component #labValue is empty. How can I update the component #labValue with the new fieldLabel?
EDIT 1
I am trying to implement use of bindings as per the comment below, but am unsure of how to get the container widget given in the given fiddle into my dockedItems toolbar that is above my grid panel?

see fiddle in comment to your question. Should give you the answer.

Fixing the size of a panel extjs 4.2

I'm trying to create a form that is surrounded with a small box and centered in the middle of my page. I tried to change the width and height of the panel border failed. And tried to center the form by changing the region property to center but the form remained at top left corner of the page. Any help in fixing this please?
Ext.onReady(function(){
LeaseNumber = Ext.create('Ext.form.TextField', {
id : 'LeaseNumber',
padding: '5 5 5 5',
fieldLabel: '<span style="font-size: 13px">Lease Number</span>',
width :'27%'
});
Company_Name = Ext.create('Ext.form.TextField', {
id : 'CompanyName',
padding: '5 5 5 5',
fieldLabel: '<span style="font-size: 13px">Company Name</span>',
width :'27%'
});
period = Ext.create('Ext.data.Store', {
fields: ['abbr','value','name'],
data : [
{"abbr":"daterange", "value":"daterange", "name":"Date Range"},
{"abbr":"sixmonths", "value":"sixmonths", "name":"6 Months"},
{"abbr":"threemonths", "value":"threemonths", "name":"3 Months"},
{"abbr":"onemonth", "value":"onemonth", "name":"1 Month"},
{"abbr":"fifteendays", "value":"fifteendays", "name":"15 Days"},
{"abbr":"sevendays", "value":"sevendays", "name":"7 Days"},
{"abbr":"oneday", "value":"oneday", "name":"1 Day"}
]
});
period_duration = Ext.create('Ext.form.ComboBox', {
store: period,
queryMode: 'local',
displayField: 'name',
padding: '5 5 5 5',
valueField: 'abbr',
fieldLabel: '<span style="font-size: 13px">Date Range</span>',
id:'type',
editable:false,
width: '25%',
listeners: {
},
//remove the cursor from the drop-down selection
onFocus: function() {
var me = this;
if (!me.isExpanded) {
me.expand()
}
me.getPicker().focus();
},
});
Date_Range = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: '25%',
bodyPadding: 10,
bodyStyle: 'background-color:#dfe8f5;',
border:false,
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: '<span style="font-size: 13px">From</span>',
name: 'from_date',
maxValue: new Date() // limited to the current date or prior
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: '<span style="font-size: 13px">To</span>',
name: 'to_date',
value: new Date()
}]
});
Submit = Ext.create('Ext.Button', {
text : '<span style="font-size: 11px">View Records</span>' ,
margin:'20 30 30 70',
padding:'3 3 3 3',
id : 'view_records',
//handler : onButtonClick
});
Clear = Ext.create('Ext.Button', {
text : '<span style="font-size: 11px">Clear</span>' ,
padding:'3 3 3 3',
margin:'20 30 30 0',
id : 'clear',
//handler : onButtonClick
});
lease_info_panel = Ext.create('Ext.panel.Panel', {
region :'center',
id:'lease_info_panel',
bodyStyle: 'background-color:#dfe8f5;',
padding:'10 0 10 0',
items : [LeaseNumber,Company_Name,period_duration,Date_Range,Submit,Clear]
});
form_panel = Ext.create('Ext.panel.Panel', {
region :'center',
layout : 'border',
width: '50%',
items : [lease_info_panel]
});
viewport = Ext.create('Ext.container.Viewport', {
layout : 'border' ,
renderTo :'body',
items : [form_panel]
});
});

region:'center' doesn't do anything unless the parent container/panel has layout:'border', and what it does can be found in the border layout docs: region:'center' does only work relatively to the other items in the layout.
The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
region:'south' is below, region:'north' is above, region:'west' is left, region:'east' is right, and region:'center' is between them, but not necessarily centered. (e.g. if some of the other regions have especially big items or no items at all).
What you are possibly searching for is a Window:
Ext.create('Ext.window.Window',{
width:200,
height:200,
title:'ABC',
draggable:false,
closable:false
}).show();
Compare fiddle.

extjs 3 combo-box lable width and input field width

I need to get combo-box label to a one line. I'm using extjs3.
Code :
var orq_type_button= new Ext.form.ComboBox({
id:'testa',
fieldLabel: 'Organization Type',
editable:false,
emptyText:'Empty',
selectOnFocus:true,
forceSelection: true,
allowBlank: false,
width: 350,
labelWidth: 330,
});
var assignConfig_window_formPanal = new Ext.form.FormPanel ({
id:'assignConfig_window_formPanal',
frame:true,
bodyStyle:'padding:5px 5px 0',
height:110,
buttonAlign:'center',
items: [orq_type_button],
buttons: [ {text: 'Save'} ,
{text: 'Cancel',
handler : function() {
assignConfig_window.hide();
}
}
]
});
Screenshot :

labelWidth is a property of FormPanel or FieldSet, not for combobox. Move it to your form panel so that it can work.

You can use labelStyle config. Please check this link.
https://www.sencha.com/forum/showthread.php?37686-Setting-a-combobox-fieldLabel-width-to-include-long-labels

Can any body help me out with the code for making a panel with check boxes inside a combo box in extjs 4.2

i want check boxes inside a combo box in extjs 4.2 i have tried the below code but it is not working may be i am not able to make it work but it is using images to show check and uncheck functionality. can some help me out ?
function stackoverflow() {
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select multiple names ',
id: 'BCCAddress',
name: 'BCCAddress',
maxHeight: 150,
width: 500,
multiSelect: true,
emptyText : "Select Bcc email addresses",
renderTo: 'fi-form',
//store: myArrayStore,
store: new Ext.data.SimpleStore({
fields: ['name'],
data : myArrayStore
}),
displayField: 'name',
valueField: 'name',
forceSelection: false,
editable: false,
mode: 'MULTI',
triggerAction: 'all',
listConfig : {
getInnerTpl : function() {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>';
}
}
});
}

I think that it's a bad idea, sencha don't like when changing standard behaviour. But it's simply "kludge". Your code does not have correct css style. Look at this:
var data = [
[1, 'Ext.Js'],
[2, 'Angular.js'],
[3, 'Ember.js'],
[4, 'Олю']
];
// in real solution add it to your css file
var customStyle = ".x-boundlist-item img.chkCombo { width: 13px; height: 13px; background: transparent url('https://extjs.cachefly.net/ext-4.0.7-gpl/resources/themes/images/default/form/checkbox.gif'); }" + ".x-boundlist-selected img.chkCombo { background-position: 0 -13px; width: 13px; height: 13px; background: transparent url(https://extjs.cachefly.net/ext-4.0.7-gpl/resources/themes/images/default/form/checkbox.gif'); }";
Ext.util.CSS.createStyleSheet(customStyle);
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'I like',
id: 'BCCAddress',
name: 'BCCAddress',
maxHeight: 150,
width: 500,
multiSelect: true,
emptyText: "",
renderTo: Ext.getBody(),
store: new Ext.data.SimpleStore({
id: 0,
fields: ['Id', 'Name'],
data: data
}),
displayField: 'Name',
valueField: 'Id',
forceSelection: false,
editable: false,
mode: 'local',
triggerAction: 'all',
listConfig: {
getInnerTpl: function() {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {Name} </div>';
}
}
});
Fiddle

Checkboxes in a combobox is impossible.
Period.
Think about it differently, and you will find a solution.
You say you need checkboxes above. So that's the way to go. Put your checkboxes in a row. Then you add a button that when clicked opens a window with a grid in it that contains the other checkboxes.
This will look and behave like what you describe.
Conclusion:
You have to change your approach. A framework offers bricks that you put together to get what you want. Like LEGO. If you take the right brickes you can achieve great things in a few time.
Currently, you immagine bricks that don't exist, and try to force something to work that impossible way that you immagined. Why would you use a framework then ? Your free to invent the impossible, even flying calves or a snake with seven heads.