How to add component to other, like a Ext.Viewport.add method?
For exaple I have defined panel, and want to add some component (panel) using function. I use 6.2.0, modern toolkit.
This example hasn't done positive result:
Ext.onReady(function(){
var bigPannel=Ext.create('Ext.Panel', {
title: 'Ext JS 4',
width: 300,
height: 200,
id : 'bigPannel',
renderTo: Ext.getBody()
});
Ext.getCmp('bigPannel').add({
title: 'panel2',
width: 100,
height: 100,
html:'Hello!'
});
})
Please help me understand, how to add component to other component.
I do not think you need to grab bigPannel with ext.getCmp.. instead get the var directly and add to it like this:
Ext.onReady(function () {
var bigPannel = Ext.create('Ext.Panel', {
title: 'Ext JS 4',
width: 300,
height: 200,
id: 'bigPannel',
renderTo: Ext.getBody()
});
bigPannel.add({
title: 'panel2',
width: 100,
height: 100
})
});
Related
I'm creating a web application and I want a panel to be perfectly in the center of it's parent panel. I was going through ExtJS5's Kitchen Sink to find layout examples and I found this one.
It places the panel perfectly in the middle, it doesn't cheat using hbox or vbox then setting the pack and align properties to center and middle.
Here is the code he used:
Ext.define('KitchenSink.view.layout.Center', {
extend: 'Ext.container.Container',
requires: [
'Ext.layout.container.Center'
],
xtype: 'layout-center',
width: 500,
height: 400,
layout: 'center',
items: {
title: 'Centered Panel: 75% of container width and 95% height',
border: true,
layout: 'center',
scrollable: true,
width: '75%',
height: '95%',
bodyPadding: '20 0',
items: [
{
title: 'Inner Centered Panel',
html: 'Fixed 300px wide and full height. The container panel will also autoscroll if narrower than 300px.',
width: 300,
height: '100%',
frame: true,
bodyPadding: '10 20'
}
]
}
});
And here is how it looks like:
The reason I prefer this is because the width and height of one the first inner panel is purely percent based. If I tried this using hbox or vbox, I would need to set the width or height to a fixed number.
I'm using Sencha Architect and for some reason, I can't find the layout type center for my panel, container, and viewport elements. I've also included the Ext.layout.container.Center in my requires but still no dice.
Does anyone know how to implement this Kitchen Sink example in Sencha Architect?
This is a bug https://www.sencha.com/forum/showthread.php?293050
But you can easily overcome any such problems using process config function in SA.
Select your class where you want to edit special configs and click on add processCofnig
Next in the generated function you can edit the configs in any way you need.
processMyContainer: function(config) {
config.layout = "center";
}
The only disadvantage of using process config is that you will not see the settings set by it in the SA design view - but when you preview the app you will see it.
This is my final code for the class:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.container.Container',
alias: 'widget.mycontainer',
requires: [
'MyApp.view.MyContainerViewModel',
'Ext.panel.Panel'
],
viewModel: {
type: 'mycontainer'
},
height: 800,
width: 600,
initConfig: function(instanceConfig) {
var me = this,
config = {
items: [
me.processMainPAnel({
xtype: 'panel',
height: '95%',
width: '75%',
bodyPadding: '20 0',
title: 'Centered Panel: 75% of container width and 95% height',
items: [
{
xtype: 'panel',
height: '100%',
html: 'Fixed 300px wide and full height. The container panel will also autoscroll if narrower than 300px.',
width: 300,
bodyPadding: '10 20',
title: 'Inner Centered Panel'
}
]
})
]
};
me.processMyContainer(config);
if (instanceConfig) {
me.getConfigurator().merge(me, config, instanceConfig);
}
return me.callParent([config]);
},
processMainPAnel: function(config) {
config.layout = "center";
return config;
},
processMyContainer: function(config) {
config.layout = "center";
}
});
This is the result in the browser:
Does anyone help me how to get label text?, It run if I use setText() but when I want to get it,I've tried with getText(), getLabel() it doesn't run. So I need help if you have an idea. Thanks
var lbl = {
xtype: 'label',
id: 'lblId',
text: 'Hello world!'
};
new Ext.Panel({
renderTo: Ext.getBody(),
width: 100,
height: 100,
items: [lbl,
{
xtype: 'button',
listeners: {
click: function () {
var label = Ext.get('lblId');
console.log(label.getText());
}
},
text: 'click here'
}]
});
You need to get the component.
console.log(label.component.text);
You can try :
App.label.getValue()
You can use the following in your click listener function:
var label = Ext.getCmp('lblId');
label.setText('the new text');
console.log(label.text);
This will get label as an Ext Js component and then you can change the text using .setText() and retrieve it using .text.
see Fiddle: https://fiddle.sencha.com/#fiddle/1jkb
You can try these three ways. First by directly accessing text, and the other forms is accessing the label's DOM object.
var lbl = {
xtype: 'label',
id: 'lblId',
text: 'Hello world!'
};
new Ext.Panel({
renderTo: Ext.getBody(),
width: 100,
height: 100,
items: [lbl,
{
xtype: 'button',
listeners: {
click: function () {
var label = Ext.getCmp('lblId');
console.log('Way 1: ' + label.text);
console.log('Way 2: ' + label.el.dom.innerHTML);
console.log('Way 3: ' + label.getEl().dom.innerHTML);
}
},
text: 'click here'
}]
});
<script src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>
<link type="text/css" rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css")/>
You can try with:
this.findById('lblId');
In AEM we can get the extjs label widget by
dialog.findById("lblId");
var layout = Ext.create('Ext.panel.Panel', {
//renderTo: 'layout',
width: 500,
height: 500,
//title: 'Border Layout', //no title will be blank
layout: 'border',
items: [{
xtype: 'gmappanel',
id : 'mygooglemap',
gmapType: 'map',
zoomLevel: 7,
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
lat: 3.951941,
lng: 102.052002,
}
}],
renderTo: Ext.getBody() //get the body and display Layout at there
});
I have renderto Body but still can't display anything?
This the link to my jsfiddle http://jsfiddle.net/anthor/Y4jP4/
baby steps Chin Ye, baby steps.
Modified your code to render the panel:
http://jsfiddle.net/dbrin/tayua/
You selected extjs library in the fiddle and then included the library again through the resources link. Instead you need to include the css resource.
I'm trying following code but it doesn't work. I can see in the browser status bar that the right javascript file from the right path is being loaded but the UI doesn't show up. On the contrary, if I have the entire code inline (inside app.js) all works as anticipated. I'm using Ext Js 4.1.1.
app.js
Ext.onReady(function () {
Ext.Loader.setConfig({
enabled: true,
paths: {
'company': './src/company'
}
});
var largeHomeButton = Ext.create('company.classes.ToolbarLargeButton', {
iconCls: 'home32'
});
var myToolbar = Ext.create('Ext.toolbar.Toolbar', {
items: [largeHomeButton]
});
var master = Ext.create('Ext.panel.Panel', {
layout: 'absolute',
x: 0, y: 0,
height: 100, width: 110,
border: 5,
lbar: [myToolbar]
});
Ext.create('Ext.Viewport', {
layout: 'anchor',
items: [master]
});
});
src/company/classes/ToolbarLargeButton.js
Ext.define('ToolbarLargeButton', {
extend: 'Ext.button.Button',
scale: 'large',
iconAlign: 'center'
});
I think you should specify full class name in Ext.define:
Ext.define('company.classes.ToolbarLargeButton', {
(EXT 3) I have moved from an hbox layout to a border layout. All my components worked fine in the hbox layout (two grids). I've been attempting to add these same items to a border layout and I keep getting an error "comp is undefined". Am I missing something in my panel setup?
var skedPanel = new Ext.Panel({
id : 'skedPanel',
layout : 'border',
defaults: {
frame:true,
split:true
},
height:650,
width: 1200,
items : [
{
region:"east",
width:300
},
{
region:"center",
width: 800,
}
]
});
skedPanel.add('center',this.scheduler) < ---- error triggered here
skedPanel.add('east',this.dList1)
skedPanel.render('root');
EDIT: Here is the solution to what I wanted to do. First create the regions, then add content. The issue was that the regions were not completely created. Molecule's tip sent me in the right direction.
var skedPanel = new Ext.Panel({
id : 'skedPanel',
layout : 'border',
defaults: {
frame:false,
split:true
},
height:650,
width: 1200,
items : [
{
region:"center",
id: 'skedCenter',
width: 850
},
{
region: "east",
id: 'skedEast',
width:300
}
]
});
Ext.getCmp('skedCenter').add(this.scheduler)
Ext.getCmp('skedEast').add(this.dList1)
skedPanel.render('root');
You can have only one 'center' region