I'm trying to create a mini browser inside a window using extJS.
Here's what i have so far :
panelContent = new Ext.Panel({
region: 'center',
margins: '0 0 0 0',
autoScroll: true,
html: '<iframe style="overflow:auto;width:100%;height:100%;" frameborder="0" src="http://www.google.com"></iframe>'
});
var tb = new Ext.Toolbar();
var combo = new Ext.form.ComboBox({
width:435,
});
tb.addField(combo);
tb.doLayout();
browser = new Ext.Window({
title: 'Internet Browser',
tbar: tb,
closable: true,
closeAction: 'hide',
width: 600,
height: 600,
border:false,
plain: true,
layout: 'border',
items: [panelContent],
});
I'm trying to get the iframe load the content of what's typed inside the combobox, but i can't find out how to 'tell' him to load a page, and i could not even 'get' when the user hits 'enter'. Maybe replacing the combobox by inputbox ? don't know how to do this (starting with extjs).
Thank you for your help.
You can try this:
Ext.IframeWindow = Ext.extend(Ext.Window, {
onRender: function() {
this.bodyCfg = {
tag: 'iframe',
src: this.src,
cls: this.bodyCls,
style: {
border: '0px none'
}
};
Ext.IframeWindow.superclass.onRender.apply(this, arguments);
}
});
var w = new Ext.IframeWindow({
id:id,
width:640,
height:480,
title:"Knowledge Control Solutions Iframe Window Sample",
src:"http://www.google.es"
})
w.show();
Regards
If you're serious about working with iframes in Ext JS you really should be using the ManagedIFrame user extension. Working with a raw iframe within Ext (especially inside layouts) is not the easiest thing to try and do from scratch.
Related
Displaying image in a window sounds a simple task but i have problem with it.
I want to show my image (with variable size) to show in a window (or panel) with size 300*400. Then, by clicking on image or maximizing window, user sees image in its original size.
Following code works for stretching image to 300*400 thumbnail in initial view, but when maximizing it also stretches to full screen.
var myImage = Ext.create('Ext.Img', {
src: imgSrc,
});
picWin = Ext.create('Ext.window.Window', {
title: "My Picture",
width: 300,
height: 400,
maximizable: true,
maxWidth: myImage.getWidth(),
maxHeight: myImage.getHeight(),
layout: "fit",
items: [myImage]
})
picWin.show();
Take a look at my example: https://fiddle.sencha.com/#view/editor&fiddle/26eo
Seems to work. I removed the set max width and height.
Finally, i came to a solution like this. First we need to use card layout. Then we define two containers for specified image, one for initial view and one for maximized view. At last, we need to change these cards when window is maximized and when restored.
Code is as follows:
// Two image for when maximizing and when in initial view
var myImage = Ext.create('Ext.container.Container', {
layout: 'fit',
items: [{
xtype: 'image',
src: imgSrc
}]
});
var myImage2 = Ext.create('Ext.container.Container', {
scrollable: true,
items: [{
xtype: 'image',
src: imgSrc
}]
});
picWin = Ext.create('Ext.window.Window', {
title: "my title",
width: 300,
height: 400,
maximizable: true,
layout: "card",
activeItem: 0,
items: [myImage,myImage2],
listeners: {
maximize: function(){
this.setActiveItem(1);
},
restore: function(){
this.setActiveItem(0);
},
}
})
picWin.show();
What if we changed the layout from 'fit' to 'hbox' instead? This seems to give you what you want - when the window is maximised, the image does not stretch. Center and vbox also seemed to work, so there are probably a few layouts you could use to make it work. But since you only have an image in the window, it probably doesn't matter.
picWin = Ext.create('Ext.window.Window', {
title: "My Picture",
width: 300,
height: 400,
maximizable: true,
layout: "hbox",
items: [myImage]
})
picWin.show();
}
I have:
new Ext.Panel({
title: 'Header',
hideCollapseTool: true,
collapsible: true,
collapsed: true,
renderTo: 'mywrap',
width: '100%',
height: 'auto',
...
}
How can I replace header one button the entire width/height with hover and ▲ Header ▼ instead of title?
as_is-as_to_be
If I correctly understand what you want to achieve you can do something like this:
Ext.create('Ext.panel.Panel', {
border: true,
bodyStyle: {
padding: '10px'
},
collapsible: true,
hideCollapseTool: true,
html: 'Some data',
renderTo: Ext.getBody(),
title: '▲ Header ▼',
titleAlign: 'center',
titleCollapse: true
});
Check this working fiddle.
If you still want to add button with height / width 100% you can do something like this:
var myPanel = Ext.create('Ext.panel.Panel', {
...
title: '<button id="myButton" style="...">My header button</button>'
...
});
(do not forget to remove panel header padding)
and add handler to it via ExtJS, like this
// Get Ext.dom.Element via Ext.dom.Element.get() method
Ext.get('myButton').on('click', function() {
if(myPanel.getCollapsed())
myPanel.expand();
else
myPanel.collapse();
});
or JS, like this
document.getElementById('myButton').addEventListener('click', function() {
if(myPanel.getCollapsed())
myPanel.expand();
else
myPanel.collapse();
});
Check this working fiddle.
If you want to add some buttons to your header you can also use Ext.panel.Panel.tools config.
And ofcourse you can always overrite Ext.panel.Header.
I have a panel and the layout is hbox,I have two textfileds as items of the panel.
I am not able to view the fieldLabels when i execute .Please find the code
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"HBox Panel",
layout:'hbox',
width:300,
height:200,
renderTo:document.body,
items:[
{
xtype:"textfield",
fieldLabel:"Label1"
},
{
xtype:"textfield",
fieldLabel:"Label2"
}
]
});
});
Note:I am working on Ext 3.2.1
Your layout should be form. From the api documentation:
fieldLabel config is only used when this Component is rendered by a
Container which has been configured to use the FormLayout layout
manager (e.g. Ext.form.FormPanel or specifying layout:'form').
As already said, the fieldLabel option will only apply in a form layout context (usually provided by the form panel).
As a quick fix, you can display your labels in BoxComponent:
Ext.onReady(function() {
var panel = new Ext.FormPanel({
title: "HBox Panel",
layout: 'hbox',
width: 300,
height: 200,
renderTo: document.body,
items: [{
xtype: 'box'
,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
+ 'Label 1:</label>'
,cls: 'x-form-item'
},{
xtype: "textfield"
},{
xtype: 'box'
,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
+ 'Label 2:</label>'
,cls: 'x-form-item'
},{
xtype: "textfield"
}]
});
});
Of course, it would be cleaner to create a CSS class for the custom styles, or even extend a new component from BoxComponent.
You can also generalize this logic in the parent panel's initComponent method, to create box components for the labels from the configured fieldLabel of the field (this way you could also set the for attribute of the label tag because you'll know the generated id of the field components at this time).
change the layout type to form,
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"HBox Panel",
layout:'form',
width:300,
height:200,
renderTo:document.body,
items:[
{
xtype:"textfield",
fieldLabel:"Label1"
},
{
xtype:"textfield",
fieldLabel:"Label2"
}
]
});
});
i am developing one project with ui as pure extjs. I am facing one problem i want to add my own status message to the tabpanel in extjs only. please help me.
Each Component extending Ext.Panel accepts a config option called bbar which is the bottom Ext.Toolbar. this can function as a statusbar for your TabPanel if you want to. Check the docs on Ext.Panel and Ext.Toolbar for more info.
new Ext.Panel({
title: 'Basic StatusBar',
items:[{
xtype: 'button',
text: 'a button',
}],
bbar: ['->', 'Status bar']
});
If you are looking for more functionality you could also check out the official Statusbar Extension which you can find the official ExtJS Examples on sencha.com
Can you run it from Firebug console an ExtJS included page. It is not a good way for this but, achieves your need.
// this function should be in a namespace as a method
var updateStatusMessage = function(msg){
var msgEl = document.getElementById('tabPanelStatusMessage');
if (msgEl) {
msgEl.innerHTML = msg;
}
// style rules of span should be given with a css class
return Ext.DomHelper.createDom({tag:'span', id:'tabPanelStatusMessage', style: 'position: absolute; right: 5px; top: 5px', html: msg })
}
new Ext.Window({
title: 'test window',
width: 600,
height: 400,
items: {
xtype: 'tabpanel',
activeTab: 0,
id: 'statusTabPanel',
items: [
{
title: 'test',
html: 'this is a demo tab panel item'
}
]
},
listeners: {
afterrender: function(){
Ext.select('#statusTabPanel .x-tab-strip-wrap').appendChild(updateStatusMessage('Lorem Ipsum Dolor Sit Amet'))
}
}
}).show();
// you can call updateStatusMessage function with a message to update the message
Would appreciate if somebody could help me on this.
I have a treepanel whose nodes when clicked load a tab into a tabpanel.
The tabs are loading alright, but my problem is duplication. I need to check if a tab exists before adding it to the tab panel. I cant seem to have this resolved and it is eating my brains. This is pretty simple and I have checked stackoverflow and the EXT JS Forums for solutions but they dont seem to work for me or I'm being blind.
This is my code for the tree:
var opstree = new Ext.tree.TreePanel({
renderTo: 'opstree',
border: false,
width: 250,
height: 'auto',
useArrows: false,
animate: true,
autoScroll: true,
dataUrl: 'libs/tree-data.json',
root: {
nodeType: 'async',
text: 'Tool Actions'
},
listeners: {
render: function() {
this.getRootNode().expand();
}
}
});
opstree.on('click', function(n) {
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
renderPage(n.id);
});
function renderPage(tabId) {
var TabPanel = Ext.getCmp('content-tab-panel');
var tab = TabPanel.getItem(tabId);
//Ext.MessageBox.alert('TabGet',tab);
if (tab) {
TabPanel.setActiveTab(tabId);
} else {
TabPanel.add({
title: tabId,
html: 'Tab Body ' + (tabId) + '<br/><br/>',
closable: true
}).show();
TabPanel.doLayout();
}
}
And this is the code for the tabpanel:
new Ext.TabPanel({
id: 'content-tab-panel',
region: 'center',
deferredRender: false,
enableTabScroll: true,
activeTab: 0,
items: [{
contentEl: 'about',
title: 'About the Billing Ops Application',
closable: true,
autoScroll: true,
margins: '0 0 0 0'
}, {
contentEl: 'welcomescreen',
title: 'PBRT Application Home',
closable: false,
autoScroll: true,
margins: '0 0 0 0'
}]
});
Can somebody please help?
The key to doing this is to build a consistent naming convention for your tabs, so you can reliably know if that tab has been added yet. It looks like you've chosen to use the node's id - which is fine. When you call TabPanel.add, send the node's id as the new tab's id. Then you can test to see if it exists with TabPanel.findById.
Note: some of your variable names are pretty confusing. TabPanel is a poor choice for a variable name, keep them beginning with lower case and never name them after the framework classes. Try tabs or tp. Also, the naming convention will be clearer if you prefix the node id with a string like tab-. Adding a new tab could also be encapsulated into a custom method on your tab panel, if you extend it.
There has been some modifications on the Extjs API .findById() doesn't work, to implement this in ExtJs 4.0 try this
function AddTabs(tabTitle,yourTabId){
var YourTabPanel = Ext.getCmp('YourTabPanelId');
var TabToCheck = YourTabPanel.getChildByElement(yourTabId);
if(TabToCheck){
YourTabPanel.setActiveTab(yourTabId);
} else {
YourTabPanel .add({
title:tabTitle,
id:nId,
closable:true,
autoScroll:true,
layout: 'fit',
}).show();
}
YourTabPanel.doLayout();
}
function addNewTab(nName,nId){
//nName is Node Name and nId is node Id
//Ext.Msg.alert('message',nId);
var tp = Ext.getCmp('content-tab-panel');//Tab Panel Id
var checkTab=tp.findById(nId);
if(checkTab){
tp.setActiveTab(nId);
} else {
tp.add({
title:nName,
id:nId,
closable:true,
autoScroll:true
}).show();
}
}
You should replace the function renderPage(tabId) with the following:
function renderPage(tabId) {
var TabPanel = Ext.getCmp('content-tab-panel');
var tab = TabPanel.getItem(tabId);
//Ext.MessageBox.alert('TabGet',tab);
if(tab){
TabPanel.setActiveTab(tabId);
}
else{
TabPanel.add({
title: tabId,
html: 'Tab Body ' + (tabId) + '
',
id: tabId,**// this line very important, without this its not working**
closable:true
}).show();
TabPanel.doLayout();
}
}
Untested, but I think this would work.
if (!Ext.getCmp('content-tab-panel')) {
Tabpanel.add({ config }).show();
Tabpanel.doLayout();
}