I have a grid with a Column configured like...
{
...
editor:new Ext.form.DateField({format:'m/d/Y'}),
renderer: function (val){return val ? Ext.util.Format.date(val, 'm/d/Y') : ''}
...
}
It works fine, except that when I click on a cell to edit it, the cell gets blanked out rather than maintaining its existing value until I choose new one. If after clicking the cell I click away from it, the cell is left empty.
Any idea what would cause this?
Thanks
I would have thought you'd want your column defined like this:
columns: [{
xtype: 'datecolumn',
format: 'm/d/Y',
editor: {
xtype: 'datefield'
}
}]
I don't think you need to use a renderer or use create are you are using it in your example
I've had a similar problem, and solved it somewhat with setting allowBlank: false, as below:
...
editor:new Ext.form.DateField({
format:'m/d/Y',
allowBlank: false
}),
...
This should reset the value back to its original value if you click out of the datefield without selecting a new value.
Related
I have a grid with two checkcolumns (apart from the rest columns) and I want to make conditional change of cell (adding specific CSS: making thicker borders of this cell if checkcolumn is enabled and default look if it is disabled) in accordance to disable / enable state.
Unfortunately with using Renderer function I end up with strange outcome (displayed object text or true/false values) because of override native Renderer of checkcolumn I presume. Overwriting checkcolumn renderer is also bad practice which I'm not allowed to do.
I've also tried to use listeners like beforeactivate, beforeDisable etc but they seems not being called whenever state of cell change (disabled <> enabled). I thing that it is possible that its because of using specific bind property as seen bellow.
Is there any method to do it clear (without to much of code repetition and without overriding and adding new method to checkcolumn renderer)??
here is code for one of two checkcolumns in my grid:
{
localized: {
text:
'details.tabview.coordination.icccoordination.changepositions.main.view.ebv'
},
dataIndex: 'ebv',
width: 50,
bind: {
disabled: '{!changeContextEditMode.active}'
},
sortable: true,
filter: true,
xtype: 'checkcolumn',
listeners: {
beforecheckchange: 'checkIfCheckChangePossible'
}
}
I will appreciate any help
I am using ext5 multiselect combo. If we select a value from the dropdown, say 'Other' and click outside to cancel the dropdown.
Now the value 'Other' will be shown in combo.
Again click the dropdown and select tha same value 'Other', it should remove 'Other' from its values. But rather it adds same value once again.
My code is given below:
xtype: 'combo',
emptyText: 'Retail BI',
name: 'chainRefId',
store: Ext.create('shared.store.filter.ChainRefs'),
displayField: 'name',
multiSelect: true,
valueField: 'chain_ref_id',
listeners: {
expand: function(){
this.getStore().load();
},
change: function(combo, newVal) {
if (!combo.eventsSuspended) {
var storeCombo = Ext.ComponentQuery.query('combo[name=storeId]')[0];
storeCombo.getStore().removeAll();
storeCombo.setValue(null);
var chainCombo = Ext.ComponentQuery.query('combo[name=chainId]')[0];
chainCombo.getStore().removeAll();
chainCombo.setValue(null);
}
}
}
Is there a solution for this?
Thanks in advance.
Your combo's store gets reloaded on each expand. Technically the record corresponding to the value you selected the first time disappears on the second store load, so the removing logic does not "see" it and therefore leaves it in the field.
Remove this:
expand: function(){
this.getStore().load();
}
and just use autoLoad: true on the store.
I have faced the same problem. I have provided a workaround for this. This fix holds good for tagfield too.
//on combo store load event
load: function () {
// I am assuming reference to combo
var rawVal = combo.getValue();
// If combo is multiselct, getValue returns an array of selected items.
// When combo is configured as remote, everytime it loads with new records and therefore removes the old reference.
// Hence, do setValue to set the value again based on old reference.
combo.setValue(rawVal);
// Here you can see, based on old reference of selected items, the drop down will be highlighted.
}
So I'm trying to create an 'abnormal' combobox using ExtJs 4 and I'm running into a slight issue which I can't figure out how to resolve. I got the basics down with the code that follows. As of right now I am able to get the dropdown to show all the addresses in a proper format and when I click on the proper address it properly shows the 'Street1' value in the input.
Here is what I'm stuck on:
I'm trying to add an initial item to the combobox that basically says something like 'Add New Address' that the user can select. (I'm planning on having this open a modal where the user can input a new address, save it and then have it be displayed back in the combobox, but all of that should be fairly simple) I can't seem to figure out a way of adding just a simple 'Add New Address' and then tracking the value to see if that value is returned to know to make the modal appear or not. I don't want to add it to the store as (I assume) that will add an item in the database and I'd prefer that not happen for the 'Add New Address'.
Any thoughts on how to get that to work? From below you can see that LocationStore is my store and that the general address components apply.
Thank you in advance.
ComboBox Code:
{
xtype: 'combobox',
anchor: '100%',
listConfig: {
emptyText: 'Add New Address - Empty Text',
itemTpl: '<tpl if="Name">{Name}<br /></tpl>'+'<tpl if="Street1">{Street1}<br /></tpl>'+'<tpl if="Street2">{Street2}<br /></tpl>'+'{City}, {StateOrProvince} {PostalCode}'
},
emptyText: 'Add New Location - tester',
fieldLabel: 'Street 1',
name: 'Street1',
allowBlank: false,
blankText: 'Street 1 Required',
displayField: 'Street1',
forceSelection: true,
store: 'LocationStore',
typeAhead: true,
valueField: 'Street1',
valueNotFoundText: 'Add New Location'
},
Thanks to those who pointed me to the right place in the doc, I finally found it!
I managed to achieve what you want by using the tpl, unfortunately I could not find a way to make the keyboard navigation work for the added item. I've looked at the code of Ext.view.BoundListKeyNav, but didn't find any easy solution...
The key was to use tpl instead of itemTpl, and add the markup for the extra item before the for loop:
listConfig: {
tpl: '<div class="my-boundlist-item-menu">Add New Address</div>'
+ '<tpl for=".">'
+ '<div class="x-boundlist-item">' + itemTpl + '</div></tpl>'
,listeners: {
el: {
delegate: '.my-boundlist-item-menu'
,click: function() {
alert('Go go go!');
}
}
}
}
The rest of the code in on jsFiddle.
#rixo see the comments on sencha api:
Config: Ext.form.field.ComboBoxView
ADD VALUE:
Maybe we can use Sencha merge object function...
To put 'add new location' value at the store top:
var newLocation = { 'Street' : 'Add New Location' };
var dataMerged = Ext.Object.merge(newLocation,myStore.getRange());
myStore.loadData(dataMerged);
SORT:
add name config param to your combobox
On controller: (2 ways)
'nameComboView combobox[name=combo]' : {
select : this.function1, // <-- when you select a item
change : this.funciton2 // <-- when the item select are changing
}
Now, on function, compare the value to open modal window or not.
I got grid with columns:
...
columns: [
{
xtype: 'rownumberer'
}, {
xtype: 'checkcolumn',
sortable: false,
header: 'done',
dataIndex: 'status',
flex: 2,
width: 55,
callback: function(success, model) {
this.setRawValue(success); // DOESNT WORK
this.setValue(success); // DOESNT WORK
},
}
...
I would like to change checkbox state to checked or unchecked. Functions setValue() or setRawValue() have no effect for the checkbox - moreover - there are not available for
the widget.
Is there simple function like setChecked(boolean) in extjs for checkcolumn?
It is ridiculous I have instance 'checkcolumn' but I can't find basic function.
I will be glad for any hint. Thank you.
Bogus
for record in grid store with 'fieldName' checkcolumn write
record.set('fieldName',false)
or
record.set('fieldName',true)
it make field selected/deselected
the most simple way is to do it in the store , you can add a new boolean field in the store with default of true to do that , and later just change that boolean in the store and the grid will be reflected with the changes
Can someone tell me how to get rid of the feature that filters combo box items.
when i click on the trigger of the combo, i want to display ALL menu items regardless of what text is already in the box, NOT filtered. I've tried several different config options with no luck.
make sense ?
for example, if i have 'View' as my text in the combo, and i click on the trigger, it will only show 'View1' and 'View2' items, i want it to include all the others...
Thanks!
heres my current config
{
...
items: [{
xtype: 'combo',
id: 'myViewsCombo',
emptyText: 'Select View',
selectOnFocus: true,
listeners: {
select: function(combo, record, index) {
L3.handlers.loadView(combo.value);
}},
store: ['View1', 'View2','blahblah']
}]
}
Setting triggerAction: "all" solved the same problem for me.
Try the setting the 'disableKeyFilter' config option to true.
See the ext combobox api.