Am new to Extjs and have a chart that I place in an accordion but when i resize the accordion,the chart doesn't resize.Please help
Here is my code
var chart1 = Ext.create('Ext.chart.Chart',{
animate: true,
store: store,
height:500,
width:340,
layout:'fit',
legend:{
visible:true,
position:'right',
labelFont:'10px Comic Sans MS'
},
margin:'30 0 0 0',
//autoHeight:true,
//insetPadding: 30,
//other code here.......................
});
Here is the code for the panel
var chartPanel = new Ext.Panel({
title:'Visualization Charts',
//cls:'empty',
items:[chart1]
});
code for accordion
var myaccordionwest = new Ext.Panel({
title:'Data Visualization',
region:'west',
//margin:'5 0 5 5',
split:true,
width:'27%',
layout:'accordion',
collapsible:true,
items:[chartPanel]
});
You have hardcoded width and height for the chart. Layout fit should be used on a container with one child item. So layout fit on chart doesn't mean anything, you should move that to the chartPanel.
So this should work:
var chart1 = Ext.create('Ext.chart.Chart',{
animate: true,
store: store,
legend:{
visible:true,
position:'right',
labelFont:'10px Comic Sans MS'
},
margin:'30 0 0 0',
//autoHeight:true,
//insetPadding: 30,
//other code here.......................
});
var chartPanel = new Ext.Panel({
title:'Visualization Charts',
//cls:'empty',
items:[chart1]
});
var myaccordionwest = new Ext.Panel({
title:'Data Visualization',
region:'west',
layout:'fit',
//margin:'5 0 5 5',
split:true,
width:'27%',
layout:'accordion',
collapsible:true,
items:[chartPanel]
});
Related
I have the ExtJS form which is floating
Now i want to give % margin from top and left but its not working.
Example is here :
https://fiddle.sencha.com/#fiddle/1dj
var f = new Ext.form.Panel({
width: 400,
height: 400,
title: 'Foo',
floating: true,
closable : true,
y: '10%',
x: '10%',
});
f.show();
Try the below for size:
var leftPercent=10;
var rightPercent=10;
// Create a viewport, this automatically scales to the window height/width so is predictable in its size
var viewport=Ext.create('Ext.container.Viewport', {
items:[
f
],
listeners:{
resize:function(){
// if the form has been added to the viewport, change its position
f && f.setPosition(viewport.getWidth()*(rightPercent/100), viewport.getHeight()*(rightPercent/100));
}
}
});
var f = new Ext.form.Panel({
width: 400,
height: 400,
title: 'Foo',
autoShow:true,
floating: true,
// set the initial position of the form (not necessarily needed)
x:viewport.getWidth()*(rightPercent/100),
y:viewport.getHeight()*(rightPercent/100)
});
It should provide you a decent basis to improve/edit. The important things are:
The window is placed within a component/element which is known (e.g. the viewport per above)
The height/width of the parent container behave as predicted during user interaction with the view
Any alterations to the height width of the parent container, then lead the child container to reposition itself accordingly
You can change the position of Ext.form.Panel by using setPosition() function.
Eg:-
var f = new Ext.form.Panel({
width: 400,
height: 400,
title: 'Foo',
floating: true,
closable : true,
y: '10%',
x: '10%',
});
f.show();
f.setPosition(100, 200, true);
Please refer below code.
Config:
region -> Defines the region inside
padding -> Specifies the padding for this component
var f = new Ext.form.Panel({
width: 400,
height: 400,
title: 'Foo',
floating: true,
closable : true,
//padding : '10 0 0 20', // example: '10 0 0 20' (top, right, bottom, left).
region : 'center' // possible values north, south, east, west, and center
});
f.show();
Note: padding used for smaller variation.
Second try :
var f = new Ext.form.Panel({
width: 400,
height: 400,
title: 'Foo',
floating: true,
closable : true,
left : 10,
top : 10
});
f.show();
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 have follow structure:
TabPanel->FormPanel->Grid
And i want to set grid's height to all free space on formpanle. If i says layout:fit` in FormPanle first textfield get all space of formpanel. How to do what i want?
FormPanel:
var search = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Поиск',
//layout:'fit',
viewConfig:{ forceFit: true },
//bodyStyle:'padding:5px 5px 0',
GridPanel:
var searchTab = new Ext.grid.GridPanel({
store: searchStore,
region: 'center',
cm: searchCm,
layout:'fit',
selModel: new Ext.grid.RowSelectionModel(),
stripeRows : true,
height: 390,
autoExpandColumn:'expColumn',
loadMask: true,
id: 'searchTab',
title:'Найденные объекты',
autoScroll: true,
User borderLayout and devide in 2 Region.North and center. Add your top panel content in north region and grid in center region.
layout: 'border',
items: [{
title: 'North Region is resizable',
region: 'north', // position for region
xtype: 'panel',
height: 100
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
items: {
new Ext.grid.GridPanel({
store: searchStore,
region: 'center',
cm: searchCm,
layout:'fit',
selModel: new Ext.grid.RowSelectionModel(),
stripeRows : true,
height: 390,
autoExpandColumn:'expColumn',
loadMask: true,
id: 'searchTab',
title:'????????? ???????',
autoScroll: true
})
}
}]
Fix the height for textfield and Try height:'100%' for gridpanel. Sushant Jain's solution is good but in that too go for height:'100%' if you want grid to occupy leftover area. region: 'center' helps to occupy leftover area by north region but if you fix height or width than even if center region expand to occupy left over area grid panel will remain on fixed height.
I'm trying to create a layout in ExtJS which has a grid on top and on the bottom left and right sections, a basic parent/child, master/details layout:
wrapper_panel
panel_top
[grid]
panel_bottom
[left_area right_area]
However, the two areas in panel_bottom are on top of each other instead of to the left and right
var left_area = new Ext.Panel({
region: 'west',
layout: 'fit',
width: 100,
items: []
});
var right_area = new Ext.Panel({
region: 'center',
layout: 'fit',
width: 100,
items: []
});
var panel_bottom = new Ext.Panel({
//layout: 'border',
region: 'south',
items: [ left_area, right_area ]
})
It looks like this:
If I make the panel_bottom layout: border then the left and right areas disappear completely.
What do I need to change in the bottom area panels so that they line up left and right?
Addendum
#vimvds, if I add width: 200 or e.g. width: 300, I just get this:
Thanks for the answers, it led me to scrap this and use the table layout instead, which led me to another question how to define percentage instead of absolute values for height/width.
I'd use a Ext.layout.HBoxLayout:
var panel_bottom = new Ext.Panel({
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [ left_area, right_area ],
});
Alternatively you could also use a Ext.layout.TableLayout or a Ext.layout.ColumnLayout:
var panel_bottom = new Ext.Panel({
layout: 'column',
defaults: {
columnWidth: 0.5
},
items: [ left_area, right_area ],
});
And what happens if you use :
var panel_bottom = new Ext.Panel({
layout: 'border',
items: [ left_area, right_area ],
width: 200
});
Using ExtJs.
I'm trying to design a main which is divided into three sub panels (a tree list, a grid and a panel). The way it works is that you have a tree list (west) with elements, you click on an element which populates the grid (center), then you click on an element in the grid and that generates the panel (west).
My main panel containing the three other ones has been defined with a layout 'border'.
Now the problem I face is that the center layout (the grid) has been defined in the code with a fixed width and the west panel as an auto width. But when the interface gets generated, the grid width is suddenly taking all the space in the interface instead of the west panel.
The code looks like that:
var exploits_details_panel = new Ext.Panel({
region: 'east',
autoWidth: true,
autoScroll: true,
html: 'test'
});
var exploit_commands = new Ext.grid.GridPanel({
store: new Ext.data.Store({
autoDestroy: true
}),
sortable: true,
autoWidth: false,
region: 'center',
stripeRows: true,
autoScroll: true,
border: true,
width: 225,
columns: [
{header: 'command', width: 150, sortable: true},
{header: 'date', width: 70, sortable: true}
]
});
var exploits_tree = new Ext.tree.TreePanel({
border: true,
region: 'west',
width: 200,
useArrows: true,
autoScroll: true,
animate: true,
containerScroll: true,
rootVisible: false,
root: {nodeType: 'async'},
dataUrl: '/ui/modules/select/exploits/tree',
listeners: {
'click': function(node) {
}
}
});
var exploits = new Ext.Panel({
id: 'beef-configuration-exploits',
title: 'Auto-Exploit',
region: 'center',
split: true,
autoScroll: true,
layout: {
type: 'border',
padding: '5',
align: 'left'
},
items: [exploits_tree, exploit_commands, exploits_details_panel]
});
Here 'var exploits' is my main panel containing the three other sub panels.
The 'exploits_tree' is the tree list containing some elements. When you click on one of the elements the grid 'exploit_commands' gets populated and when you click in one of the populated elements, the 'exploits_details_panel' panel gets generated.
How can I set a fixed width on 'exploit_commands'?
Thanks for your time.
The center region cannot, according to the docs, have a fixed width (see the first bullet point under the Notes heading). Any other region (N, S, E or W) may define its size, and the center region simply takes up whatever space is left over. BTW, this is pretty much a standard approach for this style of layout in other GUI platforms too (or think of just about any graphical IDE you've used as an example).
Don't set auto width on your east panel, give it a defined starting width (otherwise it will not show, which is probably what you're seeing).