I would like to remove the tool from my panel;
SO I have this code, when I add tool Ext.widget to my panel and then I would like to remove this just created tool, how can I do this. I haven't fount the removeTool method. and I tried to us remove method and remove it, but nothing; Here is the code:
if (...) {
var a = Ext.widget({
id: 'kuku',
xtype: 'tool',
type: 'close',
handler: Ext.Function.bind(me.close, me, [])
});
if (closable && !me.hasUICls('closable')) {
me.addClsWithUI('closable');
me.addTool(a);
}
} else {
if (Ext.getCmp('kuku') != null) {
me.remove("kuku", false); //here how can I remove??
me.doLayout();
}
}
If you are unable to remove using id, try using component ref. as arg... something like below
me.remove(Ext.getCmp('kuku'), false);
Related
I'm trying to use an event delegation to add to the store the label of the checkbox I'm checking in Sencha.
How could I pass the label of the checkbox as a parameter? Am I doing well the delegation? I have an error like 'Unexpected token'.
I really have to put the function apart because I want to write like 30 checkboxes, and everyone with the same listener when is checked.
Thank you so much in advance.
//this chekbox code
{
xtype: 'checkboxfield',
label: 'Noir',
listeners: {
check: anadir(label)
}
}
//This check function code
anadir: function(label) {
console.log("Añadiendo...");
var index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
storemisOpciones.add({
option: label
});
console.log(label + " se ha marcado");
index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
console.log(storemisOpciones.getAt(index));
storemisOpciones.sync();
}
Try defining listeners as (I don't think there check event in ExtJs):
listeners: {
change: function(control) {
anadir(control);
}
}
I have a simple grid with one of the columns being a 'download' link placed like this:
{
header: 'Config files',
width: 130,
sortable: false,
fixed: true,
renderer: function() {
return 'Download';
}
}
This is in the view. Now moving on to the controller I placed a listener on the grid to catch whenever the link is clicked:
init : function() {
this.control({
'accountFiles a[class=downloadCfg]': {
click: function () {
alert('test');
}
}
});
}
Very basic but it doesnt work. Can it be because the link is created via the 'renderer' function of the grid? Any ideas?
#Romeo
This is how you can grab whether the Download link is clicked or not:
'accountFiles': {
itemclick: function( thisView, record, item, index, e, eOpts ) {
var t = e.getTarget('.downloadCfg');
if (!Ext.isEmpty(t))
alert('Download clicked!!');
else
alert('Other item clicked!!');
}
}
Once you have identified that the Download link is clicked, you have the record containing the complete record representing the row.
I don't know how to fix this issue, but I know another solution.
Create method in GridPanel:
doDownload: function(recordId) {
var record = this.getStore().data.get(recordId);
// do something
}
Then create change renderer to:
renderer: function(value, meta, record, rowIndex, colIndex, store) {
return 'Download';
}
Action in onclick handler tries to find grid using dom classes.
accountFiles a[class=downloadCfg]
will select all descendant of accountFiles tag which have a tag. And filter them by class attribute.
It seems to me that you confused it with ComponentQuery syntax where you select by component id not by tag.
i want to change a tooltip's position to show it upon a button. I tried the method below as mentioned in ExtJs's forum. It doesn't work, i can't override the getTargetXY method, the tooltip is shown always in the same position. Do you have any solution ?
this.desktopButton = new Ext.Button({
icon: "arrow_in.png",
scope: this,
handler: this.desktopButtonHandler,
tooltip: new Ext.ToolTip({
text: 'Message',
getTargetXY: function () {
return [100, 100];
}
})
});
Ext elements can only be passed configuration options as specified in the documentation; getTargetXY is not one of those options.
If you want to override that method, you have two choices:
Override all Ext Tooltips to use your new function
Extend the existing Tooltip class to support overriding that method
I would not recommend overriding the method, as that could have other consequences. I will, however, explain how to do both.
To override the tooltip:
Ext.override(Ext.Tooltip, {
getTargetXY: function() {
return [100, 100]
}
});
To extend the tooltip:
MyToolTip = Ext.Extend(Ext.Tooltip, {
constructor: function(config) {
var config = config || {};
if (config.getTargetXY) {
this.getTargetXY = config.getTargetXY;
}
MyToolTip.superclass.constructor.call(this, config);
}
});
Note that setting 'targetXY' may prove unhelpful, as Ext JS may override this setting (depending on the view size).
Overriding the "showAt" method can prevent this:
showAt:function() {
var xy = [this.getTargetXY()[0],this.getTargetXY()[1]-this.height]
MyTooltip.superclass.showAt.call(this, xy);
}
I have a simple radio button:
new Ext.form.Radio({
id: 'ptype',
boxLabel:'Yes',
name: 'price_type',
value: 1
})
However Im having trouble adding a on click event ot it.
I usually use:
listeners: {
click: function (a,e) {
//event
}
}
As a config parameter, however it does not seem to work in this case.
Any advice appreciated, thanks.
Radio and checkboxes do not have a click event -- I believe you want the check event instead. Your listener should look like:
listeners: {
check: function (ctl, val) {
// val is the new checked boolean value
}
}
Note that the handler config is a handy shortcut for this (also available on buttons). Instead of the listeners syntax you could just do this:
handler: function(ctl, val) {
// etc
}
Try this:
new Ext.form.Radio({
id: 'ptype',
boxLabel:'Yes',
name: 'price_type',
value: 1
onClick: function(e){
.....
.....
}
})
If you're using a CheckBoxGroup, you should do something like this to make sure you are firing on the correct Radio.
listeners: {
check: function(checkbox, checked) {
if(checked) {
// do whatever.
}
}
}
I'm adding a custom context menu to a TreePanel.
This was all working when I had a separate function for the context menu, but I was having problems where the context menu items would end up doubled/tripling up if I clicked on one of the options and then viewed the context menu again.
I had a look around for other contextmenu examples and came up with this one by Aaron Conran I pretty much "stole" it wholesale with a few additions, tacking the function directly into the Ext.ext.treePanel config. This gave me an error about "oe is undefined" which seemed to refer to "contextmenu: this.onContextMenu" in the tree config.
I figured it was probably something to do with the way I was defining all of this, so I decided to look at extending Ext.ext.TreePanel with my function in it as a learning exercise as much as anything.
Unfortunately, having managed to sort out extending TreePanel I'm now back to getting "oe is undefined" when the page tries to build the TreePanel. I've had a look around and I'm not really sure whats causing the problem, so any help or suggestions would be greatly appreciated.
Here is the code that is used to define/build the tree panel. I hope its not too horrible.
siteTree = Ext.extend(Ext.tree.TreePanel,{
constructor : function(config){
siteTree.superclass.constructor.call(this, config);
},
onContextMenu: function(n,e){
if (!this.contextMenu){
console.log('treeContextMenu',n,e);
if (n.parentNode.id == 'treeroot'){
var menuitems = [{text:'Add Child',id:'child'}];
} else {
var menuitems =
[{text:'Add Child',id:'child'},
{text:'Add Above',id:'above'},
{text:'Add Below',id:'below'}];
}
this.contextMenu = new Ext.menu.Menu({
id:'treeContextMenu',
defaults :{
handler : treeContextClick,
fqResourceURL : n.id
},
items : menuitems
});
}
var xy = e.getXY();
this.contextMenu.showAt(xy);
}
});
var treePanel = new siteTree({
id: 'tree-panel',
title : 'Site Tree',
region : 'center',
height : 300,
minSize: 150,
autoScroll: true,
// tree-specific configs:
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,
dataUrl:'admin.page.getSiteTreeChildren?'+queryString,
root: {
id: 'treeroot',
nodeType: 'async',
text: 'nowt here',
draggable: false
},
listeners:{
contextmenu: this.onContextMenu
}
});
As a total aside; Is there a better way to do this in my context menu function?
if (n.parentNode.id == 'treeroot') {
Basically, if the clicked node is the top level I only want to give the user an add Child option, not add above/below.
Thanks in advance for your help
In your instantiation of your siteTree class you have:
listeners: {
contextmenu: this.onContextMenu
}
However, at the time of the instantiation this.onContextMenu is not pointing to the onContextMenu method you defined in siteTree.
One way of fixing it is to call the method from within a wrapper function:
listeners: {
contextmenu: function() {
this.onContextMenu();
}
}
Assuming you don't override the scope in the listeners config 'this' will be pointing to the siteTree instance at the time the listener is executed.
However, since you are already defining the context menu in the siteTree class, you may as well define the listener there:
constructor: function( config ) {
siteTree.superclass.constructor.call(this, config);
this.on('contextmenu', this.onContextMenu);
}
Ensuring the context menu is removed with the tree is also a good idea. This makes your siteTree definition:
var siteTree = Ext.extend(Ext.tree.TreePanel, {
constructor: function( config ) {
siteTree.superclass.constructor.call(this, config);
this.on('contextmenu', this.onContextMenu);
this.on('beforedestroy', this.onBeforeDestroy);
},
onContextMenu: function( node, event ) {
/* create and show this.contextMenu as needed */
},
onBeforeDestroy: function() {
if ( this.contextMenu ) {
this.contextMenu.destroy();
delete this.contextMenu;
}
}
});
I had this problem yesterday. The issue with the duplicate and triplicate items in the context menu is due to extjs adding multiple elements to the page with the same ID. Each time you call this.contextMenu.showAt(xy) you are adding a div with the ID 'treeContextMenu' to the page. Most browsers, IE especially, deal with this poorly. The solution is to remove the old context menu before adding the new one.
Here is an abridged version of my code:
var old = Ext.get("nodeContextMenu");
if(!Ext.isEmpty(old)) {
old.remove();
}
var menu = new Ext.menu.Menu({
id:'nodeContextMenu',
shadow:'drop',
items: [ ... ]
});
menu.showAt(e.xy);
I suggest never using hardcoded IDs. #aplumb suggests cleaning the DOM to reuse an existing ID. OK, but I suggest you cleanup the DOM when you no longer need the widgets/elements in the DOM and you should never reuse an ID.
var someId = Ext.id( null, 'myWidgetId' );
var someElement = new SuperWidget({
id: someId,
...
});
Just to add to owlness's answer
This bit here:
listeners: {
contextmenu: this.onContextMenu
}
Gets executed when the javascript file is loaded. this at that stage is most likely pointing to the window object.
A simple way to fix it is adding the listener on hide event of context menu, so you destroy him.
new Ext.menu.Menu(
{
items:[...],
listeners: { hide: function(mn){ mn.destroy(); } }
}
).show(node.ui.getAnchor());
;)