I use geoExt with ExtJs3.4 in my application!.I create a mapPanel and add openlayers map into it with below code.
var mapPanel = new GeoExt.MapPanel({
renderTo: 'gxmap',
height: 500,
width: 800,
map: map,
title: 'Map'
});
after that i create extjs toggle button
var button = new Ext.Button({
text: 'Measure Things',
enableToggle: true,
handler: function(toggled){
if (toggled) {
polygon.activate();
} else {
polygon.deactivate();
}
}
});
when i want to add this button to map panel i get topPanel of mapPanel and after that when i want to use topPanel functions these functions doesn't works!
mapPanel.getTopToolbar().addButton(button);
or below code
topToolbar = mapPanel.getTopToolbar();
topToolbar.addButton(button);
when i see chrome developer tool i see this error for addButton function or other functions of topToolbar of panel!
error:
uncaught typeError: cannot call method 'addButton' of undefined
why i can't use topToolbar functions?
Link for tutorial of geoext that use mapPanel.getTToolbar().addButton(button);
Adding Buttons to map
I had the same problem. You have to add this extra line before the mapPanel creation:
var toolbar = new Ext.Toolbar();
And inside the mapPanel add this property:
tbar: toolbar
You can add now your button to the toolbar:
mapPanel.getTopToolbar().addButton(button);
Related
Does anyone know here how to override the messagebox to put icons for the buttons? i.e: check icon for YES/OK, cross button for NO, etc.
I've tried to override the makeButton function of Ext.window.MessageBox but it doesn't seem to work and doesn't even hit the debugger:
Ext.override(Ext.window.MessageBox, {
makeButton: function (btnIdx) {
debugger;
var btnId = this.buttonIds[btnIdx];
return new Ext.button.Button({
handler: this.btnCallback,
itemId: btnId,
scope: this,
text: this.buttonText[btnId],
minWidth: 75,
iconCls: ['check', 'no', 'cancel', 'blah'][btnId]
});
}
});
As #scebotari66 have stated, Ext.Msg and Ext.MessageBox are singletons of Ext.window.MessageBox. So when you override Ext.window.MessageBox.makeButton, this will have no effect if you are using the singletons for this class.
However, there is a way to apply your overrides to Ext.window.MessageBox to the singleton. Guess how.
(drumroll)
tantantanan!
Ext.MessageBox = Ext.Msg = new Ext.window.MessageBox();
Yep, that's correct. You just need to re-assign the singleton after your override.
So:
Ext.override(Ext.window.MessageBox, {
makeButton: function (btnIdx) {
var btnId = this.buttonIds[btnIdx];
return new Ext.button.Button({
handler: this.btnCallback,
itemId: btnId,
scope: this,
text: this.buttonText[btnId],
iconCls: ['okbutton', 'yesbutton', 'closebutton', 'cancelbutton'][btnIdx],
minWidth: 75 //or you can also remove this to make the icons close to the label
});
}
});
//re-assign singleton to apply overrides
Ext.MessageBox = Ext.Msg = new Ext.window.MessageBox();
Next time you call Ext.Msg.alert(), your icons are now showing too.
I hope you find this helpful.
NOTE: The iconCls config should be in the order [ok, yes, no, cancel]
As you can see from the source code, the makeButton method is called from initComponent of Ext.window.MessageBox.
I assume that you are using the Ext.MessageBox (or Ext.Msg) singleton instance for displaying message boxes. This instance is created in the callback function immediately after the Ext.window.MessageBox is created (check the third argument from Ext.define). This also means that it happens before your override.
So you can directly override the buttons of the singleton instance like so:
Ext.Msg.msgButtons.ok.setIconCls(okBtnCls);
Ext.Msg.msgButtons.yes.setIconCls(yesBtnCls);
Ext.Msg.msgButtons.no.setIconCls(noBtnCls);
Ext.Msg.msgButtons.cancel.setIconCls(cancelBtnCls);
You can also rely on your makeButton override if you will show message boxes by creating a new instance of the class:
var myMsg = Ext.create('Ext.window.MessageBox', {
closeAction: 'destroy'
}).show({
title: 'Custom MessageBox Instance',
message: 'I can exist along with Ext.Msg'
});
I use extjs 3.4.0 and i have a problem with the buttons in the method deactivate.
I create the menu with GeoExt which i put the buttons.
var mapPanel = new GeoExt.MapPanel({
border: true,
region: "center",
// we do not want all overlays, to try the OverlayLayerContainer
map: mapa,
tbar: toolbar,
zoom: 3
});
In this example I put just 2 buttons, the fist is to move and de last is for calculate length. The controls for calculate length is working correctly.
var toggleGroup = "measure controls";
var buttonMover = new Ext.Button({
iconCls: 'mover',
cls: 'margenBoton',
enableToggle: true,
toggleGroup: toggleGroup
});
this is the button for length.
var buttonLong = new Ext.Button({
iconCls: 'regla',
cls: 'margenBoton',
enableToggle: true,
toggleGroup: toggleGroup,
handler: function (toggled){
if (toggled) {
longitud.activate();
} else {
longitud.deactivate();
}
}
});
here I incorporate my buttons in the panel.
mapPanel.getTopToolbar().addButton(buttonMover);
mapPanel.getTopToolbar().addButton(buttonLong);
The problem is when I choose the length button, I calculate length correctly but I want choose another button or I deactivate this button it doesn't deactivate.
When the user clicks on this element, I want it to show an alert.
However, when I click on the DIV that this Panel generates, nothing happens.
How can I make an alert execute when the user clicks on the following panel?
var content = new Ext.Panel({
region:'center',
margins:'5 0 5 5',
cls:'empty',
bodyStyle:'background:ivory; font-size: 13pt',
html:'<p id="test123">This is where the content goes for each selection.</p>',
click: function() {
alert('was clicked');
}
});
You haven't accepted an answer, so I'll assume you're still unclear on this. Here are a few pointers...
First, as coded your Panel will render as a plain square. If you're expecting it to look like a Panel, you should give it a title (so the title bar will render).
Second, as mentioned, click is not a Panel event (it's an Element event). So you have several ways of getting to the behavior you want. You can manually attach a listener to the underlying DOM element after the Panel is rendered:
Ext.get('txest123').on('click', function(){
alert('foo');
});
You could also do as I mentioned in the comments of another answer to generically handle any body click:
// .body is a Panel property for the body element
content.body.on('click', function(){
alert('foo');
});
If you really want to restrict the click to only the child p you could add a check:
// e is the event object, t is the target DOM node
content.body.on('click', function(e,t){
if(t.id == 'txest123'){
alert('clicked the p');
}
});
If I was coding this, I'd probably do something more like this:
var content = new Ext.Panel({
region:'center',
renderTo: document.body,
margins:'5 0 5 5',
cls:'empty',
title: 'My Panel',
id: 'txest123',
bodyStyle:'background:ivory; font-size: 13pt',
html:'This is where the content goes for each selection.',
listeners: {
'render': {
fn: function() {
this.body.on('click', this.handleClick, this);
},
scope: content,
single: true
}
},
handleClick: function(e, t){
alert(this.id); // the panel
alert(t.innerHTML); // the clicked el
}
});
Now the id is on the Panel (where it should be) and you can use Panel and/or Element methods to access child elements as needed. It's best to keep id's at the highest level possible. You'll notice too that the callback function is executed in the scope of the Panel (scope:this) so that inside handleClick you can treat this as the Panel itself and access any of its properties or methods.
So, without knowing exactly what you're trying to achieve, I can't provide you with the exact code you need. However, this should hopefully give you some ideas.
EDIT: I meant to say this originally... in your code (as posted) you are not actually rendering the Panel. As I mentioned in my answer to your related question, if you are adding the Panel as an item to a container that is lazy-rendered, the Panel's DOM won't be available for selection until after the container has rendered it. In my code above I added renderTo so that I don't have this issue, but if you're not doing that you'll have to wait until the Panel is rendered at some time later to access it.
The Panel Component does not expose a click event, so the one you're passing into the config never gets fired.
Try putting an id on your Ext.Panel object and then getting its element using Ext.get(). Then add a click event through on():
var content = new Ext.Panel({
id: 'myPanel',
region:'center',
margins:'5 0 5 5',
cls:'empty',
bodyStyle:'background:ivory; font-size: 13pt',
html:'<p id="txest123">This is where the content goes for each selection.</p>'
});
Ext.get('myPanel').on('click', function() {alert('You clicked me');});
The following sample is a bit rough but it works for me. It is a panel with a box component, which is showing a thumbnail. When clicking on the thumbnail, it is showing a lightbox with slimbox2. Not pretty, but very effective. The hardcoded images are just for test here.
var panel = new Ext.Panel({
title : 'Image',
header : false,
frame : true,
border : false,
bodyStyle : 'padding : 5px',
width : 125,
items : [{
xtype : 'box',
height : 115,
width : 115,
listeners : {
'render': function() {
var id = Ext.id(this);
Ext.fly(id).addListener('click', function () {
jQuery.slimbox('thisisnotanimage', 'CBX');
});
}
},
autoEl: {
tag : 'div',
html : 'somehtmltagstuff'
}
}
]
});
According to the API, click is not a valid event for Panels... However, you should still be able to add the click event to the underlying DIV element.
Ext.fly(e.id).addListener('click', Ext.getCmp(e.id) , this);
I believe you need something like:
var content = new Ext.Panel({
region:'center',
margins:'5 0 5 5',
cls:'empty',
bodyStyle:'background:ivory; font-size: 13pt',
html:'<p id="test123">This is where the content goes for each selection.</p>',
listeners: {
click: function() {
alert('was clicked');
}
}
});
I have a regionContent panel which I add to my viewport.
How can I replace its content with new content?
...
var regionContent = new Ext.Panel({
id: 'contentArea',
region: 'center',
padding:'10',
autoScroll: true,
html: 'this is the original content'
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [ regionMenu, regionContent ]
});
var newPanel = new Ext.Panel({
region: 'east',
title: 'Info Panel',
width: 300,
html: 'this is a panel that is added'
});
// regionContent.update(newPanel); //renders as javascript code ???
// regionContent.remove(...) //how do I remove ALL CONTENT, I will not know what is in this panel to remove it specifically
regionContent.add(newPanel); //adds to original content but does not replace it
regionContent.doLayout();
...
.update() does this:
.add() does this:
You'll want to use a panel with card layout:
var card=new Ext.Panel({
layout:'card',
activeItem:0,
items:[ regionContent , newPanel ]
});
That panel can then go inside your viewport. To switch between them you'll use something like this:
card.getLayout().setActiveItem(1);
Take a look at the two card layouts for working examples:
http://dev.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html
You cannot remove the HTML using .remove(), because it's not considered an item of a panel. So you need to use .update() to get rid of that HTML, and then add your new panel.
// clear the html by replacing it with an empty string.
// calling update with no arguments would work as well.
regionContent.update('');
// add the new component
regionContent.add(newPanel);
// redraw the containing panel
regionContent.doLayout();
From your screenshot, it looks like you may have used .update() by passing in the new panel, e.g., .update(newPanel). That method is used to update HTML, not replace components. To go the opposite way:
regionContent.removeAll(); // if you want to remove all the items
regionContent.update('this is the original content');
regionContent.doLayout();
Did you really use the solution you posted to solve this exact problem? For me clearExtjsComponent() leaves the HTML string "This is the original content" behind, just like in your screenshot.
Ext.getCmp('content-panel').body.update(record.get('id'));
This will really work
Here's how I solved this:
function clearExtjsComponent(cmp) {
var f;
while(f = cmp.items.first()){
cmp.remove(f, true);
}
}
then when I want to replace the content of a panel with new content, I use this:
function replaceComponentContent(cmpParent, cmpContent) {
clearExtjsComponent(cmpParent);
cmpParent.add(cmpContent);
cmpParent.doLayout();
}
For some reason Ext.Panel.getTopToolbar() is returning an array of objects (the elements of the toolbar, but NOT the toolbar itself) and not an Ext.Toolbar. Because of that, I can't manage to hide an already set toolbar. How should I proceed?
Sample code:
function (panel)
{
alert(panel.getTopToolbar()); // displays the list of elements in the toolbar
panel.getTopToolbar().hide(); // error: "hide" is not a function
}
It should work, so it sounds like maybe you used topToolbar as a config instead of using tbar as the config? If you set a tbar config it gets instantiated and saved as topToolbar which is the Ext.Toolbar instance exposed by getTopToolbar(). If you overwrote topToolbar directly you might see this issue.
You might find this block of code in Panel.onRender (you'll have to include that file directly) and set a breakpoint in Firebug to see what's happening:
if(this.tbar && this.topToolbar){
if(this.topToolbar instanceof Array){
this.topToolbar = new Ext.Toolbar(this.topToolbar);
}
this.topToolbar.render(this.tbar);
}
panel.getTopToolbar().setVisible(false);
In 4.2.1 what works for me is:
var topToolbar = Ext.create('Ext.toolbar.Toolbar', {
dock: 'top',
width: 'auto',
id: 'mytoolbar',
hidden: true,
items: [...]
});
var p = Ext.create('App.view.MyCustomPanel', {
html: 'test',
});
if (userCanSeeToolbar) {
p.addDocked(topToolbar);
}
Then dynamically I can show/hide the top toolbar:
/* if (userCanSeeToolbar) { */
p.getDockedComponent('mytoolbar').show();
p.getDockedComponent('mytoolbar').hide();