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
Related
I want to add Ext.button.Split into panel's header instead of title. It must be something like switcher of a panel's content and title of the same panel together.
Is there any option in extjs 4 to do that? Or is there better solution instead of Split button? Unfortunately, switcher in panel header is the key requirement, so it must be placed there.
Below works for me ExtJs 4.2.2
{
xtype: 'panel',
......
header: {
titlePosition: 0,
items: [
{
xtype: 'splitbutton',
}
]
}
}
Add the header object to your panel with your tools and add items for buttons.
Ext.create('Ext.panel.Panel', {
width: 300,
height: 200,
renderTo: Ext.getBody(),
header: {
// if you want your button positioned on the right hand side add
// titlePosition: 0,
items: [{
xtype: 'splitbutton',
text: 'test'
}]
}
});
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 have the working code here:
var panel = Ext.create('Ext.tab.Panel', {
width: 500,
height: 300,
activeTab: 1, //sets active tab (2nd)
title: 'Specific Data',
floating: true, // make this panel an absolutely-positioned floating component
items: [{
title: 'Tab 1',
html: 'data data data'
}, {
title: 'Tab 2',
html: 'different data'
}]
});
I'm trying to add a toolbar (or buttons, not sure which I should use) to add a simple 'close window' command. Any help?
Here's an example of adding a close button to the panel header. You can use the tools config property. The Ext docs for this explain the many options.
There's also a fiddle saved here: http://jsfiddle.net/cfarmerga/JVMUG/1/
var panel = Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
activeTab: 1, //sets active tab (2nd)
title: 'Specific Data',
floating: true, // make this panel an absolutely-positioned floating component
items: [{
title: 'Tab 1',
html: 'data data data',
// to enable closing of a tab
closable: true
}, {
title: 'Tab 2',
html: 'different data'
}],
tools: [
{ type: 'close', handler: function () { this.up('panel').close() } }
]
});
Have you explored the docs at all? This is very common functionality that you should be able to find very easily in Sencha's API docs. See here for this particular issue: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-tbar
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();
}
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.