We have to create a fluid layout meeting following conditions:
There is a Form inside a Window.
If Window Width is increased, then Form Width and its Fields Width should also increase.
If Window Width is decreased, then Form Width and its Fields Width should get reduced but only upto a limit.
If the Window Width is reduced beyond a limit, then there should appear a scrollbar at the Form.
We tried at this by giving flex to fields and minWidth to the Form, assuming that flex will take care of increase of width and minWidth to form would lead to a scroll if the window width is reduced further.
But this unfortunately is not working as per the following test case:
<html>
<head>
<title>TEST</title>
<link rel='stylesheet' href='resources/extjs/resources/css/ext-all.css' />
<script type='text/javascript' src='resources/extjs/ext-all-dev.js'></script>
<script type='text/javascript'>
function getForm(){
var form = {
xtype:'form',
region:'north',
height:100,
autoScroll:true,
minWidth:300,
title: 'Simple Form',
items: [
{
xtype:'container',
layout:'hbox',
items:[
{
xtype:'textfield',
fieldLabel: 'First',
name: 'first',
allowBlank: false,
width:100,
labelWidth:50,
flex:1
},{
xtype:'textfield',
fieldLabel: 'Last',
name: 'last',
allowBlank: false,
width:100,
labelWidth:50,
flex:1
}
]
}]
};
return form;
}
function getWin(){
var win = Ext.create('Ext.window.Window',{
title:'Test Window',
height:400,
width:600,
layout:'border',
items:[
getForm(),
{
region:'center',
title:'Center Region',
html:'Center Region Content'
}
]
});
return win;
}
Ext.onReady(function(){
var win = getWin();
win.show();
});
</script>
</head>
<body>
</body>
</html>
Any suggestions on how to achieve this one? Or what is being done wrong here?
There is a good example similar to this:
http://docs.sencha.com/ext-js/4-1/#!/example/form/anchoring.html
Here is a mix of that with your code. The min and max are set right at the window container. There is an autoScroll and autoWidth config on the form with a minWidth to scroll if the window is smaller than the width needed for that section.
See it here:
http://jsfiddle.net/Du9Nb/
Ext.require([
'Ext.form.*',
'Ext.window.Window'
]);
Ext.onReady(function() {
var form = Ext.create('Ext.form.Panel', {
border: false,
fieldDefaults: {
labelWidth: 50
},
url: 'save-form.php',
autoScroll: true,
autoHeight: true,
bodyPadding: 5,
items: [
{xtype:'panel',
title:'Simple Form',
minWidth: 400,
layout: 'hbox',
defaultType: 'textfield',
items:[
{
fieldLabel: 'First',
name: 'first',
allowBlank: false,
flex: 1,
anchor:'100%' // anchor width by percentage
},{
fieldLabel: 'Last',
name: 'last',
allowBlank: false,
flex: 1,
anchor: '100%' // anchor width by percentage
}
]
}, {
xtype: 'panel',
title: 'Center Region',
html: 'Center Region Content'
}]
});
var win = Ext.create('Ext.window.Window', {
title: 'Test Window - Resize Me',
width: 600,
height:400,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: true,
items: form,
buttons: [{
text: 'Send'
},{
text: 'Cancel'
}]
});
win.show();
});
Related
I added dockedItems to my form.Panel, it aligns to the form, but I want the dockedItems align to the table inside the form, how should I do.
Here is the demo: https://fiddle.sencha.com/#view/editor&fiddle/3kso
Thanks!
Since you set the viewport's layout to fit, and you also specify a fixed width for the table (300 px), the form is ordered to occupy the remaining area, and that's why the toolbar is at the left edge.
Although you could try to make the toolbar floating and align it the the table, I think it is easier to let the form take only the space it needs, and therefore the toolbar will we aligned to the form.
To do so, at the end of your fiddle, try this code to change the viewport's layout:
Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
});
If you need the fit layout for some other reasons, you can keep the fit layout, and add the form within a container:
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
Or if you need a panel that occupies all place, and you want a panel inside this with aligned toolbar, you can use and outside and an inside panel also (check the grey background to see the outside panel):
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
The important thing is that by using vbox and middle in the layout the form will only occupy the place it needs.
EDIT 1:
To address the issues in the comments, here is a complete example that can be run as fiddle:
const form = Ext.create('Ext.form.Panel', {
autoScroll: true,
bodyStyle: {
background: '#abd1ca'
},
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '300px',
'background': '#e3f2fd',
'border-collapse': 'collapse',
}
},
tdAttrs: {
style: {
border: '1px solid #ccc',
padding: '6px',
}
}
},
fieldDefaults: {
labelWidth: 40,
width: '100%',
},
items: new Array(100).fill({
fieldLabel: 'sample',
xtype: 'textfield'
}),
dockedItems: [{
xtype: 'toolbar',
dock: 'left',
items: [{
iconCls: null,
glyph: 61,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 88,
xtype: 'button'
}, {
iconCls: null,
glyph: 70,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 47,
xtype: 'button'
}]
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'hbox',
align: 'stretch',
pack: 'middle'
},
items: [form],
buttonAlign: 'center',
buttons: [{
text: 'Save',
handler: 'save',
}, ],
}]
});
I'm working with ag-Grid to create both tables and charts. I've read through all of the documentation on editing the labels on the axes of grouped, stacked and normalised columns and bar graphs and although there's information on how to format labels on AG-Grid charts, there isn't a way (it seems) to edit them such that they don't overlap when there are multiple labels.
For example I have a line chart below:
The labels on the x-axis are clustered together because each point on the line chart is titled a lengthy word/phrase. I've tried to add padding on the label (second line)
this.options.axes = [
{ type: 'category', position: 'left' },
{ type: 'number', position: 'bottom', label: { padding: 10 } }
]
However it doesn't help the situtation. How can I make it so that either the label is removed altogether or whenever the labels on the axes are over a certain length then it narrows down to just a few letters and then show an ellipses?
For example in the image, the first label 'Business-as-usual' would be narrowed down to just 'Bu..'?
there are two ways to accomplish this. padding won't help you much in this case.
you can use label formatter function to narrow down the label to just a few letters and then show an ellipses.
you can use rotation property to rotate the label(if chart container has enough space) to desired degree so that labels don't overlap.
var options = {
container: document.getElementById('myChart'),
data: [{
os: 'this is pretty long word and will overlap with other labels Windows',
share: 88.07
},
{
os: 'macOS',
share: 9.44
},
{
os: 'Linux',
share: 1.87
},
{
os: 'Other hgyhtghygyh Linux ',
share: 1.87
},
],
series: [{
type: 'column',
xKey: 'os',
yKeys: ['share'],
}, ],
axes: [{
type: 'category',
position: 'bottom',
title: {
text: 'Desktop Operating Systems',
enabled: false,
},
label: {
formatter: function(params) {
if (params.value.length > 10) {
return params.value.substr(0, 6) + '...';
}
return params.value
},
}
},
{
type: 'number',
position: 'left',
title: {
text: 'Market Share (%)',
enabled: false,
},
label: {
formatter: function(params) {
return params.value + '%';
},
},
},
],
legend: {
enabled: false,
},
};
var options1 = {
container: document.getElementById('myChart1'),
data: [{
os: 'this is pretty long word and will overlap with other labels Windows',
share: 88.07
},
{
os: 'macOS',
share: 9.44
},
{
os: 'Linux',
share: 1.87
},
{
os: 'Other hgyhtghygyh Linux ',
share: 1.87
},
],
series: [{
type: 'column',
xKey: 'os',
yKeys: ['share'],
}, ],
axes: [{
type: 'category',
position: 'bottom',
title: {
text: 'Desktop Operating Systems',
enabled: false,
},
label: {
rotation: 90
}
},
{
type: 'number',
position: 'left',
title: {
text: 'Market Share (%)',
enabled: false,
},
label: {
formatter: function(params) {
return params.value + '%';
},
},
},
],
legend: {
enabled: false,
},
};
agCharts.AgChart.create(options);
agCharts.AgChart.create(options1);
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var __basePath = './';
</script>
<style media="only screen">
html,
body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
<script src="https://unpkg.com/ag-charts-community#2.1.0/dist/ag-charts-community.min.js"></script>
</head>
<body>
<div id="myChart" style="height: 100%;"></div>
<div id="myChart1" style="height: 100%;"></div>
</body>
</html>
I'm new one of echarts, I need to set the text in centre of donuts chart. I tried and google it no use, I tried it by html also but I cant able to achieve it. Please any one suggest me, How can I resolved it. Thanks in advance.
In options I add the total in title but I need to show that one into centre.
var myChart = echarts.init(document.getElementById('pieChart1'));
var idx = 1;
pieChartOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
title: {
text: "Total "+10+"%",
left: 'center'
},
series: [
{
name: 'Test one',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: true,
label: {
show: true,
color: '#000',
fontSize: '80',
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 10, name: 'Success', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#5E50A1'}}},
{value: 20, name:'Failed', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FFB200'}}},
{value: 30,name:'Onprocess', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FF434F'}}}
]
}
]
}
myChart.setOption(pieChartOption);
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小的Dom-->
<div id="pieChart1" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</body>
<!--引入echarts. Using echarts-all.js for convenience -->
<!-- CDN is taken from https://cdnjs.com/libraries/echarts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
</html>
As far as I understand, you do not plan to place labels in the center, only the total, right? In this case the most simple option it is a markPoint (see live example):
series: [{
// ...
markPoint: {
tooltip: { show: false },
label: {
show: true,
formatter: '{b}',
color: 'black',
fontSize: 20,
},
data: [{
name: 'Total 10%',
value: '-',
symbol: 'circle',
itemStyle: { color: 'transparent' },
x: '50%',
y: '50%',
}],
},
// ...
}]
P.S. Library that you included in example is very strange (copyrights?, binary data?) and distort default behaviour. Please don't use them, take the any pack from the repo instead https://www.jsdelivr.com/package/npm/echarts?path=dist
You can use the graphic property, like this:
https://jsfiddle.net/motz75an/
graphic: {
elements: [{
type: 'text',
left: 'center',
top: 'middle',
z: 999,
style: {
text: `Total 10%`,
textAlign: 'center',
fontSize: 26,
}
}]
},
This seems like a trivial issue, but... I have a list of addresses in a panel to which I wish to add geolocation coordinates (and to display them on a map) that is rendered in a form panel, so that when I click on the address of interest in the panel an onTap is fired to do execute the onSelectGeolocation given below to open the form panel rendered in the ViewPort and to add any existing records to the associated form elements:
onSelectGeolocation: function(view, index, target, record, event) {
console.log('Selected a Geolocation from the list');
var geolocationForm = Ext.Viewport.down('geolocationEdit');
if(!geolocationForm){
geolocationForm = Ext.widget('geolocationEdit');
}
geolocationForm.setRecord(record);
geolocationForm.showBy(target);
}
The line that uses the setRecord method to write any existing records in my store to the form elements, however, is preventing the default values in my form panel below from getting written to the desired form elements. When I comment this out, all is good. Problem is that I need to grab those records that exist in my store, e.g., address, to display in my form. How can I do this AND write default values to my textfield elements in my form?
My form panel that is rendered as a ViewPort via the onTap is:
Ext.define('EvaluateIt.view.GeolocationEdit', {
extend: 'Ext.form.Panel',
alias : 'widget.geolocationEdit',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Number',
'Ext.field.DatePicker',
'Ext.field.Select',
'Ext.field.Hidden'
],
config: {
// We give it a left and top property to make it floating by default
left: 0,
top: 0,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Set the width and height of the panel
width: 400,
height: 330,
scrollable: true,
layout: {
type: 'vbox'
},
defaults: {
margin: '0 0 5 0',
labelWidth: '40%',
labelWrap: true
},
items: [
{
xtype: 'datepickerfield',
destroyPickerOnHide: true,
name : 'datOfEvaluatione',
label: 'Date of evaluation',
value: new Date(),
picker: {
yearFrom: 1990
}
},
{
xtype: 'textfield',
name: 'address',
label: 'Address',
itemId: 'address'
},
{
xtype: 'textfield',
name: 'latitude',
label: 'Latitude',
itemId: 'latitude',
value: sessionStorage.latitude,
},
/* {
xtype: 'textfield',
name: 'longitude',
label: 'Longitude',
itemId: 'longitude',
value: sessionStorage.longitude
},
{
xtype: 'textfield',
name: 'accuracy',
label: 'Accuracy',
itemId: 'accuracy',
value: sessionStorage.accuracy
},*/
{
xtype: 'button',
itemId: 'save',
text: 'Save'
}
]
}
});
Behavior is as expected. I will use Ext.getCmp on the id's for each item instead.
I'm having a problem where I would like to remove a FormPanel from a Window.
Here is my Form which is being loaded in a Window:
myForm = new Ext.FormPanel({
frame: true,
width: '100%',
id: 'myform',
layout: 'form',
autoHeight: true,
autoDestroy: false,
region: 'center',
monitorValid: true,
items: [{
xtype: 'textfield',
id: 'mytextfield',
fieldLabel: 'My Label',
}]
});
MyWindow = new Ext.Window({
title: 'MyWindow',
layout: 'auto',
resizable: false,
width: 717,
autoheight:true,
id:'mywindow',
closeAction:'hide',
closable: true,
items:[Ext.getCmp("myform")]
});
Now I want to remove this form and have to show another form, and I'm doing like this somewhere else:
MyWindow.removeAll();
MyWindow.add(Ext.getCmp("myAnotherForm"));
But this gives me error "Uncaught TypeError: Cannot read property 'events' of undefined" in ext-all-debug.js.
Is there anything, I'm missing here ?
Thanks.
You can remove the form and add another form by using the following code:
Ext.onReady(function() {
var btn = new Ext.Button({
id : 'button',
width : 100,
height : 30,
text : 'click me',
listeners : {
click : function(){
var myanother = myAnotherForm;
var anotherbtn = btn1;
Mywindow.removeAll();
Mywindow.add(myanother);
Mywindow.add(anotherbtn);
Mywindow.doLayout();
}
}
});
var btn1 = new Ext.Button({
id : 'button1',
width : 100,
height : 30,
text : 'Another button'
});
myAnotherForm = new Ext.FormPanel({
frame: true,
width: '100%',
id: 'myanotherform',
layout: 'form',
autoHeight: true,
autoDestroy: false,
region: 'center',
monitorValid: true,
items: [{
xtype: 'textfield',
id: 'mytextfield',
fieldLabel: 'My Another Label',
}]
});
myForm = new Ext.FormPanel({
frame: true,
width: '100%',
id: 'myform',
layout: 'form',
autoHeight: true,
autoDestroy: false,
region: 'center',
monitorValid: true,
items: [{
xtype: 'textfield',
id: 'mytextfield',
fieldLabel: 'My Label',
}]
});
var Mywindow = new Ext.Window({
title: 'MyWindow',
layout: 'auto',
resizable: false,
width: 317,
autoheight:true,
id:'mywindow',
closeAction:'hide',
closable: true,
items : [myForm,btn]
});
Mywindow.show();
});
The working sample for the above is follows:
http://jsfiddle.net/kesamkiran/MVewR/1/
* Click on 'click me' button then you will get the another form with another button.If you want to change only form,then you can remove the button.