Let's say I have a JS in one file that creates a Viewport:
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'center'
},
...
]
});
Now let's say I have another JS file that loads subsequently with this component definition:
{
contentEl: 'content',
height: '100%'
}
How do I add that component with contentEl: 'content' to the 'center' region?
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'center',
id:'centerViewPortId'
}
]
});
//your second javascript file
Ext.onReady(function(){
var contentEl = Ext.create('Ext.Component', {
contentEl: 'content',
renderTo: Ext.getBody()
});
viewPort.getComponent('centerViewPortId').add(contentEl);
});
var viewpoert = Ext.create('Ext.container.Viewport', {
layout: 'border'
});
anoter file;
var contentEl = Ext.Create('Ext.Something.What.You.Want', {
region: "center"
});
finally:
viewport.add(contentEl);
This link still came up top of the search results for Google, so I thought I'd add another neat solution:
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border'
});
//your second javascript file
Ext.onReady(function(){
var contentEl = Ext.create('Ext.Component', {
contentEl: 'content',
region: 'center',
renderTo: Ext.getBody()
});
viewPort.add(contentEl);
});
Related
I'm dealing with a panel that have several windows inside it.
Is there a way for the windows to not overlap each other when they are re-positioned by the user?
What class/es should I work on?
Here is a very discrete sample to work on. http://jsfiddle.net/jopantorilla/XFC6P/1/
Ext.onReady(function () {
var window1, window2;
var parentWindow = Ext.create('Ext.window.Window', {
title: 'Parent Window',
layout: 'fit',
width: 500,
height: 450,
items: [
window1 = Ext.create('Ext.window.Window', {
title: 'Window 1',
id: 'window1',
width: 150,
height: 150,
x: 50,
y: 100,
constrain: true
}),
window2 = Ext.create('Ext.window.Window', {
title: 'Window 2',
id: 'window2',
width: 150,
height: 150,
x: 300,
y: 100,
constrain: true
})]
}).show();
window1.show();
window2.show();
});
Use the WindowManager to control the behavior of the overlap.
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.WindowManager
This my TabPanel code:
inside the code there is two tabs (tab1 and tab2) in the TabPanel (tabs_panel)
MyTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
height: 210,
resizeTabs: true,
tabWidth: 266,
id: 'tabs_panel',
initComponent: function () {
this.items = [{
xtype: 'panel',
title: 'Project',
padding: 20,
height: 150,
id: 'tab1'
}, {
xtype: 'panel',
title: 'Service',
height: 150,
padding: 20,
id: 'tab2'
}]
}
});
I'm trying to hide tab2 using bellow code but this bellow code
var tabPanel = Ext.getCmp('tabs_panel');
var tabToHide = Ext.getCmp('tab2');
tabPanel.hideTabStripItem(tabToHide);
but somehow this above code does not work for me. How can I fix the problem?
You have two possibilities:
var tabPanel = Ext.getCmp('tabs_panel');
tabPanel.hideTabStripItem("tab2"); // with tab id
or
var tabPanel = Ext.getCmp('tabs_panel');
tabPanel.hideTabStripItem(1); // with tab index
try this one
Ext.getCmp("tab").child('#id').tab.hide()
In Extjs 4.1.1a, I am trying to create a table like structure using containers or panels which completely stretches horizontally and vertically to its parent component.
Here is the Example Fiddle
In View:
Ext.define("MyApp.view.Main", {
extend: 'Ext.panel.Panel',
layout: {type: 'vbox',align:'stretch'},
title: 'hello',
id: 'mainContainer'
})
In Controller:
var items = [];
for(var i=0;i<6;i++){
var vContainer = [];
var hContainer = [];
for(var j=0;j<7;j++){
hContainer.push({
xtype: 'panel',
flex:1,
})
}
vContainer.push({
xtype:'panel',
flex: 1,
layout: {type:'hbox',align:'stretch'},
items: hContainer
})
}
var mainController = Ext.getCmp('mainController'); //Calling the id here
mainController.add(items); //adding the items variable which is mentioned above
I am not sure why this ain't working (not showing anything). Please assist me to solve this problem.
Fiddle
You're pushing an array into an array and passing it as items in the main panel:
Here's the fixed code:
var items = [];
for(var i=0;i<6;i++){
var vContainer; //THE PROBLEM - NO NEED FOR IT TO BE AN ARRAY
var hContainer = [];
for(var j=0;j<7;j++){
hContainer.push({
xtype: 'panel',
title : 'H',
flex:1,
});
}
vContainer = {
xtype:'panel',
flex: 1,
layout: {type:'hbox',align:'stretch'},
title : 'V',
items: hContainer
}
items.push(vContainer);
}
Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
layout: {type: 'vbox',align:'stretch'},
title: 'hello',
minHeight : 500,
minWidth : 500,
items: items
})
Edit: Was too late, leaving the example here anyway.
You're building it wrong:
/*****************************************/
var items = [];
for(var i=0;i<6;i++){
var hContainer = [];
for(var j=0;j<7;j++){
hContainer.push({
xtype: 'panel',
flex:1
});
}
items.push({
xtype:'panel',
flex: 1,
layout: {type:'hbox',align:'stretch'},
items: hContainer
});
}
/*****************************************/
Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
layout: {type: 'vbox',align:'stretch'},
title: 'hello',
height: 400,
items: items
});
Here's the fiddle: http://jsfiddle.net/johanhaest/ptZp7/
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.window.*',
'Ext.ux.GMapPanel'
]);
Ext.onReady(function() {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
var layout = Ext.create('Ext.panel.Panel', {
//renderTo: 'layout',
width: window.innerWidth,
height: window.innerHeight,
//title: 'Border Layout', //no title will be blank
layout: 'border',
items: [{
title: 'Message List',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},{
//title: 'Map',
region: 'center',
xtype: 'gmappanel',
center: {geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',marker: {title: 'Fenway Park'}}
}],
renderTo: Ext.getBody() //get the body and display Layout at there
});
myMask.hide();
});
Question
Why can't load the gmappanel?
I'm trying to show the Loading Mask, when Page complete loaded only remove the loading mask? how to do it?
region: 'center', // center region is required, no width/height specified
xtype: 'gmappanel',
id : 'mygooglemap',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
zoomLevel: 2,
gmapType: 'map',
center: {geoCodeAddr: 'Malaysia'}
Try This code workable for u or not.
I have a predefined pie chart like this:
Ext.create('Ext.chart.Chart', {
width : 450,
height : 300,
animate : true,
store : store,
theme : 'Base:gradients',
series : [{
type : 'pie',
field : 'data1',
showInLegend : true,
tips : {
trackMouse : true,
width : 140,
height : 28,
renderer : function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight : {
segment : {
margin : 20
}
},
label : {
field : 'name',
display : 'rotate',
contrast : true,
font : '18px Arial'
}
}]
});
Then I created a Container/Panel, here I am using Container.
I am looking for a way to put my pre-defined chart into the Container. I saw some examples they actually define the chart in the Container field, but that's not what I want. Is there any way that I can put my pre-specified chart in the items field below so that the chart can be rendered?
Ext.create('Ext.container.Container', {
layout: 'fit',
width: 600,
height: 600,
renderTo: Ext.getBody(),
border: 1,
style: {boderColor: '#000000', borderStyle: 'solid', borderWidth: '1px'},
items: [{
}]
});
Thanks
Yes, it's as simple as:
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
Ext.create('Ext.container.Container', {
layout: 'fit',
width: 600,
height: 600,
renderTo: Ext.getBody(),
border: 1,
style: {
boderColor: '#000000',
borderStyle: 'solid',
borderWidth: '1px'
},
items: chart
});
Also note there's no use specifying dimensions on the chart since it's being used in a fit layout.