I need to load items (menu) via ajax but do not understand how...
trying to do like this:
var tb = Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'top-menu',
autoLoad: {
url: '/index/tullbar',
renderer: 'component',
params: {
userId: 1
}
},
layout: {
overflowHandler: 'Menu'
}
});
});
response:
[
{
"text": "test",
"menu": {
"text": "asdf",
"handler":"handleAction.createDelegate(window)"
}
}
]
but handler is not working.
Can anybody give the working example.
I haven't used element loader before so I would make a wild guess that you should specify a renderer function according to http://docs.sencha.com/ext-js/4-0/#/api/-cfg-renderer:
var tb = Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'top-menu',
autoLoad: {
url: '/index/tullbar',
renderer: function(loader, response) {
var menuItems = Ext.decode(response.responseText);
tb.items.add(menuItems);
},
params: {
userId: 1
}
},
layout: {
overflowHandler: 'Menu'
}
});
Related
I am try to create vue barchart & using apexChartData.
Here is my code
export default{
components: {
VueApexCharts
},
data () {
return {
barChart: {
series: [{
data: []
}],
chartOptions: {
plotOptions: {
bar: {
horizontal: true
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: []
}
}
}
},
methods: {
myFunction() {
this.$vs.loading();
axios.get("/api/auth/nameofapi").then(response => {
this.barChart.series[0].data = response.data[0]['data'];
this.barChart.chartOptions.xaxis.categories = response.data[1]['categories'];
this.$vs.loading.close();
}).catch(error => {
this.$vs.loading.close()
this.errorResponse(error);
});
}
},
mounted () {
this.myFunction();
}
}
My API Response payload like
[{"data":[4,1]},{"categories":["xyz","abc"]}]
After doing this bar chart is not loading, i am not sure where i am doing mistake, sorry for repeating this post if already exist but i just post what i am facing.
Any Help
Thanks in advance
I would like to implement a simple line graph with ajax in which only two points
x will be the hours and y will be the count of calls.
CODE :
<script>
function getData() {
$.ajax({
type:'POST',
url: "http://localhost/demo_chart/test.php",
dataType: 'JSON',
success: function(response_data) {
new_data = $.map(response_data, function(i){
return {x: i['date'],y: i['count']};
});
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Count vs. Time'
},
xAxis: {
title: {
text: 'Time'
},
type: 'Time',
},
yAxis: {
title: {
text: 'Count'
}
},
series: [{
name: 'Test',
data: new_data
}]
});
}
})
}
$(document).ready(function () {
getData();
})
</script>
Output of http://localhost/demo_chart/test.php is same as below :
{"date":["13:00:00","13:00:01","13:00:02","13:00:03","13:00:04"],"count":["1","2","3","4","2"]}
But still graph is not generating. So i would like to know what is the problem here.
Anyone like to share some hint which can resolve this problem ?
Expected output is :
X- axis : show all date
Y-axis : show count
You need to correct your mapping function, for example:
var response = {
"date": ["13:00:00", "13:00:01", "13:00:02", "13:00:03", "13:00:04"],
"count": ["1", "2", "3", "4", "2"]
};
new_data = $.map(response.date, function(el, index) {
return {
name: el,
y: parseInt(response['count'][index])
};
});
Additionally, with that data structure, I recommend you to use category axis type.
xAxis: {
...,
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/ptx6fy2q/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
I want to hide a record on Grid that returns from server.
I've setted a filter on store and can reach that specific data but how I'll handle to hide/ignore this record?
fooStore: {
....
filters: [
function(item) {
let me = this;
let theRecord = item.data.status === MyApp.STATUS; //true
if (theRecord) {
console.log(theRecord); //True
console.log("So filter is here!!")
//How to hide/ignore/avoid to load this specific data record to load Grid??
}
}
]
},
Returned JSON;
{
"success": true,
"msg": "OK",
"count": 3,
"data": [
{
//Filter achives to this record and aim to hide this one; avoid to load this record.
"id": 102913410,
"status": "P"
},
{
"id": 98713410,
"status": "I"
},
{
"id": 563423410,
"status": "A"
}
]
}
I can't save my fiddle cause i don't have sencha forum's account so i give you my code :
Ext.application({
name : 'Fiddle',
launch : function() {
var model = Ext.create('Ext.data.Model', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'status', type: 'string'},
]
});
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: model,
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
filters: [function(item) {
if (item.data.status === "P") {
return true;
}
else {
return false;
}
}],
listeners: {
load: {
fn: function() {
console.log(this.getRange());
}
}
}
});
}
});
Also i create data.json like this :
{
"success": true,
"msg": "OK",
"count": 3,
"data": [{
"id": 102913410,
"status": "P"
}, {
"id": 98713410,
"status": "I"
}, {
"id": 563423410,
"status": "A"
}]
}
I thinks it's near to you'r code and after the loading of the store the filter work as you can this :
Here is sencha fiddle link : https://fiddle.sencha.com/#view/editor
If this can't work, i don't understand what the fuck doing...
I am trying to fill the Datatable row content dynamically using Ajax Post. But it loaded the content at first shot correctly but when I try to fill content once again it returns error Can't instantiation Datatable. .
We refereed https://datatables.net/examples/data_sources/js_array.html For datatable row content.
Can Any one please help Us.
$.ajax({
url : SITE_ROOT_DIR+"ajaxFunction.php?Exportedinvoices=1&daterange="+daterange+"&fromDate="+fromDate+"&toDate="+toDate,
type : 'post',
cache : false,
success : function(data){
var message = JSON.parse(data);
var pLen,i;
pLen=message.length;
if(pLen>0){
var carter=[];var carterarr=[];
for(i=0;i<pLen;i++)
{
var company_name=message[i]['company_name'];
var salesOrderID=message[i]['salesOrderID'];
var salesOrderDate=message[i]['salesOrderDate'];
var product_code=message[i]['product_code'];
var quantity=message[i]['quantity'];
var deliveryDate=message[i]['deliveryDate'];
var ponuber=message[i]['ponuber'];
var TermsRefFullname=message[i]['TermsRefFullname'];
var ShipMethodFullName=message[i]['ShipMethodFullName'];
var SalesRepFullName=message[i]['SalesRepFullName'];
var ItemsalesTaxRefFullname=message[i]['ItemsalesTaxRefFullname'];
var CustomerMsgRefFullName=message[i]['CustomerMsgRefFullName'];
var val=company_name+'*'+salesOrderID+'*'+salesOrderDate+'*'+product_code+'*'+quantity+'*'+deliveryDate+'*'+ponuber+'*'+TermsRefFullname+'*'+SalesRepFullName+'*'+ShipMethodFullName+'*'+ItemsalesTaxRefFullname+'*'+CustomerMsgRefFullName;
var carterarr =carterarr+val+'#';
var carter=carterarr.slice(0, -1);
}
var arlene3 = carter.split("#");
var farray=[];var Aarray=[];var myarray=[];
for(var i=0;i<arlene3.length;i++){
var arraynow=arlene3[i];
Aarray=arraynow .split("*");
myarray.push(Aarray);
}
dataSet=myarray;
$('#example1').DataTable( {
destroy: true,
data: dataSet,
columns: [
{ title: "CustomerRefFullName" },
{ title: "InvoiceRefNumber" },
{ title: "TxnDate" },
{ title: "ItemRefFullName" },
{ title: "Quantity" },
{ title: "DueDate" },
{ title: "PoNumber" },
{ title: "TermsRefFullname" },
{ title: "SalesRepFullName" },
{ title: "ShipMethodFullName" },
{ title: "ItemsalesTaxRefFullname" },
{ title: "CustomerMsgRefFullName" },
],
"ordering": false,
"searching": false,
"paging": false,
"info": false,
} );
$('.tabheading').css("display","block");
}
else
{
alert("No datas found");
}
}
});
I have the following Kendo MVVM grid:
<div id="permissionTypeGrid" data-role="grid"
data-sortable="true"
data-scrollable="true"
data-editable="true"
data-toolbar="['create', 'save', 'cancel']"
data-bind="source: permissionTypes"
data-auto-bind="true"
data-columns="[
{ 'field': 'PermissionType', 'width': 60 },
{ 'field': 'Description', 'width': 300 },
{ 'field': 'DisplayOrder', 'width': 60 },
{ 'command': [{name: 'destroy', text: 'Delete'}], 'width': 40 }
]">
</div>
And the following view model:
self.permissionTypeGrid = kendo.observable({
isVisible: true,
permissionTypes: new kendo.data.DataSource({
schema: {
parse: function (results) {
var permissionTypes = [];
for (var i = 0; i < results.Data.Data.length; i++) {
var permissionType = {
PermissionType: results.Data.Data[i].SystemPermissionTypeCode,
Description: results.Data.Data[i].SystemPermissionTypeDescription,
DisplayOrder: results.Data.Data[i].DisplayOrder
};
permissionTypes.push(permissionType);
}
return permissionTypes;
}
},
transport: {
read: {
url: "/api/ServiceApi?method=Ref/SystemPermissionTypes",
},
create: {
url: "/api/ServiceApi?method=Ref/SystemPermissionTypes"
},
update: {
url: "/api/ServiceApi?method=Ref/SystemPermissionTypes"
},
destroy: {
url: "/api/ServiceApi?method=Ref/SystemPermissionTypes"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
}
})
});
kendo.bind($("#permissionTypeGrid"), self.permissionTypeGrid);
Transport.read works fine, but the url for transport.create is never executed, nor is the parameterMap function. If I add a new record to the grid and then click "Save Changes", shouldn't the parameterMap function always be called? Also, an http request for the read is made as expected, but none gets generated for a create.
You schema needs and ID.
If you add the line model: { id: "DisplayOrder" }, after schema your create will begin firing when you click save changes.
Of course this is not likely to be the field that you will want to use for an ID but it should get you working.
schema: {
model: { id: "DisplayOrder" },
parse: function (results) {
...
}