I'm a UI5 beginner and I want to create two responsive sap.m.Buttons. The width should be 50% of the view per Button. The problem is, I don't really get how to set the width for a responsive button.
var oButtonNeuePal = new sap.m.Button({
icon : "sap-icon://add-document",
text : "{i18n>lieferschein.btnNeuePal}",
press : [ 'NEUEPAL', oController.onButton, oController ]
});
var oButtonProtokoll = new sap.m.Button({
icon : "sap-icon://list",
text : "{i18n>lieferschein.btnProtokoll}",
press : [ 'PROTOKOLL', oController.onButton, oController ]
});
/***********************************************************************
* Page
*/
var oForm = new sap.ui.layout.form.SimpleForm({
layout : sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout
});
var oGroupH = new sap.m.HBox({
justifyContent : sap.m.FlexJustifyContent.SpaceBetween,
});
oGroupH.addItem(oButtonNeuePal);
oGroupH.addItem(oButtonProtokoll);
var oGroupV = new sap.m.VBox();
oGroupV.addItem(oGroupH);
//I removed some labels and Inputfield
oForm.addContent(oGroupV);
var oPage = new sap.m.Page({
customHeader : oBar
});
oPage.addContent(oForm);
This might be interesting for you: Flex Box - Size Adjustments
When filling a HBox/FlexBox with content, not every control (maybe even no control) will automatically take the whole available space.
You have to give the Button a width of 100% and set the growFactor of its layout to 1.
In XML (from my sample link):
<Button text="{i18n>lieferschein.btnNeuePal}" width="100%">
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</Button>
In JS (probably):
var oButtonNeuePal = new sap.m.Button({
icon : "sap-icon://add-document",
text : "{i18n>lieferschein.btnNeuePal}",
layoutData: new sap.m.FlexItemData({ growFactor: 1}),
width: "100%",
press : [ 'NEUEPAL', oController.onButton, oController ]
});
Related
I used angular-chart.js in my website to create a Pie chart, and I would like to customize the legend. By default, the legend shows the color and the label. (As shown in the picture below) I would like to add the value/data of that label, like what it shown in the tooltip of the chart.
This is my HTML code:
<canvas id="pie" class="chart chart-pie"
chart-data="chartData" chart-labels="chartLabels" chart-options="chartOptions">
</canvas>
Based on the angular-chart.js documentation, legend is now a Chart.js option so the chart-legend attribute has been removed.
That is why, in my JS code I've tried to add generateLabels, just in case this is what I need to customize the legend:
$scope.chartOptions = {
legend: {
display: true,
labels: {
generateLabels: function(chart){
console.log(chart.config);
}
}
}
};
But whenever I add this lines, it will not show the chart. I think it is an error or something. And I'm not sure, if generateLabels is the right option that I needed.
Can somebody teach me the right way to customize the legend to achieve what I wanted?
Thanks in advance!
Let me try shedding some light/answering your question:
generateLabels: does make custom labels,and replaces templates from v1 but in order to use it you have to get your chart information and reimplement legend labels adhering to the Legend Item Interface found in the docs and code. Sounds a bit cryptic, but in practice is somehow simple and goes like this:
var theHelp = Chart.helpers;
// You need this for later
// Inside Options:
legend: {
display: true,
// generateLabels changes from chart to chart, check the source,
// this one is from the doughnut :
// https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.doughnut.js#L42
labels: {
generateLabels: function(chart) {
var data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
var arc = meta.data[i];
var custom = arc && arc.custom || {};
var getValueAtIndexOrDefault = theHelp.getValueAtIndexOrDefault;
var arcOpts = chart.options.elements.arc;
var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
return {
// And finally :
text: ds.data[i] + "% of the time " + label,
fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
index: i
};
});
}
return [];
}
}
}
Result:
Codepen: Chart.js Pie Chart Custom Legend Labels
There are other alternatives, if you notice on the pen/pie, the slices also have data information, that is from a plugin (check the pen)
Still another option, is to render the legend labels off canvas,for instance:
myPieChart.generateLegend();
Which gives you this Html:
"<ul class='0-legend'><li><span style='background-color:black'> </span>she returns it </li><li><span style='background-color:white'></span>she keeps it</li></ul>"
I haven't tried it, but I think you can modify it with the global method for your data Legend on the callback an it will give you a block of Html you can insert off canvas.
This is one Panel and initially its items will be empty.
var resultArray = [];
this.mainContainer = new Ext.Panel({
border : true,
layout : 'column',
border : 1,
collapsible : true,
title : 'Flaged Questions',
items : [resultArray]
});
return this.mainContainer;
and later in this container i am adding the items in the form of container. Container consist of textfields. and Now on button click i want to get the values of textfields.
this.CenterContainer = new Ext.Container({
layout : 'floating-form',
flex : 1,
border : true,
bodyStyle : 'background:#F2F2F2;',
style : 'padding-top:7px',
items : [ {
xtype : 'textfield',
labelWidth : 45,
fieldLabel : "<span style='padding-left:2px'>" + 'Notes' + "</span>",
name : 'Notes',
readOnly : true,
border : 1,
width : 340,
height : 35
}]
});
this.mainContainer.items.add(this.CenterContainer);
If you give that textfield an itemId then you should be able to get a reference to it like this:
var field = this.mainContainer.down('#MyTextFieldItemId');
See the docs on ComponentQuery if you want to get back more than just one textfield by itemId
http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.ComponentQuery
I am trying to set image of a button but its not covering the whole button. I mean, background of button is still visible.
I am trying to do it at run time by providing different image for each button in a loop.
Here it is:
for(var i=0; i<tvStore.getCount(); i++)
{
var aButton = Ext.create('Ext.Button',
{
margin:8,
id:'button'+i,
itemId:i,
style: 'width: 110px;height:110px;background-image:url(someRandomWebURLToImage) !important',
But image is not covering all the button. or if image cannot be stretched then how can I make the button's background transparent?
Thanks,
You can use iconCls attribute to specify CSS like this:
{
xtype : 'button',
iconCls : 'cart',
text : 'Add to Cart',
iconMask : true,
padding : 10,
margin : 10,
id : 'addToBagBtn'
}
and CSS file should have:
.x-tab .x-button-icon.cart, .x-button .x-button-icon.x-icon-mask.cart {
-webkit-mask-image: url('../../touch/resources/themes/images/default/pictos/shop1.png');
}
I have some trouble with my app. I have a chart and the data are loaded from a store who make an Ajax connection.
The first time I load my page it work fine but I have three buttons and my goal is to load a new chart to replace the previous when someone click on a button but this doesn't work like I want. I have some bugs and I want to know if there a "official" way to do what I want to do.
I have an error:
Error : TypeError: me.labels[inflections.length - 1] is undefined
Source File : extjs-4.1.0/ext-all-debug.js
Ligne : 58728
When someone click on a button I do this:
var el = Ext.get('GraphVolumeBar03');
if(!el) {
var elem = Ext.create('Axiastats.view.GraphVolumeBar03');
Ext.create('Ext.panel.Panel', {
id : 'GraphVolumeBar03',
renderTo: 'graphContainer-body',
height : 300,
border: false,
items: elem,
});
}
else {
el.show();
Ext.getCmp('GraphVolumeBar03-chart').redraw(true);
}
And I hide the old charts but I don't think it's the right solution:
var el2 = Ext.get('GraphVolumeBar01');
if(el2) { el2.hide(); }
var el3 = Ext.get('GraphVolumeBar02');
if(el3) { el3.hide(); }
I am new to Ext-JS4. I am working on a project in which I am configuring a toolbar. I have added few buttons to the toolbar, one of which has a menu and the menu basically has a grid which is loaded from a JSON store. The grid is used within the menu due to such requirement in the project. The grid is loaded properly but I need access to the menu item being clicked within the menu. I want the text of the menu item which is clicked. The following code will better explain my question.
var store = Ext.create('Ext.data.Store', {
storeId : 'favStore',
model : favModel,
autoLoad : true,
groupField : 'group_header',
proxy : {
type : 'ajax',
url : '../../data/favorites.json',
reader : {
type : 'json',
root : 'favoritesMenu'
}
}
});
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false
});
var favMenu = Ext.create('Ext.menu.Menu', {
items : [favGrid],
listeners : {
'click' : function(store,item) {
alert('Item clicked= ');//tried item.text here but not working
}
}
});
In the alert method on the click event I want the text of the menu item clicked. I hope I am clear with the question. Can anyone give me some suggestions? Also can anyone suggest me some good blogs on Ext-JS4?
All these things are defined within the initComponent method of Ext.define() for toolbar.
You can use the documentation.
For me it was very usefull:
http://docs.sencha.com/ext-js/4-0/
I believe in your case you want the listener to be attributed to your grid, not the menu. Something like...
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false,
listeners: {
'itemclick': function(view, record, item, index, e, eOpts){
//Assuming 'name' is a fieldname in the record
alert('item clicked = ' + record.get('name'));
}
}
});
Check out the Ext.grid.Panel documentation here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel . Click on "events" at the top and find "itemclick".
or you can have your menu listen to the grid's event by relaying the events.
favMenu.relayEvents(favGrid, ['itemclick']);
favMenu.on('itemclick', me.onFavFunction, me);