myTree.on('click',function(node){
if(node.isLeaf())
{
Ext.Msg.alert("You are in value ",nodeValue,"whose name is",nodeName);
alert("You are in value ",nodeValue,"whose name is",nodeName);
}
});
myTree is a TreePanel. I'm getting a tree but click function is not working. I'm very new to extjs. Help me out.
Thanks in advance
Try this instead:
myTree.on('click',function(node){
if(node.isLeaf())
{
Ext.MessageBox.show({
msg: 'You are in text ' + node.text + ', whose id is ' + node.id,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
}
});
Haven't tried it, but it looks very similar to what I have been working with today :)
You can define your tree like :
var myTree = new Ext.tree.TreePanel({
region: 'west',
id: 'navTree',
title: 'Items',
width: 200,
store: store,
split: true,
collapsible: true,
listeners: {
itemclick: {
fn: function (view, record, item, index, event) {
//the record is the data node that was clicked
//the item is the html dom element in the tree that was clicked
//index is the index of the node relative to its parent
nodeId = record.data.id;
htmlId = item.id;
if (record.data.leaf) {
Ext.Msg.alert("Alert", "leaf");
}
else {
Ext.Msg.alert("Alert", "Not leaf");
}
}
}
}
})
Looks like you are looking for:
node.value
node.name
OR (I'm not good with Ext)
node.nodeValue
node.nodeName
Related
I am using below code to display Tool Tip for Grid cell In ExtJS 6
{
header: 'Name',
cls: 'nameCls',
locked: true,
tdCls: 'nameTdCls',
dataIndex: 'name',
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdAttr = 'data-qtip= "' + value + '" data-qclass="tipCls" data-qwidth=200';
return value;
}}
When i run the application it doesnt show the tooltip and display below error message.
Any idea guys??
Thanks in advance guys.
Regards,
Mahendra
Have you tried creating an Ext.tip.ToolTip? You can create a single one to serve as tooltip for each name cell (using delegate) and update it with the value of that cell. Set up a grid render listener to create the tooltip like this:
render: function(grid) {
var view = grid.getView();
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.getId(),
delegate: view.itemSelector + ' .nameTdCls',
trackMouse: true,
listeners: {
beforeshow: function updateTipBody(tip) {
var tipGridView = tip.target.component;
var record = tipGridView.getRecord(tip.triggerElement);
tip.update(record.get('name'));
}
}
});
}
For a working example, see this Fiddle.
Thanks for Robert Klein Kromhof!
grid columns:
columns: [{..., tdCls: 'tip'}]
grid listeners:
render: function (grid) {
var view = grid.getView();
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.getId(),
delegate: view.itemSelector + ' .tip',
trackMouse: true,
listeners: {
beforeshow: function (tip) {
var tipGridView = tip.target.component;
var record = tipGridView.getRecord(tip.triggerElement);
var colname = tipGridView.getHeaderCt().getHeaderAtIndex(tip.triggerElement.cellIndex).dataIndex;
tip.update(record.get(colname));
}
}
});
},
destroy: function (view) {
delete view.tip;
}
Create independent function and call when you need.
var grid = Ext.getCmp('your_grid_id'); // Enter your grid id
initToolTip(grid); // call function
initToolTip: function(grid) {
var view = grid.view;
// record the current cellIndex
grid.mon(view, {
uievent: function(type, view, cell, recordIndex, cellIndex, e) {
grid.cellIndex = cellIndex;
grid.recordIndex = recordIndex;
}
});
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: '.x-grid-cell',
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
header = grid.headerCt.getGridColumns()[grid.cellIndex];
columnText = grid.getStore().getAt(grid.recordIndex).get(header.dataIndex);
tip.update(columnText);
}
}
}
});
}
I am trying to add dynamically created contextmenu's to an Ext.tree.TreePanel object. The menus will all be different depending on user selections.
I can create the menu outside the treePanel descriptor but how can I append the dynamically created menu to the Ext.tree.TreePanel? The documentation seems to indicate that treePanel.on(nameOfMenuHere) would append the menu but it returns as undefined.
var menu1 = new Ext.menu.Menu({
id: 'menu1',
items: [{
id: 'menu1-item1',
text: 'Menu 1 - Item 1'
},
{
id: 'menu1-item2',
text: 'Menu 1 - Item 2'
}],
listeners: {
itemclick: function (item) {
switch (item.id) {
case 'menu1-item1':
var n = item.parentMenu.contextNode;
if (n.parentNode) {
alert(n.parentNode.text);
alert("node ID: " + n.id + ", node text: " + n.text); //Ext ID and text of selected node
}
break;
}
}
}
});
userLayerTree.on(menu1);
use the listener itemcontextmenu within the tree panel. something like this should work.
var tpanel = {
xtype : 'treepanel',
width: 250,
.........
..........
listeners : {
itemcontextmenu: showLyrContextMenu
}
}
and then create the function to create and show your menu
function showLyrContextMenu(view, record, item, index, event){
lyrTreeContextMenu = new Ext.menu.Menu({
id : 'lyrcontxtmenu',
.......
items: items
});
lyrTreeContextMenu.showAt(event.getXY());
event.stopEvent();
}
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 just trying to create a custom ComboBox to reduce some boilerplate:
Ext.define('App.AutoComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.autocombobox',
states: null,
initComponent: function() {
this.callParent(arguments);
if (!this.states) {
this.queryMode = 'remote';
} else {
this.queryMode = 'local';
this.bindStore(Ext.create('Ext.data.Store', {
type: 'array',
fields: ['_placeholder_'],
data: _.map(this.states, function(state) {
return {_placeholder_ : state}; })
}));
this.displayField = this.valueField = '_placeholder_'
}
this.validator = function(v) {
var field = this.displayField,
index = this.getStore().findExact(field, v);
return (index!==-1) ? true : 'Invalid selection';
};
},
listeners: {
select: function(combo, records) {
console.log(combo.getStore().indexOf(records[0])); // !== -1
}
}
});
So that I can use it like:
requires: ['App.AutoComboBox'],
...
items: [{
xtype: 'autocombobox',
name: 'test_local',
fieldLabel: 'test_local',
states: [ 'cat', 'dog' ] // local
}, {
xtype: 'autocombobox',
name: 'test_remote',
fieldLabel: 'test_remote',
store: 'Chipmunks', // a remote store
displayField: 'chipmunk_name'
}]
...
But something is amiss. The AutoComboBox renders OK, shows dropdown of records fine, but when I select an item from the dropdown, the combobox's display field is not set. The store seems to find the selected record (as seen by the select listener), but the value is still not set...
Help? thanks.
Edit: FIXED by moving this.callParent(arguments) after the new store is bound. Now accepting answers that explain why this fixes it... (I don't know why it works.. but it does)
In the parent initComponent method, the displayField is used to create the displayTpl:
if (!me.displayTpl) {
me.displayTpl = new Ext.XTemplate(
'<tpl for=".">' +
'{[typeof values === "string" ? values : values["' + me.displayField + '"]]}' +
'<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
'</tpl>'
);
} else if (Ext.isString(me.displayTpl)) {
me.displayTpl = new Ext.XTemplate(me.displayTpl);
}
The bindStore call has probably nothing to do with it, I believe that this is this line that must be put before the call to the parent method:
this.displayField = this.valueField = '_placeholder_';