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.
Related
What's the best way to do a layout where the start content is fixed, the center is flex and the end content is fixed? Like a 100% wide HBox with three columns, first and last col are fixed and the center stretches?
This is how I do it by now, can I avoid using sap.ui.commons.layout.MatrixLayout?
new sap.ui.commons.layout.MatrixLayout({
layoutFixed: true,
columns: 3,
width: '100%',
widths: [ '100px', '100%', '100px' ],
rows: [
new sap.ui.commons.layout.MatrixLayoutRow({
cells : [
new sap.ui.commons.layout.MatrixLayoutCell({
content: new sap.m.Label({
text: 'start'
})
}),
new sap.ui.commons.layout.MatrixLayoutCell({
content: new sap.m.Label({
text: 'center'
})
}),
new sap.ui.commons.layout.MatrixLayoutCell({
content: new sap.m.Label({
text: 'end'
})
})
]
})
]
})
I tried to use sap.ui.layout.HorizontalLayout, but it does not stretch horizontally:
sap.ui.layout.HorizontalLayout({
width: '100%',
content: [
new sap.m.Label({
width: '100px',
text: 'start'
}),
new sap.m.Label({
width: '100%',
text: 'center'
}),
new sap.m.Label({
width: '100px',
text: 'end'
})
]
})
The HBox is the solution for browsers supporting the CSS3 FlexBoxLayout. Alternatively, you could nest two FixFlex layouts - this should work in all UI5-supported browsers (FixFlex is like a specific, limited subset of HBox/Vbox with fallback for non-FlexBox browsers).
Ok, I think I got it. :)
new sap.m.HBox({
items: [
new sap.m.Label({
text: 'start',
width: '100px',
layoutData: new sap.m.FlexItemData({
growFactor: 0
})
}),
new sap.m.Label({
text: 'center',
layoutData: new sap.m.FlexItemData({
growFactor: 1
})
}),
new sap.m.Label({
text: 'end',
width: '100px',
layoutData: new sap.m.FlexItemData({
growFactor: 0
})
})
]
})
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()
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.
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);
});