Extjs binding value not getting cleared when the user clears the date field box manually ( user changes date field to blank )
I cannot post the code but i found a similar fiddle
In this fiddle i want the value to be cleared when i clear the datefield manually , instead what is happening is the display field keeps showing the old value
it would be great help if some one could provide me the solution
You could use specialkey event for the datefield to achieve the required result.
You can check here with working fiddle.
Note you can put your logic based on your requirement. I have just create simple example.
Code snippet
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
viewModel: {
data: {
dateFrom: null,
}
},
items: [{
xtype: 'datefield',
emptyText: 'Date From',
bind: '{dateFrom}',
listeners: {
specialkey: function (field, e) {
if (e.getKey() == e.DELETE || e.getKey() == e.BACKSPACE) {
field.up('panel').getViewModel().set('dateFrom', null);
}
}
}
}, {
xtype: 'displayfield',
bind: {
value: '{dateFrom}'
}
}]
});
}
});
Related
I have grid with RowEditing plugin.
Editor has 2 columns: one with combobox and another with disabled textfield.
I need to change textfield value after changing the combobox value.
I have combobox listener:
listeners = {
select: function (combo, records) {
var editorRecord = myGrid.getPlugin('rowEditPlugin').editor.getRecord();
editorRecord.data["SomeCol"] = "SomeValue";
}
}
But value in the textfield does not refresh until another calling of roweditor.
I need just to set text value to the cell, without updating store. And also if I click cancel button of roweditor, I need cell value returning to old one.
Thanks for your time, all replies and all help.
You can change it using the selection model of the grid,something like this :
{
text: 'Type',
dataIndex: 'type',
editor: {
xtype: 'combo',
typeAhead: true,
selectOnTab: true,
displayField:"name",
listeners: {
select: function(combo, records) {
myGrid= this.up('grid');
var selectedModel = this.up('grid').getSelectionModel().getSelection()[0];
//selectedModel.set('dataIndexOfNextCol', "Success");
val = combo.getValue();
if(val == 'type1'){
Ext.getCmp('textFld').setValue("success");
}
else{
Ext.getCmp('textFld').setValue("failure");
}
}
},
{
text: 'Item',
dataIndex: 'item',
editor: {
xtype: 'textfield',
id: 'textFld'
}
}
You have to commit the changes on update.So you can call edit event listener,
listeners: {
edit: function(editor, e) {
e.record.commit();
}
},
For reference , have a look at this DEMO
We have a gridpanel in ExtJs 3.2,with a text field as an editor on one of the columns:
var psp_config= {
store:ProjectSponsorView.s_store,
.....
tbar: new Ext.Toolbar({
...
}),
......
columns: [
....
{header: '% Contribution',
renderer: Ext.util.Format.numberRenderer('000.00'),
editor: new Ext.form.TextField({
listeners: {
'change' : function (field, newValue, oldValue) {
........
}
}
})
}
We have a situation wherein the change event of teh editor does not get fired if the user submits the form, while the focus is still within the editor/column.
This causes the stale data to be submitted for that particular column.
How do we forcibly have the gridpanel/column/editor to register/accept the changed value in such a case?
I presume you use EditorGridPanel? If so, maybe attach to its afteredit event:
Config would look something like this:
......
columns: [
....
{
header: '% Contribution',
renderer: Ext.util.Format.numberRenderer('000.00'),
editor: new Ext.form.TextField({})
}
],
listeners: {
afteredit: function(e) {
//handle changes here
}
}
Hello i have the following RowEditing plugin i use
ar rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
errorSummary:false,
onEnterKey: function(e) { console.log(e); },
listeners:{
'beforeedit':function(grid,eOpts){
},
'canceledit':function(grid, eOpts){
if(grid.grid.store.data.getAt(0).data.id == "new"){
grid.grid.store.removeAt(0);
}
},
'afteredit':function(editor, changes, record, rowIndex){
editor.grid.store.reload();
},
'validateedit': handleUpdate{{params.alias}}
}
});
But the enter action is still performed and no console log is performed... i tried to put it inside the listeners as well but no change...
here's my item in my grid
{
header: 'Description',
width: 160,
align: 'left',
dataIndex: 'description',
filters: {
type: 'string'
},
enableKeyEvents: true,
editor: {
xtype: 'textfield',
allowBlank: false,
listeners: {
keydown: {
element: 'el',
fn: function(el){
if (el.ENTER){
alert('test');
return false;
}
}
},
},
}
}
so my next try as to 'disable' the firing of the enter (or submitting the rowedit) inside the field itself. but a return false still submits the form, and a onEnterKey doesn't work there either... anyone has an idea what i am doing wrong?
I did find that onEnterKey is part of the parent Editing class but it doesn't say how i should call that..
First of all, onEnterKey is marked as private, so you shouldn't be overriding it, especially not upon instantiation. If you want to override class methods, you should do that by creating a new class which inherits from the class containing the methods:
Ext.define('My.grid.plugin.Editing', {
extends: 'Ext.grid.plugin.RowEditing',
onEnterKey: function() {
this.callParent(arguments);
// your code here
}
});
Regarding your problem, I suggest one of the following approaches:
A) If you really want to disable the ENTER key event only, you should do that on the editor field(s). Your attempt was close, but the event listener was not doing the right things yet:
editor: {
allowBlank: false,
listeners: {
keydown: function(e){
if (e.getKey() == e.ENTER){
e.stopEvent();
}
}
}
}
Note that with this approach the user will still be able to submit any change by just clicking the "Update" button of the row editing plugin.
B) If you just want to prevent the editing plugin from writing the changes to the store under certain conditions, you can also use the validateedit event on the editing plugin:
listeners: {
validateedit: function(editor, e) {
if (true) { // your condition here
return false;
}
}
}
This will also work, if the user clicks on the "Update" button.
I am getting problem that how to implement search field on tree store getting data from the server in sencha touch.Any working code will be appreciated.
In Search field You can use key up event and filter a store as type charterer match to store and show filter data in list and on select on item in list you hide list as bellow done
{
xtype: 'searchfield',
name : 'Name',
label: 'Name: ',
id : 'Name',
record:'Details',
placeHolder: 'Name',
listeners: {
focus: function( field, e, eOpts ){
Ext.getCmp('FilterDropDown').show();
},
keyup: function(field) {
var value = field.getValue();
var Store = Ext.getStore('Details');
var FilterStore = Ext.getStore('FilterDetails');
FilterStore.removeAll();
count=0;
var thisRegEx = new RegExp(value, 'i');
for(cnt=0;cnt<Store.getCount();cnt++){
if(thisRegEx.test(Store.data.items[cnt].data.name)){
FilterStore.add({
'id':Store.data.items[cnt].data.id,
'name': Store.data.items[cnt].data.name,
'email': Store.data.items[cnt].data.email
});
}
}
}
}
},
{
xtype:'FilterList',
id: 'FilterDropDown',
height:200,
hidden : true,
listeners: {
itemtap: function( field, index, target, record, e, eOpts ){
Ext.getCmp('Name').setValue(record.data.name);
Ext.getCmp('Email').setValue(record.data.email);
Ext.getCmp('Mobile').setValue(record.data.mobileno);
Ext.getCmp('FilderDropDown').hide();
}
}
},
xtype FilterList code is
Ext.define('appname.view.FilterList', {
extend: 'Ext.dataview.List',
xtype: 'FilterList',
require: ['FilterDetails'],
config:{
store: 'FilterDetails',
scrollable: true,
cls: 'drop_down_list',
ui: 'round',
itemTpl: '<div>{name}</div>'
}
});
It will help you :)
Assuming the data is already in the store when you search this isn't too difficult to implement using the methods referenced by speznaz.
In your view have a xtype "searchfield" or "textfield".
{
xtype: "searchfield",
}
In the controller bind a "keyup" event to this field.
refs: {
searchfield: 'mypanel searchfield'
},
control: {
searchfield: {
keyup: 'doSearch'
}
}
For your function to search something like:
doSearch: function(searchfield, e, eOpts) {
var searchterm = searchfield.getValue();
var store = Ext.getStore('myStore');
// Now just customise the search options
store.find(fieldName, value, [startIndex], [anyMatch], [caseSensitive], [exactMatch] );
}
This is assuming you want to search on keyup. You may want to use the "action" event instead.
Assuming you already have data in the store.
Here is the working code:
{
xtype: "searchfield",
name:'searchName'
}
In the controller bind a "keyup" event to this field.
refs: {
searchName: 'searchfield[name=searchName]'
},
control: {
searchName: {
keyup: 'doSearch'
}
}
For your function to search :
doSearch: function(field, e, eOpts) {
var searchterm = field.getValue();
var store = Ext.getStore('myStore');
// Now just customise the search options
store.filter(fieldName,searchterm);
}
Use try.sencha.com it has lot of examples on how to use the framework.
You need to use an Ajax store for getting data from server. I think this guide will be a good start for that, it also implements a tree store.
This example explains how to filter data in a list based on what you type in a searchfield.
Hope it helps
We are creating an application using ExtJS 4 which has a requirement that entry in a form textfield should always be in UPPERCASE.
For this, I found that I can call a function on change event and convert the current value to uppercase and set it back to the field in following way:
change: function(field, newValue){
field.setValue(newValue.toUpperCase());
}
What this does is that if a user enters a letter in lowercase, then it converts it to uppercase and puts it back in the field. During this, there is a slight transition displayed to the user from lower to upper case. That is, the user is able to see the letter in lower case and after a millisecond may be, the letter becomes uppercase.
The question is: Is there a way to avoid this 'transition/transformation' from lower to upper case and show letters in uppercase directly to the user as soon as he types something?
I tried using - style=text-transform:uppercase - but no luck.
Any help would be really appreciated.
Thanks in advance.
I tried using - style=text-transform:uppercase - but no luck.
You should have used fieldStyle instead. Here is demo.
Cheers!
The given answer works only for DISPLAYING the text in uppercase, but the value remains the same. I've extended the textfield to override the getValue() method to return the value in uppercase, not only for displaying, with an optional config flag:
Ext.define('Dev.ux.UpperTextField', {
extend: 'Ext.form.field.Text',
alias: 'widget.uppertextfield',
//configuration
config: {
uppercaseValue: true //defaults to true
},
constructor: function (config) {
this.initConfig(config);
this.callParent([config]);
},
initComponent: function () {
var me = this;
Ext.apply(me, {
fieldStyle: 'text-transform:uppercase',
});
me.callParent();
},
//overriden function
getValue: function () {
var val = this.callParent();
return this.getUppercaseValue() ? val.toUpperCase() : val;
}
});
Then I can easily add several textfields to a form:
{
xtype: 'uppertextfield',
uppercaseValue: false, //custom cfg available (default is true)
name: 'Descricao',
fieldLabel: 'Nome da Cidade',
allowBlank: false,
enforceMaxLength: true,
maxLength: 80
},
Works in EXT 4.2.1.
You can do it with a plugin too.
{
xtype: 'textfield',
plugins: ['uppertextfield']
}
Using this as the plugin in ExtJS 4.2.1
Ext.define('App.plugin.UpperTextField', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.uppertextfield',
init: function (cmp) {
Ext.apply(cmp, {
fieldStyle: (cmp.fieldStyle ? cmp.fieldStyle + ';' : '') + 'text-transform:uppercase',
getValue: function() {
var val = cmp.__proto__.getValue.apply(cmp, arguments);
return val && val.toUpperCase ? val.toUpperCase() : val;
}
});
}
});
Inspired by: https://www.sencha.com/forum/showthread.php?94599-Uppercase-TextField-plugin&p=522068&viewfull=1#post522068
PS: I had to call getValue on the prototype. If I would have called getValue on the cmp it would recursively continue to do that and never exit. I'm open to suggestions on how to change the component's getValue method through the plugin.
It Works for ExtJS 4.2
If you want only uppercase input for your text field then extend the base text field to change the field style to uppercase and also attach a listener to update the raw value on any text change to uppercase.
//define a new custom text field
Ext.define('IN.view.item.UpperCaseTextField', {
extend: 'Ext.form.field.Text',
alias : 'widget.myUpperCaseTextField',
fieldStyle: {
textTransform: "uppercase"
},
initComponent: function() {
this.callParent(arguments);
},
listeners: {
change: function (obj, newValue) {
console.log(newValue);
obj.setRawValue(newValue.toUpperCase());
}
}
});
//use the newly created custom text field in your view definition using the alias
xtype: 'form',
items: [
{
xtype: 'myUpperCaseTextField',
itemId: 'itemNumber',
name : 'item',
allowBlank: false,
msgTarget: 'side',
fieldLabel: 'Item Number',
size: 11,
maxLength: 10
},
]