{
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');
}
Related
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}'
}
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;
}
});
Am complete stranger to Extjs. I have a requirement to allow multi select in the Extjs tree. Below piece of code is doing single select. i need to change the code to make it multi select with semi-colon between selected ids. Can anyone please change the code as per the requirement. Also if you could tell me to which field or variable the selected value of the tree is written into. Thanks in advance
Ext.onReady(function() {
Ext.QuickTips.init();
var str='';
var switch_flag = '';
var approvals = '';
var active_mode = '';
var json = null;
Ext.Ajax.request({
url: 'Dmscategorytree/ajax/Message',
method: 'POST',
params:{
lifecycle_id: str,
switch_flag: switch_flag,
approvals: approvals,
active_mode: active_mode
},
success: function(response, options) {
var path='';
var id='';
var text='';
json=response.responseText;
alert(json);
json = json.replace(/"/g,'\"');
json=Ext.util.JSON.decode(json);
var flag=true;
var myloader = new Ext.tree.TreeLoader();
myloader.load = function(node, cb,scope) {
if(this.clearOnLoad){
while(node.firstChild){
node.removeChild(node.firstChild);
}
}
if(this.doPreload(node)){
this.runCallback(cb, scope || node, [node]);
}
cb();
}
var tree = new Ext.tree.TreePanel({
animate:true,
autoScroll:true,
//loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
containerScroll: true,
border: false,
loader:myloader,
rootVisible: false,
listeners:{
checkchange:function(node){
if(flag){
toggleCheck(tree.root,false,node.id);
path=node.attributes.value;
id=node.attributes.ID;
text=node.attributes.text;
path=path.replace(/\^/g,'/');
}
}
}
});
function SelectToParent()
{
try
{
parent.window.opener.callParent(path,id);
parent.window.opener.focus();
parent.window.close();
}
catch(e){
alert('got exception');
window.close();
}
}
function toggleCheck(node,isCheck,nodeId)
{
flag=false;
if(node)
{
var args=[isCheck];
node.cascade(function(){
c=args[0];
if(nodeId!=this.id){
this.ui.toggleCheck(c);
this.attributes.checked=c;
}
},null,args);
}
flag=true;
return true;
}
var root = new Ext.tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false, // disable root node dragging
id:'src',
children: json
});
tree.setRootNode(root);
var topbar = new Ext.Toolbar({
region : 'north',
height:30,
margins: '0 0 0 5',
items:[
{
xtype: 'box',
id: 'title',
autoEl: {
html: '#label.chooseCat#'
}
,width:525
},
{
text: '#label.Done#',
id: 'doneBtn',
tooltip: 'Done',
handler: SelectToParent
}
]
});
topbar.render('tree');
tree.render('tree');
tree.getRootNode().expand();
}
});
});
Please refer the following links,
pass two id s in extjs 4 tree multiSelect and pass one id in single click
Multiselect Tree & Drag and Drop
Drag and Drop between Grid and “multiselect” control in EXTJS
Demo
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 :)
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") });