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 :)
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();
When clicking on the dropdown to select individual months/years the dialog disappears like I am trying to click away.
fiddle: https://fiddle.sencha.com/#fiddle/9m6
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// The fields
defaultType: 'textfield',
items: [{
xtype: 'datefield',
fieldLabel: 'Start Date',
id: 'startDate'
}],
renderTo: Ext.getBody()
});
});
This has been fixed in ExtJs 5.1.0.107
EXTJS-15968 Date Picker disappear after click on Month Picker.
http://docs.sencha.com/extjs/5.1/whats_new/release_notes.html
It turned out to be a bug indeed in Ext.Js v 5.0.1.
http://www.sencha.com/forum/showthread.php?289825
Solution with overriding Ext.picker.Date class worked for me:
Ext.define('EXTJS-14607.picker.Date', {
override: 'Ext.picker.Date',
runAnimation: function(isHide) {
var me = this,
picker = this.monthPicker,
options = {
duration: 200,
callback: function() {
picker.setVisible(!isHide);
// See showMonthPicker
picker.ownerCmp = isHide ? null : me;
}
};
if (isHide) {
picker.el.slideOut('t', options);
} else {
picker.el.slideIn('t', options);
}
},
hideMonthPicker: function(animate) {
var me = this,
picker = me.monthPicker;
if (picker && picker.isVisible()) {
if (me.shouldAnimate(animate)) {
me.runAnimation(true);
} else {
picker.hide();
// See showMonthPicker
picker.ownerCmp = null;
}
}
return me;
},
showMonthPicker: function(animate) {
var me = this,
el = me.el,
picker;
if (me.rendered && !me.disabled) {
picker = me.createMonthPicker();
if (!picker.isVisible()) {
picker.setValue(me.getActive());
picker.setSize(el.getSize());
picker.setPosition(-el.getBorderWidth('l'), -el.getBorderWidth('t'));
if (me.shouldAnimate(animate)) {
me.runAnimation(false);
} else {
picker.show();
// We need to set the ownerCmp so that owns() can correctly
// match up the component hierarchy, however when positioning the picker
// we don't want it to position like a normal floater because we render it to
// month picker element itself.
picker.ownerCmp = me;
}
}
}
return me;
}
});
I'm trying to add a QuickTip to a form field, but can't find a way to make my code work. Firstly, I tried to use a qtip attribute
{
fieldLabel: 'Last Name',
qtip:'This tip is not showing at all',
name: 'last'
}
and then using Ext.tip.ToolTip class:
Ext.create('Ext.tip.ToolTip', {
target: 'rating_field',
anchor: 'right',
trackMouse: true,
html: 'This tip is not showing at all'
});
Ext.QuickTips.init();
Here is a jsfiddle with the source code: jsfiddle
Yes, use the inputAttrTpl config and the data-qtip attribute:
{
fieldLabel: 'Last Name',
inputAttrTpl: " data-qtip='This is my quick tip!' ",
name: 'last'
}
I found the answer here: How should I add a tooltip to an ExtJS Component?
{
fieldLabel: 'Last Name',
qtip: "This is a tip",
name: 'last',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: c.qtip
});
}
}
}
Using vero4ka's answer I wrote a simple plugin which can be used with forms to enable quicktips on child fields.
Ext.define('Ext.form.QtipPlugin', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.qtipfields',
init: function (cmp) {
this.setCmp(cmp);
cmp.on('beforerender', function () {
var fields = cmp.query('field[qtip]');
for (var i = 0; i < fields.length; i++) {
fields[i].on('render', this.register, this);
}
}, this);
},
register: function (field) {
var obj = {
target: field.id
};
if (typeof field.qtip === 'string') {
obj.text = field.qtip;
} else if (typeof field.qtip === 'object') {
// Allow qtip configuration objects.
// i.e. qtip: { text: 'hi', ... }
Ext.applyIf(obj, field.qtip);
}
Ext.tip.QuickTipManager.register(obj);
}
});
For any form field, you can use this:
{
xtype: 'textfield', // or anything else
autoEl: {
'data-qtip': 'This is working tip!'
}
}
You can also use the built-in plugin datatip on a form panel.
in form panel (see http://docs.sencha.com/extjs/6.5.1/classic/Ext.ux.DataTip.html) :
in form config :
plugins = [{ptype : 'datatip'}]
in field text config :
tooltip : "my tooltip text"
If you are generating tooltip dynamically then you can use below snippet:
txtFieldName.el.set({ "data-qtip": Ext.String.htmlDecode("Some Text") });
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();
}
}
}
{
xtype: 'htmleditor',
name: 'msg',
value : 'abcd',
id: 'myeditor',
listeners: {
afterrender: function(t2){
var but = Ext.create('Ext.Button', {
text: 'Click me',
handler: function() {
Ext.getCmp('myeditor').insertAtCursor('bbbb');
}
});
t2.getToolbar().add(but)
}
}
}
If cursers is not in the html editor I wont to insert 'bbbb' at the end of 'abcd' and if curser in any point in the editor wont to insert 'bbbb' at the curser point. Can you please help me to do this?
I've used this workaroud:
var before = Ext.getCmp('yourHtmlEditor').getValue();
Ext.getCmp('yourHtmlEditor').insertAtCursor('something');
var after = Ext.getCmp('noteEditor').getValue();
if (before==after) {
Ext.getCmp('yourHtmlEditor').setValue(before+'something');
}