can I dynamically change "back button" text in navigation view ?? Please share sample code around the same.
I don't want to use :useTitleForBackButtonText - as my title has special characters that appear in the back button.
How do I manually set the back button text - something like
this.getNavBar().getbackbutton().setText ???
I tried
this.getAppNav().getNavigationBar().setBackButton('{'align: 'left', ui: 'back', hidden: true'}')
it gives a "unexpected identifier" error
http://docs.sencha.com/touch/2.3.1/#!/api/Ext.navigation.Bar-cfg-backButton give more info on setBackButton method that is private !!
I created top navigation button as view in my app
TopNavigationView
Ext.define('MyApp.view.TopNavigationView', {
extend: 'Ext.Panel',
xtype: 'topnavigationview',
requires: [
'Ext.TitleBar',
'Ext.Img'
],
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype:'toolbar',
docked:'top',
height: 44,
scrollable: false,
layout:{
type:'hbox',
pack:'center',
align:'center'
},
items:[
{
xtype:'button',
iconCls: 'settings',
name: 'btnSetting'
},
{
xtype:'button',
cls: 'btnBackCls',
name: 'btnBack'
},
{
xtype:'spacer'
},
{
xtype:'label',
name: 'lblViewDescription'
},
{
xtype:'spacer'
},
{
xtype:'button',
cls: 'btnLogoutCls',
name: 'btnLogout'
}
]
}
]
},
initialize: function() {
var me = this;
me.callParent(arguments);
}
});
TestController
I created the function, which would dynamically change the title bar / Show or hide the backbutton
setTopNavigationBarValues : function() {
//Configure top navigation bar
var lblViewDescriptionValue = Ext.ComponentQuery
.query('label[name=lblViewDescription]');
for (var i = 0; i < lblViewDescriptionValue.length; i++) {
lblViewDescriptionValue[i].setHtml('TEST');
lblViewDescriptionValue[i].setCls('toolbarTitleCls');
}
var btnBack = Ext.ComponentQuery.query('button[name=btnBack]');
for (var j = 0; j < btnBack.length; j++) {
btnBack[j].show();
}
var btnSetting = Ext.ComponentQuery.query('button[name=btnSetting]');
for (var j = 0; j < btnSetting.length; j++) {
btnSetting[j].hide();
}
},
By calling this.setTopNavigationBarValues(); inside the controller
Finally include this topnagivationview through out your project i.e inside the views
Subview.js
{
xtype: 'topnavigationview'
},
Related
I want to see information when I click to row in the table. I tried #click, router:to but it didn't help. Maybe I should try to make list item instead of data-table?
html code:
<v-data-table v-scroll:#scroll-target="onScroll"
:items-per-page="-1"
hide-default-footer
dense
:headers="headers"
:items="companies"
item-key="name"
class="elevation-1"
></v-data-table>
Vue code below:
<script>
export default {
data: () => ({
companies: [
{
name: "Company",
status: "Active"
},
{
name: "Company2",
status: "Active"
},
{
name: "Company3",
status: "Active"
},
],
headers: [
{
text: "Company name",
align: "start",
sortable: false,
value: "name"
},
{ text: "Status", value: "status" }
],
methods: {
onScroll (e) {
this.companies = e.target.scrollTop
},
}
})
};
</script>
I am using vuetify library. Maybe this is a problem of vuetify and it has different command to make clickeble row in data-table?
Checkout the vuetify data table events: https://vuetifyjs.com/en/components/data-tables/
The first one there is click:row.
So you would have something like:
// template
<v-data-table #click:row="rowClicked"></v-data-table>
// script
export default {
methods: {
rowClicked (item) {
// show something or do your router stuff here
}
}
}
Hope that helps.
I have a problem using the Quill Editor. I want to show the inserted content of the Quill editor in another HTML Tag.
I tried to use the following code:
configureQuill() {
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
[{ 'align': [] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['image', 'formula']
];
const options = {
modules: {
toolbar: toolbarOptions,
formula : true,
imageResize: {}
},
placeholder: 'Hier goes the content...',
theme: 'snow'
};
this.q = new Quill('#editor2', options);
this.q.on('editor-change', (eventName, ...args) => {
if (eventName === 'text-change') {
this.contentHtml = this.q.root.innerHTML;
}
});
}
And I am using the contentHTML variable to put the HTML content into a div Container:
<div [innerHTML]="contentHtml">
The content is shown but I think the css styles are not used for the content in the div container:
Everything works fine except the formula, the text-alignment and the text size.
I have solved the problem by adding the following css-class to my div-container: ql-editor.
Furthermore I changed the way of pasting the HTML content as follows:
this.q.on('editor-change', (eventName, ...args) => {
if (eventName === 'text-change') {
const justHtmlContent = document.getElementById('contentHtml');
this.contentHtml = this.q.root.innerHTML;
justHtmlContent.innerHTML = this.contentHtml;
}
});
http://dojo.telerik.com/eWakO
Kendo Grid - here how should i modify above code to remember selected row? Example, if i have highlighted 4th row on 1st page and then scrolls to pages and come back to 1st page, then 4th row should be highlighted.
Thanks
Datha
Here is an example from the documentation:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/persist-row-selection-while-paging
It relies on the change and dataBound events to save and restore selected rows by their IDs.
<div id="grid"></div>
<script>
$(function () {
var selectedOrders = [];
var idField = "OrderID";
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
id: "OrderID",
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 400,
selectable: "multiple",
pageable: {
buttonCount: 5
},
sortable: true,
filterable: true,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
],
change: function (e, args) {
var grid = e.sender;
var items = grid.items();
items.each(function (idx, row) {
var idValue = grid.dataItem(row).get(idField);
if (row.className.indexOf("k-state-selected") >= 0) {
selectedOrders[idValue] = true;
} else if (selectedOrders[idValue]) {
delete selectedOrders[idValue];
}
});
},
dataBound: function (e) {
var grid = e.sender;
var items = grid.items();
var itemsToSelect = [];
items.each(function (idx, row) {
var dataItem = grid.dataItem(row);
if (selectedOrders[dataItem[idField]]) {
itemsToSelect.push(row);
}
});
e.sender.select(itemsToSelect);
}
});
});
</script>
I have json data with value but instead of display the value i want to display the count of value which is not in my json data. How to make var like select count(*) from ecgvalue?.
This is my code
<script type="text/javascript">
$(function () {
var processed_json = new Array();
$.getJSON('http://localhost:8080/query', function (data) {
// Populate series
for (i = 0; i < data.length; i++) {
processed_json.push([data[i].id_data, data[i].ecgvalue]);
}
// draw chart
$('#container2').highcharts({
chart: {
type: "column"
},
title: {
text: "ECG Graph"
},
xAxis: {
type: 'category',
allowDecimals: false,
title: {
text: "Id Data"
}
},
yAxis: {
title: {
text: "Value"
}
},
series: [{
name: 'ECG value',
data: processed_json
}]
});
});
});
</script>
and this is my json
[{"id_data":1,"ecgvalue":3.3871},{"id_data":2,"ecgvalue":1.56892},{"id_data":3,"ecgvalue":1.60802},{"id_data":4,"ecgvalue":2.09677},{"id_data":5,"ecgvalue":1.99902},{"id_data":6,"ecgvalue":1.97947}]
I want to change value of y axis to count from ecgvalue, is that possible?
If by count you mean how many items are in the processed_json array (as you can with the SQL statement count(*)), then all you need is simply processed_json.length.
Here's a working example using the data you provided: https://jsfiddle.net/brightmatrix/t8pv7csn/
You can then use the processed_json.length however you wish in your code and/or chart options.
<script type="text/javascript">
$(function () {
var processed_json = new Array();
$.getJSON('http://localhost:8080/query', function (data) {
// Populate series
var ecgCount = 0;
for (i = 0; i < data.length; i++) {
ecgCount += data[i].ecgvalue
processed_json.push([data[i].id_data, data[i].ecgvalue]);
}
// draw chart
$('#container2').highcharts({
chart: {
type: "column"
},
title: {
text: "ECG Graph"
},
xAxis: {
type: 'category',
allowDecimals: false,
title: {
text: "Id Data"
}
},
yAxis: {
title: {
text: ecgCount
}
},
series: [{
name: 'ECG value',
data: processed_json
}]
});
});
});
</script>
Is this What you required.
I am creating a linechart which contain data from different JSON files, and the codes below is working but i'd like to know how may i group up these JSON data from different apis into one by a for each loop to shorter the codes.
//consider the vol1- vol10 looks like var vol1 = ['1123', '1234','5436'];
//because i have other method the convert it to an arrray
//Xvol1 is just something like Xvol1=["Jan","Feb","Mar"]
$('#trendChart').highcharts({
chart: {
type: 'spline'
},
title: {
text: false
},
xAxis: {
categories : Xvol1
},
yAxis: {
title: {
text: 'Volume',
},
min: 0
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: $(".profileName0").html(),
data: vol1
},
{
name: $(".profileName1").html(),
data: vol2
},
{
name: $(".profileName3").html(),
data: vol3
},
{
name: $(".profileName2").html(),
data: vol4
},
{
name: $(".profileName4").html(),
data: vol5
},
{
name: $(".profileName5").html(),
data: vol6
},
{
name: $(".profileName6").html(),
data: vol7
},
{
name: $(".profileName7").html(),
data: vol8
},
{
name: $(".profileName8").html(),
data: vol9
},
{
name: $(".profileName9").html(),
data: vol10
},
]
});
UPDATE 1:
I have tried but it doesn't seem like working.
var series = [];
for(i = 0; i < 10; i++){
series.push({name: $('.profileName'+i+'"').html(),, data: vol[i]});
}
$('#trendChart').highcharts({
chart: {
type: 'spline'
},
title: {
text: false
},
xAxis: {
categories : Xvol1
},
yAxis: {
title: {
text: 'Volume',
},
min: 0
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [series]
});
});
After i generate the data by a for loop successfully, i am now struggle about how to update the data, i tried to update it using setData() but seem it needs so adjustment in order to work.
var seriesData = [vol1, vol2, vol3, vol4, vol5, vol6 , vol7, vol8, vol9, vol10]; // add all the vols. I have used 2 for example
var series = [];
for(i = 0; i < 5; i++){
series.push({name: names[i], data: seriesData[i]});
}
var trendChart12w = $('#trendChart').highcharts();
trendChart12w.series[0].setData(series);
Solution :
var dataCounting = $(".DataCount").last().html();
var seriesData = [vol1, vol2, vol3, vol4, vol5, vol6 , vol7, vol8, vol9, vol10]; // add all the vols. I have used 2 for example
var trendChart1y = $('#trendChart').highcharts();
trendChart1y.xAxis[0].setCategories(Xvol1);
for(i = 0; i < dataCounting; i++){
trendChart1y.series[i].setData(seriesData[i]);
}
You can an array of the names like var names = [all the names] and an array of your data like var seriesData = [vol1, vol2...]
And then do
var series = [];
for(i = 0; i < names.length; i++){
series.push({name: names[i], data: seriesData[i]});
}
And then set this as your chart series.
UPDATE
Do this outside of your chart.
var seriesData = [vol1, vol2]; // add all the vols. I have used 2 for example
var names = [$(".profileName0").html(), $(".profileName1").html()] // add all names
var series = [];
for(i = 0; i < names.length; i++){
series.push({name: names[i], data: seriesData[i]});
}
And then in your chart, where you set the series, just do
series: series