I have a toggle button:
var button = new Ext.Button({
tooltip: "Интенсивность",
iconCls: "gxp-icon-intensity",
enableToggle:true,
toggleHandler: function (button, state) {
if(state){
alert(state)
map.getLayersByName("Интенсивность")[0].setVisibility(true);
intWin.show();
}else{
map.getLayersByName("Интенсивность")[0].setVisibility(false);
alert(intWin.collapsed);
//intWin.close();
}
}
});
And when the button is toggled I show a window:
var intWin = new Ext.Window({
id: 'intWin',
layout: 'fit',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
When I close my window, then the button un-toggles. But when I click it again I don't get a window. Firebug shows this error:
TypeError: b.dom is undefined
...String(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(b);g.params...
What can be wrong here?
UPDATE
Okey,my bad. I tried to show a destroyed element.
But in this case:
1 When I close the window and is destroyed, any forms in this window will be destroyed too?
2 How can I check that the window is destroyed?
UPDATE2
Now I try this function for creating the window:
function intWinCreate(){
var intWin = new Ext.Window({
id: 'intWin',
layout: 'fit',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
};
and in the button handler:
intWinCreate();
intWin.show();
But I get an error:
ReferenceError: intWin is not defined
If I put intWin.show(); into the function then that window shows.
What can be wrong?
When an element is destroyed everything within it also is destroyed.
In your case you change the default behaviour of close action to hide by setting the property closeAction: 'hide' it will cause the window to hide instead of getting destroyed.
Ex:
var intWin = new Ext.Window({
id: 'intWin',
layout: 'fit',
closeAction: 'hide',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
Update:
It is because intWin is a local variable in the method intWinCreate. What you can do is to return the window from the method and call show on it.
function intWinCreate(){
return new Ext.Window({
id: 'intWin',
layout: 'fit',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
};
Then
intWinCreate().show()
Yes, form usually is destroyed too
You can check, for example, intWin.body - if it is null - window is destroyed
UPDATE
As i see you have one answear already but I have another one for you too ;)
As long as you set
id: 'intWin'
You can access this window from anywhere using
Ext.getCmp()
so you can show it with this:
Ext.getCmp('intWin').show()
Related
I am a new in extjs and I prepared one login form.
I used that form into the Ext.window.Window but when it display on browser its showing separately
var win = new Ext.window.Window({
renderTo: Ext.get('main'),
items: form,
});
win.show();
Try this:
var win = new Ext.window.Window({
renderTo: Ext.getBody(),
items: form,
});
win.show();
how can I expand an ExtJS (version 3.3.1) Component, e.g. a Ext.Panel nested somewhere in the document hierarchy to "fullscreen" so that it takes up the whole browser window region? I guess I need to create an Ext.Viewport dynamically and reparent the component being "expanded", but I've had no success so far. Could someone provide a working sample?
Also, I'd like to be able to restore the component to its original place at some point later, if that's at all possible.
I tried the following:
new Ext.Button({ text: 'Fullscreen', renderTo : Ext.getBody(), onClick: function(){
var viewPort = new Ext.Viewport({
renderTo: Ext.getBody(),
layout: "fit",
items: [ panelToBeExpanded ]
});
viewPort.doLayout();
}});
which does not work very well. Upon clicking the button, the panel panelToBeExpanded seems to take up the viewport region, but only if there is no HTML in the BODY section, otherwise viewport is not fully expanded. Also, working with the reparented panel afterwards causes weird flicker in most browsers.
Is there a reliable way to universally (ideally temporarily) expand a component to the whole browser window?
UPDATE
Thanks to a suggestion in the comments, creating a new maximized Ext.Window seems to be a good solution. The second part is a bit tricky though - how to move the reparented component back to its original place in DOM (and ExtJS component hierarchy) once the window is closed?
Thanks for your help!
You could use Ext.Window.toggleMaximize method. I created a simple working example, check it out here
Pay attention that Ext.Window is maximized inside its rendering container, so if you use "renderTo" attribute and set it to some div inside your page Window will only be as big as div that contains it. That is why I used document body to render myWindow. Of course you could also use Ext.Window.x and Ext.Window.y configuration attributes to locate your window in wanted place.
This is a little late but stumbled upon this only now and remembered I had to do something similar and ended up overriding the text-area component which would automatically expand to full-screen on doubleclick by creating a copy of the component in a full-size window. On closing the values are automatically updated in the instantiating component which was hidden behind the full-screen window and hence never was taken out of the dom in the first place.
Here's my code I think it's fairly self-explanatory.
Hope it helps someone!
Rob.
/**
* Override for default Ext.form.TextArea. Growing to near full-screen/full-window on double-click.
*
* #author Rob Schmuecker (Ext forum name rob1308)
* #date September 13, 2010
*
* Makes all text areas enlargable by default on double-click - to prevent this behaviour set "popout:false" in the config
* By default the fieldLabel of the enhanced field is the fieldLabel of the popout - this can be set separately with "popoutLabel:'some string'" this will also inherit the same labelSeparator config value as that of the enhanced parent.
* The close text for the button defaults to "Close" but can be overriden by setting the "popoutClose:'some other text'" config
*/
Ext.override(Ext.form.TextArea, {
popout: true,
onRender: function(ct, position) {
if (!this.el) {
this.defaultAutoCreate = {
tag: "textarea",
style: "width:100px;height:60px;",
autocomplete: "off"
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
if (this.grow) {
this.textSizeEl = Ext.DomHelper.append(document.body, {
tag: "pre",
cls: "x-form-grow-sizer"
});
if (this.preventScrollbars) {
this.el.setStyle("overflow", "hidden");
}
this.el.setHeight(this.growMin);
}
if (this.popout && !this.readOnly) {
if (!this.popoutLabel) {
this.popoutLabel = this.fieldLabel;
}
this.popoutClose = 'Close';
var field = this;
this.getEl().on('dblclick',
function() {
field.popoutTextArea(this.id);
});
};
},
popoutTextArea: function(elId) {
var field = this;
tBox = new Ext.form.TextArea({
popout: false,
anchor: '100% 100%',
labelStyle: 'font-weight:bold; font-size:14px;',
value: Ext.getCmp(elId).getValue(),
fieldLabel: field.popoutLabel,
labelSeparator: field.labelSeparator
});
viewSize = Ext.getBody().getViewSize();
textAreaWin = new Ext.Window({
width: viewSize.width - 50,
height: viewSize.height - 50,
closable: false,
draggable: false,
border: false,
bodyStyle: 'background-color:#badffd;',
//bodyBorder:false,
modal: true,
layout: 'form',
// explicitly set layout manager: override the default (layout:'auto')
labelAlign: 'top',
items: [tBox],
buttons: [{
text: field.popoutClose,
handler: function() {
Ext.getCmp(elId).setValue(tBox.getValue());
textAreaWin.hide(Ext.getCmp(elId).getEl(),
function(win) {
win.close();
});
}
}]
}).show(Ext.getCmp(elId).getEl());
}
});
i'm facing a small problem in parsing the data to the panel, here is my code:
Ext.onReady(function(){
var stockings = [],i=0;
Ext.regModel('Carding', {fields: ['price'] });
var Detailsstore = new Ext.data.Store({
model: 'Carding',
proxy: {
type: 'ajax',
url: 'http://192.168.1.92/testapp/websample%20backup/sample/assets/www/XMLS/xmlformatses.xml',
reader: {
type: 'xml',
record: 'root'
}
},
listeners: {
single: true,
datachanged: function(){
Detailsstore.each(function(r){
stockings[i++]=r.get('price');
});
alert(stockings[3]);//This alert works fine
}
}
});
Detailsstore.read();
alert(stockings[3]);//this alert even being placed after the Detailsstore it shows undefined . . . . .
var showdetails = new Ext.Panel({
scroll :'vertical',
flex:7,
renderTo: 'bubbleCt',
baseCls: 'kiran',
stretchX: true,
html: '<span style="color:#fff; font-size:20px;"><span style="font-size:25px; font-weight: bold;">' + stockings[2] + '</span><br/><br/><span style="font-weight:bold;">Trading Action Plan :</span><br/>• Buy Price: 1 <br/>• Sell Price:2<br/>• Stop Price 80 cents<br/>• Rule: Sell 50% on double <br/>• 6% Trailing Stop Loss on stock<br/><br/><span style="font-weight:bold;">Volatility Analysis:</span><br/>• <br/>• <br/>• <br/><br/><span style="font-weight:bold;">Techincal Analysis:</span><br/>• <br/>• <br/>• <br/><br/><span style="font-weight:bold;">Fundamental Analysis:</span><br/>• <br/>• <br/>• <br/></span>',
});
var detailspanel = new Ext.Panel({
fullscreen: true,
padding:1,
layout: {
type: 'vbox',
pack: 'center',
align: 'stretch'
},
items: [showdetails]
});
});
The problem above is that wen i try to run the code first the second alert is taking place and showing the undefined.........
my goal is to parse the data and show it into the panel .
But i think the problem is that the panel is being displayed even before the the store completes it's operation
the first alert is working fine and displaying the value in it but that operation is happening after the panel is displayed already
please help
Thank you . . . ..
Your Ext.data.Store is being loaded up by an asynchronous request to your server. It doesn't block the execution of JavaScript, so it makes the request, but doesn't wait for the data to get back before continuing on to the rest of your script (i.e. the alert, your panel, etc).
When the store loads, it will fire the event 'load'. When you get this event, THAT's when you want to make your panels, etc.
Detailsstore.on('load', function() {
// do everything here.
// var showdetails = new Ext.Panel({ ...
// var detailspanel = new Ext.Panel({ ...
});
Detailsstore.read(); // <-- fire off the request for data AFTER you set up your 'load' handler
an ext store fires a 'load' event when its data has loaded.
add a load listener to your store and display your data once the load event fires.
http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.Store
You should check out using templates if you want to bind a data store or a model instance to a panel - that way you don't have to detect the datachanged and just use .update() on the component.
Also: stores have an autoLoad flag that will avoid you having to do the read() explicitly.
I have an Accordion in ExtJS and I want to add new Panels to it dynamically.
The Panels need to be collapsed when they appear.
The code that I have now will create the Panels, but the HTML in each panel won't show.
var loadoutput = new Ext.Panel({
title: 'Log',
renderTo: 'logout',
layout: 'accordion',
defaults: {
bodyStyle: 'padding:10px',
collapsed: true
},
layoutConfig: {
fill: true,
animate: true
}
});
function logOutput(_title, _html) {
temp = new Ext.Panel();
temp.title = _title;
temp.html = _html;
temp.collapsed = true;
loadoutput.items.add(temp);
loadoutput.doLayout();
}
logOutput("Well, that was interesting", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");
logOutput("Hello", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");
logOutput("What?", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");
logOutput("Cat", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");
I think the problem is that you are using the "items" add method (it's a Ext.util.MixedCollection) instead of the Ext.Panel add method.
Try this:
loadoutput.add(temp);
So, this code works above. items.add or add both work. One issue is boxMinHeight. Need to set it manually I guess.
I have created a Ext.Panel object, it rendered properly to specified div element on my page.
I want to replace the panel object underlying element(previously rendered div element) to another div which will be identified dynamically.
Here I don't want to create the Panel object once again by specifying identified div element, I need to make use of existing panel object and need to show the panel in the place where the identified div exists.
Can any one helps me regarding this.
Thanks
Venkat
If you create your panel as a custom extension, with it's own namespace:
Ext.namespace('My.Panel');
My.Panel.SomePanel = Ext.extends(Ext.Panel,{
// Your custom panel configuration here
itemId:'myPanel'
});
Ext.reg('mypanel',My.Panel.SomePanel);
Then you can create your panel whenever it might be needed, even referencing it by the xtype you've registered:
var myWin = new Ext.Window({
title:'Some Title',
height: 300,
width: 300,
items:[{
xtype: 'mypanel',
data: someData
}]
});
var myTabs = new Ext.TabPanel({
title: 'Some Tab Panel',
activeTab: 0,
items:[{
xtype: 'mypanel',
title: 'SomePanel number 1'
}]
});