Here is my select field. We can see that the options are SI,American and Imperial
{
xtype: 'selectfield',
flex: 1,
itemId: 'units_Selector',
maxHeight: 50,
label: 'Units',
options: [
{
text: 'SI',
value: 'SI'
},
{
text: 'American',
value: 'American'
},
{
text: 'Imperial',
value: 'Imperial'
}
],
usePicker: false,
listeners: [
{
fn: function(element, eOpts) {
var unit = Ext.getStore('configstore').last().get('Units');
this.suspendEvents();
this.setValue(unit);
this.resumeEvents();
},
event: 'painted'
}
]
},
Here what I see when using my app...
OUPS seems like SI is displayed has International?
FYI - International was the option's name I gave this option at first. I decide to change it but my app seems to disagree with me on this one ....
Here is a console.log() of my selectfield's options
And here is the funniest part, my code.js file to see that it does save to it correctly from sencha architect
Would anyone know how to repair that problem...?
Answer is dumb...
Seriously, if you have multilanguage app... double check you aint modifing the value field -_-< when updating the language (text field).
found the problem by changing the itemId to something else to see who what changing the value of this select field. (Automaticly created an error and gave me a code line to find it)
Related
After an initial load of a chart I want to append Annotations on the go by updating the chart.
Currently I have an update function which append data to the chart:
const chart = this.chart.getChart();
const serie = this.getSerie();
chart.series[0].setData(serie.list);
Is there a way where I can append Annotations in a similar way?
At the moment I insert annotations into the initial chart config:
annotations: [{
xAxis: 0,
yAxis: 0,
xValue:1515571888000.3572,
yValue: 200,
anchorX: 'left',
anchorY: 'top',
title: 'Annotation text',
}]
But i'm interested in being able to add annotations as I update the chart.
Currently i'm using react-highcharts v. ^11.0.0 from npm.
Refer to this live demo: http://jsfiddle.net/kkulig/gxv5f3xn/
You can use Chart.removeAnnotation() and Chart.addAnnotation() to perform dynamic updates (Chart.update() won't work). These methods are not docummented in the API yet.
annotations: [{
id: 'anno1',
labels: [{
point: 'first',
format: '1'
}, {
point: 'second',
format: '2'
}]
}]
(...)
chart.removeAnnotation('anno1');
chart.addAnnotation({
id: 'anno2',
labels: [{
point: 'first',
format: '3'
}, {
point: 'second',
format: '4'
}]
});
When the series is being hidden via legend item click the error occurs - it's a bug (the official fix for it should be implemented soon). To prevent this error from happening I used modified core functions (lines 1 - 39 in the demo).
I'm trying to add some icons inline to the TreeView data items, however the k-template directive does not seem to be rendering anything.
I base this off of the online docs at
http://demos.telerik.com/kendo-ui/treeview/angular
and here's a plunkr of what I'm trying to do:
treeview plunkr
My HTML (with a simple test)
<div id="treeview" kendo-tree-view="nav.treeview"
k-options="nav.treeOptions"
k-data-source="nav.reportsTreeDataSource"
k-on-change="nav.onTreeSelect(dataItem)">
<span k-template>{{dataItem.text}} TEST THIS TEMPLATE !!!</span>
</div>
and here's a snippet of my dataSource coming from my datacontext service:
function getReportsTree() {
var reportsJson = [
{
id: 1, text: "Standard", expanded: false, spriteCssClass: "rootfolder", checkChildren: true, items: [
{ id: 3, text: "MTM Aggr", reptName: "MTM Aggr", spriteCssClass: "folder" },
{ id: 4, text: "Member Aggr", reptName: "Member Aggr", spriteCssClass: "folder" }
]
},
{
id: 30, text: "Hierarchy", expanded: false, spriteCssClass: "rootfolder", checkChildren: true, items: [
{ id: 31, text: "Ctpy Hrchy", reptName: "CTPYHIER", withHierarchy: 'true' },
{ id: 32, text: "Ctpy/BkgLocation Hrchy", reptName: "CTPYHIER_BKG_LOC", withHierarchy: 'true' }
]
}
];
return $q.when(reportsJson);
}
Image showing the rendered tree, where the template does NOT render :
I need to know if I'm missing some key piece here, or do I have incorrect formatting.
thank you in advance,
Bob
**** UPDATE ****
I'm now checking to see if my Kendo UI library is a few versions behind. It may have something to do with my issue.
A Kendo UI lib update to 2014.3.1308 was necessary to get the k-template option embedded into the treeview.
However I do find a minor bug, even on their demo website - when you expand a tree node, that same level's text becomes the literal {{dataItem}}.
I have 2 grids showing the same data with 2 different sorts:
$scope.aGridOptions = {
data: 'aData',
columnDefs: [
{ displayName: 'Column 1', field: 'col1',},
{ displayName: 'Column2', field: 'col2',}],
sortInfo: {
fields: ['col1'], directions: ['asc']
},
};
$scope.bGridOptions = {
data: 'aData',
columnDefs: [
{ displayName: 'Column 1', field: 'col1',},
{ displayName: 'Column2', field: 'col2',}],
sortInfo: {
fields: ['col1', 'col2'],
directions: ['asc', 'asc']
},
};
As the plunker shows, both sort the same way, only by column 1. Not only that, but ng-grid 2.0.7, trashes by sortInfo object on bGridOptions to shorten the sort to only one column.
http://plnkr.co/edit/riDzDcS3YSJrQrULwL2j?p=preview
I can't seem to find where it is destroying my sort options. How do I get it to sort by 2 columns and not have it trash my sortInfo?
Below is the initial answer I typed, which seemed to work as I played around in your Plunk; however, when I went to make a clean copy of the Plunk it stopped working. It sounds like this issue may be resolved in 2.0.8 though, see Issue #748 and Issue #732.
My initial response, but not working for me now...
Try changing the sortInfo for each grid to look like this:
$scope.aGridOptions.sortInfo = {
fields: ['col1'],
directions: ['asc'],
columns: [0]
};
$scope.bGridOptions.sortInfo = {
fields: ['col1', 'col2'],
directions: ['asc', 'asc'],
columns: [0, 1]
};
I'm trying to render a table view with four columns, 'name', 'birthday', 'gender', 'married', but
a) they columns aren't showing up at all
b) I'm not even sure if I am passing them correctly, because when I console.log table.options the columns property is rendered as "empty":
Object {columns: Array[0], emptyContent: "no entries", onItemClick: function, sortable: false, onSort: null}
I've tried this:
var table = new Backbone.UI.TableView({
model: people,
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" } },
{ title: "Birthday", content: "birthday" } },
{ title: "Married", content: "married" } }
]
});
And this:
var table = new Backbone.UI.TableView({
model: people,
options: {
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" },
{ title: "Birthday", content: "birthday" },
{ title: "Married", content: "married" }
]
}
});
The source code change is adding the options as mu is too short said. Change the initialize method of the Backbone.UI.TableView object to be the following within the source code:
initialize : function(options) { //add parameter
Backbone.UI.CollectionView.prototype.initialize.call(this, arguments);
$(this.el).addClass('table_view');
this._sortState = {reverse : true};
this.options = _.extend({}, this.options, options); //Add this line
}
I'm sure there might be a better place to put this but I'm just going through tutorials to learn some advanced backbone stuff considering the documentation does not match the current version I would shy away from using the library in production as of right now. Hopefully it is fixed in the future.
I have set up an ExtJs calendar. However the store gets loaded 4 times initially even though I have not called the store.load method. I'm just wondering where this is getting called from? As it is also sending start and end dates in the wrong format to the server. i.e. it sends dates in the format m/d/y whilst the server expects d/m/y?
this.eventStore = new Ext.data.JsonStore({
id: 'eventStore',
root: 'Data.items',
proxy: new Ext.data.HttpProxy({
url: AppRootPath + 'Calendar/GetCalendarData',
method: 'POST'
}),//proxy
fields: [
{name:'StartDate', mapping: 'start', type: 'date', dateFormat: 'd F Y'},
{name:'EndDate', mapping: 'end', type: 'date', dateFormat: 'd F Y'},//H:i:s
{name:'Title', mapping: 'title', type: 'string'},
{name:'Notes', mapping: 'notes', type: 'string'},
{name:'CalendarId', mapping: 'cid', type: 'string'}]
});
The Calendar:
this.calendar = new Ext.calendar.CalendarPanel({
activeItem: 2,
id: 'calendar',
eventStore: this.eventStore,
calendarStore: this.calendarStore,
headerCfg: {
tag: 'center',
cls: 'x-panel-header x-unselectable'
},
monthViewCfg: {
showHeader: true,
showWeekLinks: true,
showWeekNumbers: true
},
title: 'My Calendar', // the header of the calendar, could be a subtitle for the app
listeners: {
'eventclick': {
fn: function(vw, rec, el){
alert('#EventClicked');
debugger
},
scope: this
},
'dayclick': {
fn: function(vw, dt, ad, el){
alert('#DayClicked');
},
scope: this
},
'viewchange': {
fn: function(p, vw, dateInfo){
updateTitle.apply(this, [dateInfo.viewStart, dateInfo.viewEnd]);
Ext.getCmp('app-nav-picker' + config.id).setValue(dateInfo.activeDate);
},
scope: this
},
'eventmove': {
fn: function(vw, rec){
rec.commit();
//var time = rec.data.IsAllDay ? '' : ' \\a\\t g:i a';
//this.showMsg('Event '+ rec.data.Title +' was moved to '+rec.data.StartDate.format('F jS'+time));
},
scope: this
}
}
});
I presume the load method is being called from the Calendar-all.js file. However I cant find exactly where?
Can I intercept these load calls to ensure the dates is in the correct format?
This is a bug in the Ext 3.3 example version. Each view load (month / week / day) causes a separate store load call. This (along with lots of other stuff) has been fixed in the Ext Calendar Pro version of the components (examples here). The date format is also configurable in the Pro version via the CalendarView.dateParamFormat config. You can certainly fix those things yourself, but I'd recommend that you try out the Pro version and see if it suits your needs better out of the box.
Yes you can stop that initially loading store at calender.. Its loading even thought we have made it autoload: false.
examples/calendar/src/view/AbstractCalendar.js
Line#717
comment the code
/*this.store.load({
params: {
start: Ext.Date.format(this.viewStart, 'm-d-Y'),
end: Ext.Date.format(this.viewEnd, 'm-d-Y')
}
});*/
now extra loading stop and u can execute store whenever u want. :)