I want to add an additional text property to sap.ui.unified.MenuItem. It currently has only one text property.
I am trying the following
sap.ui.unified.MenuItem.extend("ExtendedMenuItem",{
metadata:{
properties:{
SetText : {type: "string"}
},
aggregations: {
_SecondText : {type: "sap.ui.commons.Label", multiple : false, visibility: "public"}
}
},
init: function(){
var oSecondText = new sap.ui.commons.Label("TL",{
text: this.SetText
});
this.addAggregation("_SecondText",oSecondText);
},
renderer:"sap.ui.unified.MenuItemRenderer"
});
var oTestCopy = new ExtendedMenuItem("TC",{
text: "TEST COPY",
SetText: "CTRL+TEST"
});
but the second text property is not being displayed.
What can i do to add a second text property to a standard UI5 control ?
Here is an example from the official documentation of Custom Controllers. You have to implement the renderer itself to place the new m.Label element on the UI. In the renderer, you can operate with standard HTML elements. For more details, check the linked source.
Related
I have a SAPUI5 application written in MVC
I have a view called oPage4:
var landscapePage = new sap.m.Page({
title : "Landscape Name",
showNavButton : true,
navButtonPress : [oController.back,oController],
footer : new sap.m.Bar({
id : 'landscapePage_footer',
contentMiddle : [
new sap.m.Button({
}),
new sap.m.Button({
})
]
}),
});
oLandscapePageTable = new sap.m.Table("landscape", {
inset : true,
visible : true,
getIncludeItemInSelection : true,
showNoData : false,
columns : [ new sap.m.Column({
styleClass : "name",
hAlign : "Left",
header : new sap.m.Label({
})
}) ]
});
landscapePage.addContent(oLandscapePageTable);
return landscapePage;
then inside page1 controller I want to add a columnlistitem to the table of page 4.
var oPage4 = sap.ui.getCore().byId("p4");
var landscapePageRow = new sap.m.ColumnListItem({
type : "Active",
visible : true,
selected : true,
cells : [ new sap.m.Label({
text : something
}) ]
});
oPage4.getContent().addItem(landscapePageRow);
it doesn't work. please show me how to do so?
Ok, I think I understood your problem now. In general I would avoid calling the page and doing manipulations on it from another view. However, it is absolutely possible:
Additional functions in your view
You can extend your page4 with some more functions that can be called from outside like this:
sap.ui.jsview("my.page4", {
createContent : function() {
this.table = ...
...
},
addColumnListItem : function(columnListItem) {
// add it to the table calling this.table ...
}
}
From another view you´re now able to call this function like this:
var page4 = sap.ui.jsview("my.page4");
page4.addColumnListItem(page4, columnListItem);
Attention: The page4 object itself doesn´t point to the control you´re returning but to the the view instance itself. You will notice this, if you log the page4 object to the console. This is why you have to add functions like described.
Some other approaches would be to use the EventBus like described here to publish and subscribe to events. Since you´ve asked for it let me show you how you could do it:
Using the EventBus
The main intention is, that one can subscribe to a particular event and others can publish such events to the eventbus. Let me give you an example:
Subscribing to the EventBus:
var eventBus = sap.ui.getCore().getEventBus();
eventBus.subscribe("channel1", "event1", this.handleEvent1, this);
Of course you can name your channel and events as you wish. The third parameter indicates the function, that will be called in case of published events. The last paramter is the scope 'this' will point to in the given function.
Your handleEvent1 function could look like this:
handleEvent1 : function(channel, event, data) {
var listItem = data.listItem
}
Publishing events to the EventBus:
var columnListItem = ...
var eventBus = sap.ui.getCore().getEventBus();
eventBus.publish("channel1", "event1",
{
listItem : columnListItem
}
);
One more option you have is to make the columnListItems depending on a model. Like everytime it depends on your actual architecture and data.
Let me know if this solved your problem or if you need some more information.
I'm hoping someone can offer help in this. I have a Kendo grid in a html document (no MVC), and am wanting to change the class of the entire row on row select. I have tried various approaches, still with no luck. I am currently at:
// within kendo grid definition - grid called '#grid'
change: function (e) {
$("#grid tbody").find("tr[k-state-selected]").css("color", "black");
var id = $("#grid").closest("tr").css("color", "black");
CallDocument(this._data[0]);
},
The function CallDocument is being fired, and so I know I can at least get to the function.
EDIT: Here is the solution that I came up with, and thanks to everyone
change: function (e) {
$("#grid tbody").find("tr.k-state-selected").attr("class", "detail read k-state-selected");
},
I needed to use the 'tr.k-state-selected' form, and change using attr in order to change the set of classes.
To mark every visited row as selected, you might add a CSS class on change event.
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : false,
pageable : true,
selectable: true,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" },
{ field: "City", width: 200 }
],
change : function (e) {
this.select().addClass("ob-selected");
}
}).data("kendoGrid");
The class ob-selected stays when you move to another cell since this does nothing to do with KendoUI.
Example here : http://jsfiddle.net/2TGLp/1/
The only question is that it does not stay selected if you apply filters, change to a different page... but not sure if this is important for you.
I override my Kendo styles using both css and javascript (depending on the scenario).
CSS:
.k-state-selected {
color: black;
}
Javascript/jQuery:
$('k-state-selected').css('color', '#000000')
I am creating a kendo chart that can have multiple datasets.
I am creating a chartOptions object that is only being manipulated by referencing the properties and is not manipulated through Kendo functionality. This is done by the following code:
var chartOptions = {
theme: "",
seriesDefaults: {
type: "line"
},
title: {
text: ""
},
legend: {
position: "bottom"
},
series: "",
categoryAxis: {
field: "category"
}
};
function createChart() {
$("#chart").kendoChart(
$.extend(true, {}, chartOptions)
);
}
I also have the user defining which datasets they want. The choose their datasets and create their chart. The chart is then rendered but missing its categoryAxis data.
I am setting the series data (the data comes from the server, but is available for example) in the following way:
dataSetContents.Series = {"Series":[{"name":"2009 Data","data":[{"category":"2008","value":18159},{"category":"2007","value":315},{"category":"2009","value":8}]},{"name":"2008-2010","data":[{"category":"2010","value":750},{"category":"2009","value":2980},{"category":"2008","value":4135},{"category":"2007","value":55}]}]}
chartOptions.series = dataSetContents.Series;
I figured out the reason why I was losing my categories. It has to do with the multiple series, the way to fix this by setting the categoryAxis. This can be done by passing the array of categories like this:
chartOptions.categoryAxis = { categories: [2007,2008,2009,2010] };
I would like to know how to add itemmouseup listener of an chart's series into controller?
My controller's init method is as follows :
init: function() {
this.control({
'candidateDistribution > treepanel' : {
itemclick: this.treeStoreItemClickHandler
},
'#candidateDistributionButton' : {
click: this.candidateDistributionButton_ClickHandler
},
'competitorAnalysis #slaWiseEmprDistriGrid series': {
itemmouseup: this.sLA_ItemMouseUpEventHandler
}
});
},
In this case, itemmouseup event handler of organizationAnalysis #sLAWiseEmprDistriGrid series is not working but event handlers for rest of the things are working fine.
I tried to change Component Query to competitorAnalysis > #slaWiseEmprDistriGrid series or to competitorAnalysis > #slaWiseEmprDistriGrid[series] but its not working.
I had to add this itemmouseup event handler into code of chart's series which is working just fine but I think its breaking MVC pattern.
Code for my chart is as follows :
xtype: 'chart',
itemId: 'slaWiseEmprDistriGrid',
store: 'SLAWiseCompetitorDistribution',
flex: 2,
animate: true,
legend: {
position: 'right'
},
insetPadding: 25,
series: [{
type: 'pie',
field: 'empCount',
showInLegend: true,
listeners: {
'itemmouseup': function(item) {
var record = item.storeItem;
var slaWiseEmpListStore = Ext.data.StoreManager.lookup('SLAEmployerList');
slaWiseEmpListStore.proxy.extraParams['paramFirstDimensionValue']= record.get('name');
serviceLineWiseEmpListStore.load();
}
}
}] // end of series configuration
So I would like to know why this itemmouseup event handler is not working in controller?
Also in future I want to convert this app into web desktop like application, but I am not able to find information/documentation/tutorial on extjs documentation site. Where can I get tutorial/documentation about developing web desktop application?
Thanks in Advance !
You could setup this event in controller in 2 steps.
Add listener to your chart render event
In this listener setup your series events.
Regarding desktop application - I only can suggest looking into this example: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/desktop/desktop.html
Let's say I have a grid with multiselect option on, when user selects 4 lists and wants to get the values ( alerted on screen) how would I do that? And how would I disable buttons untill at least one list is selected?
All questions you've asked are answered many times already. Also there are good ExtJS examples on sencha.com. For example list view grid shows multiple select and editable grid with writable store shows button enable on click. But THE MOST important is documentation! Let me explain functionality on following code. Most of it is from list view example.
This grid gets JSON from list.php which has following structure
{"authors":[{"surname":"Autho1"},{"surname":"Autho2"}]}
And the grid:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*'
]);
Ext.onReady(function(){
// Here i've definned simple model with just one field
Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: ['surname']
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'ImageModel',
proxy: {
type: 'ajax',
url: 'list.php',
reader: {
type: 'json',
root: 'authors'
}
}
});
store.load();
var listView = Ext.create('Ext.grid.Panel', {
id: 'myPanel', // Notice unique ID of panel
width:425,
height:250,
collapsible:true,
renderTo: Ext.getBody(),
store: store,
multiSelect: true,
viewConfig: {
emptyText: 'No authors to display'
},
columns: [{
text: 'File',
flex: 50,
// dataIndex means which field from model to load in column
dataIndex: 'surname'
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
// This button will log to console authors surname who are selected
// (show via firebug or in chrome js console for example)
text: 'Show selected',
handler: function() {
// Notice that i'm using getCmp(unique Id of my panel)
// to get panel regerence. I could also use
// this.up('toolbar').up('myPanel')
// see documentation for up() meaning
var selection = Ext.getCmp('myPanel').getSelectionModel().getSelection();
for (var i=0; i < selection.length; i++) {
console.log(selection[i].data.surname);
}
}
},{
text: 'Disabled btn',
id: 'myHiddenBtn', // Notice unique ID of my button
disabled: true // disabled by default
}]
}]
});
// Here i'm waiting for event which is fired
// by grid panel automatically when you click on
// any item of grid panel. Then I lookup
// my button via unique ID and set 'disabled' property to false
listView.on('itemclick', function(view, nodes){
Ext.getCmp('myHiddenBtn').setDisabled(false);
});
});
I didn't knew how to do this from top of my head, but I used documentation and the result works ;-). See Grid panel docs for more information.