I am trying to check a year value from drop down and depending on that I am setting my itemtpl. However I would like to know if this is possible . dropdownyearvalue is my drop down value which I am inserting in store and Year is a value inserted before in the same store.
{
xtype: 'container',
itemId: 'Oct',
// style: 'border-color: blue; border-style: solid;'
tpl: new Ext.XTemplate('<tpl for="month"><tpl if="status == 1 && month==1 && Year=='{dropdownyearvalue}'"><div class="planned"></div><tpl elseif="status == 2 && month==1"><div class="target"></div><tpl else><div id="nothing"></div></tpl></tpl>')
}
This is possible, you can push any data to your template using data property, just like in example.
config:{
baseCls: 'hexagonList',
records: null,
tpl: new Ext.XTemplate('<tpl for="items"><div class="item" ref="{data.urlId}"><div class="hex"></div><div class="text">{data.label}</div></div></tpl>')
},
updateRecords: function(newRecords){
this.setData({
items: newRecords.items
});
}
Related
Is there any solution to fix the localhost that runs too slow? I use XAMPP v 3.2.2.
I made highcharts with Yii 2.0, but when I try to load it http://127.0.0.1/yii2-app-basic/web/index.php?r=highcharts/index, localhost or 127.0.0.1 takes time more than 20 minutes to load the highchart. I have edited my
`httpd.conf.
I change
ServerName Localhost to ServerName 127.0.0.1:80.
I also have edited
my.ini.
I uncommented
bind-address="127.0.0.1"
I edited
config.inc.php
I change
$cfg['Servers'][$i]['host'] = 'localhost' to $cfg['Servers'][$i]['host'] = '127.0.0.1'
but localhost still being slow.
This is my highchart code in Yii 2.0
HighchartsController.php
<?php
namespace app\controllers;
use yii\web\Controller;
use app\models\Jeniskelaminreal;
use yii\helpers\Json;
class HighchartsController extends Controller
{
public function actionIndex()
{
$masuk= Jeniskelaminreal::find();
$awal = $masuk->orderBy('TahunMasuk ASC')->one()->TahunMasuk;
$akhir = $masuk->orderBy('TahunMasuk DESC')->one()->TahunMasuk;
// $data = $masuk->all();
$arr_l = [];
$arr_p = [];
$tahun = [];
for($i=$awal;$i<=$akhir;$i++){
if($awal == $i){
$jum_l = count($masuk->where(['TahunMasuk'=>$awal,'JenisKelamin'=>'Perempuan'])->all());
$jum_p = count($masuk->where(['TahunMasuk'=>$awal,'JenisKelamin'=>'Laki-laki'])->all());
}elseif($i > $awal && $i <= $akhir){
$jum_l = count($masuk->where(['TahunMasuk'=>$i,'JenisKelamin'=>'Perempuan'])->all());
$jum_p = count($masuk->where(['TahunMasuk'=>$i,'JenisKelamin'=>'Laki-laki'])->all());
}
array_push($arr_l,$jum_l);
array_push($arr_p,$jum_p);
array_push($tahun,$i);
}
$data['tahun'] = json_encode($tahun);
$data['data_p'] = json_encode($arr_p);
$data['data_l'] = json_encode($arr_l);
return $this->render('index',$data);
}
/*public function actionData()
{
return $this->render('data');
}*/
}
index.php
<?php
use app\assets\HighchartsAsset;
HighchartsAsset::register($this);
$this->title = 'Highcharts Test';
?>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div id="my-chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<?php $this->registerJs("
$(function () {
$('#my-chart').highcharts({
title: {
text: 'Jenis Kelamin',
x: -20 //center
},
xAxis: {
categories: $tahun
},
yAxis: {
title: {
text: 'Jumlah'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Laki-laki',
data: $data_l
}, {
name: 'Perempuan',
data: $data_p
}]
});
});
")?>
</div>
</div>
I think localhost becomes slow because I have tables that consist of many data records. So here I give you the information about the table that I joined.
I made view table "JeniskelaminReal". This is the query
CREATE ALGORITHM=UNDEFINED DEFINER=`root`#`localhost` SQL SECURITY DEFINER VIEW `jeniskelaminreal` AS select
`ipbmst_fakultas`.`Kode` AS `Fakultas`,
`ipbmst_departemen`.`Kode` AS `Departemen`,
`akdmst_mayor`.`Nama` AS `Mayor`,
`akdmst_mahasiswamagister1`.`NIM` AS `NIM`,
`ipbref_jeniskelamin`.`nama` AS `JenisKelamin`,
timestampdiff(YEAR,`ipbmst_orang`.`TanggalLahir`,now()) AS `Usia`,
`akdmst_mahasiswamagister1`.`TahunMasuk` AS `TahunMasuk`
from (((((`akdmst_mahasiswamagister1`
left join `akdmst_mayor` on((`akdmst_mahasiswamagister1`.`MayorID` = `akdmst_mayor`.`ID`)))
left join `ipbmst_departemen` on((`akdmst_mayor`.`DepartemenID` = `ipbmst_departemen`.`ID`)))
left join `ipbmst_fakultas` on((`ipbmst_departemen`.`FakultasID` = `ipbmst_fakultas`.`ID`)))
left join `ipbmst_orang` on((`akdmst_mahasiswamagister1`.`NIM` = convert(`ipbmst_orang`.`NIMS2Key` using utf8))))
left join `ipbref_jeniskelamin` on((`ipbmst_orang`.`JenisKelaminID` = `ipbref_jeniskelamin`.`id`))) ;
ipbmst_fakultas consists of 21 rows data
ipbmst_departemen consists of 46 rows data
akdmst_mayor consists of 166 rows data
akdmst_mahasiswamagister 1 consists of 7232 rows data
ipbref_jeniskelamin consists of 3 rows data
and this is the table that consists of so many data
ipbmst_orang consists of 70915
I'm really sorry if I put so many information here. What may I do to solve that problem? Thank you in advance
is it working while opening other pages?
try changing listening port from 80 to 8080.
and also try disableing Ipv6.
I need to create a filter on a tipical columns created with images: each field is an image with this format:
<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>
I've created a fiddle example here: fiddle
An explication:
there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).
Thanks in advance.
PD:
I'm getting data from a json, so I can't put:
<td data-search="notassigned">
directly on HTML code. As a solution, I've used createdCell (columnDefs option) as you could see on the next updated to create data-search attribute on td element fiddle.
In this one, as you could test, your previously created filter doesn't work. I've tried some solutions, but no one has worked.
Please help me again on this one. Thanks in advance.
You can make use of the datatables HTML5 data-* attributes, and then tell yadcf to rely on this dt feature with the use of html5_data
So your td will look something like
<td data-search="assigned"><img src='http://lab.onclud.com/psm/redcircle.png' class='asgn'></td>
and yadcf init will look like
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
html5_data: 'data-search',
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}]);
Notice that I used filter_match_mode: 'exact', because I used data-search="notassigned" and data-search="assigned", and since the assigned word included inside notassigned I had to tell yadcf to perform an exact search, this can be avoided if you will use unique search term in your data-search= attribute,
See working jsfiddle
Another solution as introduced by kthorngren from datatables forum is to use the following dt init code
var oTable = $('#example').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, full, meta) {
if (type === 'filter') {
return full[0].search('asgn') >=1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
} else {
return data
}
}
}],
});
and yadcf init (removed html5_data)
yadcf.init(oTable, [
{
column_number: 0,
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}
]);
third option - look here
I have a GridPanel whose columns have 'items' property set to an Ext.form.field.Trigger. I use the trigger field to work like a filter. I have a button in toolbar which should show/hide the Triggers. For this I need to get the 'items' configuration of the Column. Any ideas?
Code
{
xtype: 'gridcolumn',
dataIndex: 'title',
minWidth:100,
flex: 3,
text: 'Title',
layout: 'hbox',
items:[{
xtype: 'trigger',
autoSearch: false,
anyMatch : true
}]
}
I guess u should use ID or itemid in ur controls to get their value where ever u want.
Additionally to create filters you can execute createFilters on the filter feature if u r not getting desired output.
I have found a solution for it. Although not the best but gets the job done
Code
var columns = grid.columns;
if(grid.columns!=undefined){
for(var i =1; i<columns.length; i++){
var column = columns[i];
if(column!=undefined){
var colItems = column.items;
if(colItems!=undefined){
var colItem = colItems.items[0];
if(colItem!=undefined){colItem.setVisible(true);}
}
}
}
}
I have a problem with the result of my summary :
I have mutliple page of result and I want the sum of the ENTIRE column but in my case it give the sum for the columns of each page...
Since my english is very poor , I suppose you didn't understand anything at all lol . So I'm going to give you an example:
I have this:
page 1
total : 2
page 2
total : 5
But I want the total of the ENTIRE column in each page like this:
page 1
total : 7 (5+2)
page 2
total : 7 (5+2)
Here's my code :
Ext.applyIf(me, {
forceFit: true,
loadMask: false,
features: [{
ftype: 'summary',
dock: 'bottom'
}],
columns: [
{
header: ressources.HeaderTypeStockText,
dataIndex: 'libelleTypeStock',
summaryRenderer: function(){
return '<b> Total <b>';
},
flex: 0.1
},
{
header: ressources.HeaderQuantiteText,
dataIndex: 'quantite',
summaryType: 'sum',
flex: 0.1
},
{
header: ressources.HeaderPoidsText,
dataIndex: 'poids',
summaryType: 'sum',
flex: 0.1
}
],
store: storeGrid,
// paging bottom bar
bbar: Ext.create('Ext.PagingToolbar', {
store: storeGrid,
displayInfo: true,
displayMsg: ressources.GridDisplayMsg,
emptyMsg: ressources.GridEmptyMsg
})
});
Can anyone help me please?
Thanks
summaryType could also be a function, the parameter are undocumented but the source code give me this:
summaryType: function(store, [records, field]) {
store.each( **makesum** )
return sum;
}
simply ignore records cause in it are only the records of a page, but with the store you can get them all.
To do this from the client side is finally impossible because the total can only sum what is available, So I had to send this info from the server as another field.
I have two drop downs to book an appointment. One is "from time" and another is "to time". In the drop downs there are slots for eg. 9 am to 11 am and 1 pm to 3 pm , so when i select a 1st slot that is 9 am to 11 pm , then in the "to time" drop down i can only see available timing to book a appointment in 1st slot ie 9.15 , 10.15 etc. So now i have selected an appointment from = 9.15 to = 10.15. Now i click on "from time" drop down i am able to see all available slots and i don't make any changes here but when i click on " to time" drop down i am able to see all slot timings which is unexpected as i didn't make any changes, so expected behavior should be filter should be applied as per "from time" drop down even if i make any changes or not.
Following is my code
{
xtype: 'selectfield',
name: 'fromTime',
id: 'fromTime',
placeHolder: 'Select From Time',
label: 'From:',
labelWrap: true,
store: 'DoctorLocationTimes',
displayField: 'fromTime',
valueField: 'fromTime',
listeners: [
{
event: 'change',
fn: function(){
var fromTime, timeStore, index, record, docLocationid;
fromTime = Ext.getCmp('fromTime').getValue();
timeStore = Ext.getStore('DoctorLocationTimes');
timeStore.clearFilter();
index= timeStore.find('fromTime', fromTime);
if(index != -1){
record = timeStore.getAt(index);
docLocationid = record.get('docLocationWorkingHourid');
timeStore.filter('docLocationWorkingHourid',docLocationid);
}
}
},
{
event:'focus',
fn: function(){
var store = Ext.getStore('DoctorLocationTimes');
store.clearFilter();
}
}
]
}
As you can see i am applying filter on the basis of "from time" id .and again i am removing filter because again in from time i want to display all slots in "from time" drop down.
I got the answer.its working now.
{
xtype: 'selectfield',
name: 'toTime',
id: 'toTime',
placeHolder: 'Select To Time',
label: 'To:',
labelWrap: true,
store: 'DoctorLocationTimes',
displayField: 'toTime',
valueField: 'toTime',
listeners: [
{
event:'focus',
fn: function(){
var fromTime, timeStore, index, record, docLocationid;
fromTime = Ext.getCmp('fromTime').getValue();
timeStore = Ext.getStore('DoctorLocationTimes');
timeStore.clearFilter();
index= timeStore.find('fromTime', fromTime);
if(index != -1){
record = timeStore.getAt(index);
docLocationid = record.get('docLocationWorkingHourid');
timeStore.filter('docLocationWorkingHourid',docLocationid);
}
}
}]
}
I found that after applying filter on focus event of "to time" drop downs its working as expected.