I work with mvc. When i double click on a textfield it not listening.
But specialkey that means enter work perfectly. where is my fault.
Here is my text field
{
xtype : 'textfield',
name : 'articleName',
fieldLabel : 'Article',
allowBlank : false,
readOnly : true,
width : 253,
enableKeyEvents : true
}
and here is my controller
sv01t01000102 textfield[name=articleName]':{
specialkey: function (field, el) {
if (el.getKey() == Ext.EventObject.ENTER || el.getKey()==el.TAB){
console.log('World')
}
},
dblclick : function(field, el){
console.log('Hello')
}
}
Can you help me?
Field doesn't have a double click event. Typically you'll do something like:
textfield[name=articleName]': {
afterrender: function(c) {
c.inputEl.on('dblclick', function() {
console.log('double');
});
}
}
'textfield[name = articleName]':{
render: function (component) {
component.getEl().on('dblclick', function(event, el) {
alert('You dblclicked on textfield!');
})
}
}
Just in case somebody stumbles over this and want's to solve it in the MVVM way.
View
{
xtype: 'textfield',
listeners: {
afterrender: view => {
view.getTargetEl().on('dblclick', 'onDblclick');
}
}
}
Controller
onDblclick() {
console.log(arguments) // Pick what you need
}
Related
I have a pivot grid which display if the users have create,read,update,delete" permissions, the users are agrouped in this way departaments > estabilishments > sectors > users and i want the user to be able to edit this fields.
I already tried using with a renderer:
aggregate: [{
renderer: function(value, record, dataIndex, cell, column) {
var id = Ext.id();
Ext.defer(function() {
Ext.widget('checkbox', {
renderTo: id,
checked: value,
listeners: {
change: {
fn: function(event, target) {
//some function here
}
}
}
});
}, 100);
return Ext.String.format('<div id="{0}"></div>', id);
},
aggregator: 'aggCheckBoxR',
dataIndex: 'Incluir',
header: 'Incluir'
}]
and with a widget column:
aggregate: [{
aggregator: 'aggCheckBoxR',
column: {
xtype: 'widgetcolumn',
widget: {
xtype: 'checkbox',
listeners: {
change: function(cb) {
//some function here
}
}
}
},
dataIndex: 'Incluir',
header: 'Incluir'
}]
My Aggregator:
aggCheckBoxR: function(records, measure, matrix, rowGroupKey, colGroupKey) {
if (records.length > 1) {
let checkAllTrue = true;
for (var i = 0; i < records.length; i++) {
if (records[i].get('Incluir') === false || records[i].get('Incluir') === 0) {
checkAllTrue = false;
}
}
return checkAllTrue;
} else {
return records[0].get('Incluir');
}
}
The checkbox apears on the grid but my problem is the data "dont persist", whenever i expand or collapse a left axis on the pivot grid the value of the checkbox returns to its original value, how can i persist this data?
Already tried update the record manualy
change: function(cb) {
var nomeCmp = cb.getWidgetRecord().data._compactview_;
Ext.getStore('acesso.ColabStore').findRecord('Nome', nomeCmp).data.Incluir = true;
}
But still, it doestn't work.
EDIT: Had to change the column object event listener to:
{
xtype: 'widgetcolumn',
widget: {
xtype: 'checkbox',
listeners: {
afterrender: function(component, eOpts) {
console.log('after,render');
component.getEl().on('change', function(e, el) {
console.log('change func here');
})
}
}
}
}
With this, the change event is only fired when the users check a checkbox, and finally, I could use
norbeq's answer
You can update the record manually using:
record.set('Incluir',true);
and if you dont wan't to send changes to server:
record.commit();
I'm trying to enable/disable a button when the store getNewRecords() function return the length, but not work!
bind: {
disabled: "{!grid.getStore().getNewRecords().length}"
}
Fiddle: https://fiddle.sencha.com/fiddle/1sj5
Someone have idea to how resolve this?
You need to create a formula in your viewmodel:
viewModel: {
formulas: {
hasNewRecords: function (r) {
return this.getView().down("treepanel").getStore().getNewRecords().length > 0;
}
}
}
then you can use it for your bindings:
bind: {
disabled: "{hasNewRecords}"
}
(probably not the best way to get the data you want).
You can read about it here, here and here .
What you're wanting to do here is currently not possible in the framework. Instead, you should create a ViewModel data value and modify that where need be, like this:
var form = Ext.create("Ext.form.Panel", {
viewModel: {
data: {
newRecords: false
}
},
items: [{
xtype: "textfield",
labelField: "Add Child",
name: "col1",
value: "Teste 123"
}],
tbar: {
xtype: "button",
text: "Add new record",
handler: function () {
var data = this.up("form").getForm().getFieldValues();
var rec = grid.getStore().getAt(0);
data["treeCol"] = rec.childNodes.length + 1;
// setting value, so binding updates
this.lookupViewModel().set('newRecords', true);
rec.appendChild(data);
}
},
bbar: {
xtype: "button",
text: "button to disabled when new records",
bind: {
disabled: "{newRecords}"
}
},
renderTo: Ext.getBody()
});
Or by simply doing this.
In your controller:
me.getView().getViewModel().set('storeLen', store.getNewRecords().length);
In your ViewModel, simply do this:
formulas : {
hasNewRecords : {
get : function(get){
var length = get('storeLen') // --> gets the one you set at your controller
return length > 0 ? true : false;
}
}
}
In your View:
bind : {
disabled : '{hasNewRecords}'
}
I have the code below to create a text field in the form.
buildForm : function() {
this.time = new Ext.form.TextField({
name : 'estimate',
allowBlank : false,
fieldLabel : 'Estimate',
onBlur : function(field) {
return this.setValue(this.getValue().replace('.', ','));
}
});
}
It works correctly.
Now, when I render this form, and in this field is value="abc", I need to set disabled to this field.
I tried:
disabled : function() { return this.getValue() == 'abc' ? true : false;}
disabled : function(field) { return this.getValue() == 'abc' ? true : false;}
disabled : function(field) { return field.getValue() == 'abc' ? true : false;}
disabled : this.getValue() == 'abc' ? true : false
But nothing of this work. Any idea?
Try this
change: function(field, newValue,) {
field.setDisabled(newValue == 'abc');
}
Check API for more info on events, methods for TextField
UPD:
If you need to disable textfield only on form render, just add this line in buildForm function.
this.time.setDisabled(this.time.getValue() == 'abc')
Another way is to add logic on TextField's render event.
render: function(field) {
field.setDisabled(field.getValue() == 'abc')
}
UPD 2:
I suppose, that your issue is on way of setting value or in the order.
Here's a working sample.
Notice this.time.setValue('abc')
instead of this.time.value = 'abc', which won't work.
buildForm: function() {
this.timeFld = Ext.create('Ext.form.TextField', {
name: 'estimate',
allowBlank: false,
fieldLabel: 'Estimate',
onBlur: function(field) {
return this.setValue(this.getValue().replace('.', ','));
},
listeners: {
render: function(field) {
field.setDisabled(field.getValue() == 'abc');
}
}
});
this.timeFld.setValue('abc');
// this.time.setDisabled(this.time.getValue() == 'abc');
Ext.create('Ext.form.Panel', {
title: 'Test',
items: [
this.timeFld
],
renderTo: Ext.getBody()
});
// alert(this.timeFld.getValue());
}
this is my textfield in my formpanel:
{
xtype: 'textfield',
fieldLabel: 'Homepage',
name: 'homepage',
tabIndex: 4,
padding: '10'
}
I want the loaded value which is displayed to be a clickable link.
EDIT:
because webpages without "http://" at the beginning won't display in the new tab, i changed the solution a little bit like this:
listeners: {
render: function (field) {
this.getEl().on('click', function (e, t, eOpts) {
var url = e.target.value;
if (url != '') {
if (url.indexOf("http://") != -1) {
var win = window.open(url, '_blank');
} else {
var win = window.open('http://' + url, '_blank');
}
win.focus();
}
}
}
}
There is no way you can achieve what you desire.For 'link' you have to
use another component may be a label with a link.But with some trick you can make the value in a textfield appear as a link.For that you can do something like this:
{
xtype: 'textfield',
name: 'name',
id:'link',
fieldStyle: 'color: blue; text-decoration:underline; cursor:pointer',
listeners: {
render: function (field) {
this.getEl().on('click', function (e, t, eOpts) {
console.log(e);
//here you need to do some hack around to restrict changing href,only on click of input in the textfield.Could not achieve that,but tried to give some idea.
var url = e.target.value;
if(url != ''){
window.location="";
}
});
}
}
}
Hope this helps you :-)
To do this you can use the render function as follows:
{
xtype : 'displayfield',
id: 'yourId',
name:'yourName',
fieldLabel: 'This is the label',
renderer: function(data, field) {
return ''+data+''
}
}
It may not be the most elegant solution but it works :)
How do i dynamically display a message when a textfield is clicked/has any value and when i delete the contents of the textfield that message must disappear
You can use listeners on the textfield. I haven't tested the following code but you can try something like that.
{
xtype: 'textfield',
messageTip: undefined,
listeners: {
afterrender: function(text) { //Textfield doesn't have a click even't so use afterrender to put a click event on the element
//U can use text.inputEl.on({ aswell to only get the input element and not the label
text.getEl().on({
click: function() {
//Create tip here
text.messageTip = Ext.create('Ext.tip.Tip', {
//Configuration
}).show();
}
});
},
keypress: function(text) {
if (text.getValue() == '') {
//hide the message
text.messageTip.hide()
}
}
}
}
You can use 'change' listeners on the textfield:
{
xtype: 'textfield',
listeners : {
change: function(field, newValue, oldValue, options)) {
if(newvalue!=''){
Message=Ext.create('Ext.tip.ToolTip', {
closable:true,
hideDelay : 3000,
padding: '0 0 0 0',
maxWidth:400,
width:800,
html: ".......",
}).showAt([x, y]);
}
else Message.hide();
}
}
}