I am creating layout with ExtJs components and need to add widgets dynamically at run time. The code adds three containers to viewport, top, left and center tab panel. The tab panel further contains two tabs (Ex.panel.Panel) and the second tab contains an html Editor.
Code:
Ext.onReady(function () {
var vp = Ext.create("Ext.container.Viewport", {
layout: 'border'
});
var top = Ext.create("Ext.container.Container", {
renderTo: 'top',
height: 70,
region: 'north'
});
var left = Ext.create("Ext.panel.Panel", {
renderTo: 'left',
title: 'Menu',
split: true,
collapsible: true,
width: 270,
region: 'west'
});
var center = Ext.create("Ext.tab.Panel", {
renderTo: 'center',
region: 'center',
});
vp.add(top);
vp.add(left);
vp.add(center);
var tab1 = Ext.create("Ext.panel.Panel", {
renderTo: "tab1",
layout: "fit",
title: "Tab-1"
});
var tab2 = Ext.create("Ext.panel.Panel", {
renderTo: "tab2",
layout: "fit",
title: "Tab-2: Editor"
});
center.add(tab1);
center.add(tab2);
var editor = Ext.create("Ext.form.HtmlEditor", {
renderTo: "editor"
});
tab2.add(editor);
//center.doLayout();
});
The problem is that the editor is not displayed within second tab instead it displays on top. However when I click on second tab then it automatically corrects the layout and display html editor at correct position. But still the html editor does not allow to type.
Furthermore, I have observed that the documentation does not include examples of creating layout at run time, all examples demonstrate design time creation of layouts.
I also tried TabPanel.doLayout() method after adding tabs and html editor but still it does not correct the display issue. Please share if there is any idea on how to add components dynamically in ExtJs.
JS Fiddle
http://jsfiddle.net/uZGxS/
I have found the solution to the tab issues. While adding new tab to tab panel if we set it active then the child components will render correctly. In this case now the html editor layout renders and displays at correct position.
center.add(tab1);
center.setActiveTab(tab1);
center.add(tab2);
center.setActiveTab(tab2);
JSFIDDLE:
http://jsfiddle.net/uZGxS/1/
Related
I have prepared a Sencha-Fiddle example for my problem, which can be stated as follows:
(1) Why is the Ext.ux.IFrame named panel_iframe not showing ASDFG which is inside the passed html config <html><body>ASDFG</body></html>?
The Sencha docs on Ext.ux.IFrame tell me, that such a property exsists. I need to assemble the html dynamically so going with the src config is no option for me, since the client is not allowed to change files on the server.
Just in case the Fiddle is not working:
Ext.application({
name : 'myfiddleexample',
launch : function() {
var panel_iframe = Ext.create('Ext.ux.IFrame', {
//src: 'some/path/some/file.html' /*i know this works*/
html: '<html><body>ASDFG</body></html>' /*why does this not work?*/
});
var panel = Ext.create('Ext.panel.Panel', {
frame:true,
title: 'panel_5',
padding: '1 1 1 1',
margin: '1 1 1 1',
layout: 'fit',
//html: '<html><body>ASDFG</body></html>' /*i know this works, too*/
items: [panel_iframe]
});
var vp = new Ext.Viewport({
layout: 'fit',
items: [panel],
autoScroll: true,
renderTo : Ext.getBody()
});
}
});
Another question (2):
I wanted to use the IFrame named panel_iframe in order to put some vis.js graph network visualisations in it.`
Is there an alternative approach to this?
Yet another question (3):
Has someone combined ExtJs with vis.js and can provide a SenchaFiddle, which inits a simple graph inside a Ext.ux.IFrame or any other Ext.Component like for example Ext.panel.Panel?
I have a scenario where I am having my header created using jQuery & that header is being loaded in ExtJS. For the same I am using the below code.
var panel = new Ext.Panel({
autoHeight : true,
html : <Some HTML code containing jquery scripts>
});
But for some unknown reasons my header scripts are not working.
Only HTML is being rendered. Also there is no error long on console.
Any suggestions will be quite helpful.
Try this:
var panel = new Ext.Panel({
autoHeight : true,
html : function(){
return <Some HTML code containing jquery scripts>
}()
});
or
panel.update = <Some HTML code containing jquery scripts>;
See this example
You can add listener as follows and use what ever js or jquery you want,
see example
Ext.onReady(function(){
new Ext.Panel({
renderTo: Ext.getBody(),
frame: true,
title: 'Test panel',
height: 250,
listeners: {
render: function(){
// this.body.dom is the raw dom object of the body element of this panel
// render your plot to this.body.dom
//write js / jquery
console.log(this.body.dom)
this.body.update('This is the new content');
}
}
});
});
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 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'
}]
});