Related
I'm currently working on an ionic-app that uses ion-pickers, now here's my question:
If you have a certain value that is part of the possibly choosable values of the picker, can you jump to it and select it by default when you try to open the picker just like they did with the datetime-picker?
Because I have a lot of values for some of my pickers, it would be much easier and user-friendly, if it would just immediately jump to the earlier selected value or to a default value somewhere in the middle so that they don't have to scroll down the entire pickervalues-list if they misclicked or something. Now I know that this very nice feature is already implemented for the datetime-picker but I didn't find a possibility to use it on the ion-picker.
So does it exist for the ion-picker yet or is that part yet under development?
I found the answer myself after digging around in the forums (here's the link: https://forum.ionicframework.com/t/solved-how-to-preselect-ion-picker-items/163425)
Basically you only need to use:
picker.columns[0].selectedIndex = index;
An alternative is to set the default ion-picker's option on itself build as shown below:
const objOptions: PickerOptions = {
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Confirm',
handler: (value) => {
console.log(`Got Value ${value}`);
}
}
],
columns: [{
name: 'Animals',
options: [
{ text: 'Dog', value: 'Dog' },
{ text: 'Cat', value: 'Cat'}
],
selectedIndex: 0
}]
};
const objPicker = await pickerController.create(objOptions);
objPicker.present();
if you want to select by text or value
let columns: PickerColumn[] = [
{
name: 'Animals',
options: [
{ text: 'Dog text', value: 'Dog' },
{ text: 'Cat text', value: 'Cat'}
],
},
];
//autoselect by value
let index = columns[0].options.findIndex(x => x.value === 'Cat');
columns[0].selectedIndex = index > -1 ? index : 0;
//autoselect by text
index = columns[0].options.findIndex(x => x.text === 'Cat text');
columns[0].selectedIndex = index > -1 ? index : 0;
//autoselect by index
columns[0].selectedIndex = 1;
const objOptions: PickerOptions = {
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Confirm',
handler: (value) => {
console.log(`Got Value ${value}`);
}
}
],
columns: columns
};
const objPicker = await pickerController.create(objOptions);
objPicker.present();
I have a database field that contains either integer 1 (representing the value 'document') or integer 2 (representing the value 'email') and I use datatables to format/display these integers as the words 'document' or 'email' within the table column. I would therefore like to use YADCF to be able to select 'document' or 'email' and have datatables filter the resultset accordingly.
Link to screen shot of table column.
I have used the custom_func feature as follows (code stripped down for brevity), but regardless of all other aspects of the datatable looking and working correctly, with a filter selector looking as expected and holding the selected value, and no console errors, my custom function is not being called. I have tried manually calling the custom function immediately before initialising YADCF, to check the scope, and it is being called just fine. Can anyone see anything obviously wrong please?
$(document).ready(function() {
function customFilterDocEmail(filterVal, columnVal) {
alert('customFilterDocEmail called');
var found;
if (columnVal === '') {
return true;
}
switch (filterVal) {
case 'doc':
found = columnVal === '1';
break;
case 'email':
found = columnVal === '2';
break;
default:
found = 1;
break;
}
if (found !== -1) {
return true;
}
return false;
}
})
var table = $('#table').DataTable({
serverSide: true,
processing: true,
ajax: {
url: '/api/datatables/getJson/doctext/doctexts',
type: 'POST',
data: function(d) {d.CSRFToken = '****';}
},
stateSave: true,
responsive: true,
pageLength: 25,
order: [[0, 'asc']],
columns: [
{ data: 'txt_type', width: '10%' },
{ data: 'txt_title' },
{ data: 'txt_name', width: '20%' },
{ data: 'link', orderable: false, width: '5%' },
],
}
});
yadcf.init(table, [
{ column_number: 0, filter_type: 'custom_func', custom_func: customFilterDocEmail,
data: [{ value: 'doc', label: 'Document' }, { value: 'email', label: 'Email' }] },
{ column_number: 1, column_data_type: 'text', filter_type: 'text', filter_delay: 500, filter_default_label: '', },
{ column_number: 2, column_data_type: 'text', filter_type: 'text', filter_delay: 500, filter_default_label: '', },
], 'footer');
YADCF Version: 0.9.3.beta.11
DataTables Version: 1.10.16
UPDATE: I haven't a clue what I'm doing wrong above, but I have come up with a little hack that saves having to use 'custom_func' and a custom filter. I've used the standard 'select' filter type but intercepted the filter string within the filter() method of my DatatablesSSP script thus:
$str = $requestColumn['search']['value'];
// returned search values for doctext 'txt_type' are Document/Email, so we need to map these to 1/2.
if ($column['db'] == 'txt_type') {
if ($str == 'Document') { $str = '1'; }
if ($str == 'Email') { $str = '2'; }
}
This works a treat :)
You have to place the customFilterDocEmail function outside of the $(document).ready block so it will be global and yadcf will see it
i have a form with two date fields, they have to define a date range, so the end cannot be before the start; and they both are made by two datepicker, which should disable the dates before the "start" in the "end". I've found this manual page with some code to be pasted, but i cannot paste this code in my page without getting an error. Maybe my page is too complicated but i don't think so, i think it's only me who cannot figure out where to paste the codewithout making all the other code fail. The following is the code of my page:
Ext.define('MyDesktop.count', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.ux.desktop.DatabaseModel',
//'Ext.ux.desktop.UserModel',
'Ext.data.TreeStore',
'Ext.layout.container.Accordion',
'Ext.toolbar.Spacer',
'Ext.tree.Panel'
],
id:'count',
init : function(){
this.launcher = {
text: 'count',
iconCls:'accordion'
};
},
createWindow : function(){
var App = this.app;
var desktop = this.app.getDesktop();
var win = desktop.getWindow('count-win');
if (!win) {
win = desktop.createWindow({
id: 'count-win',
title: 'count',
width: 350,
height: 200,
animCollapse: false,
maximizable: false,
resizable: false,
//constrainHeader: true,
//bodyBorder: true,
layout : 'anchor',
items:[
{
xtype : 'fieldset',
border: false,
defaultType: 'textfield',
items: [
{
xtype: 'datefield',
fieldLabel: 'Start date',
format: 'Ymd',
id:"start",
//altFormats: 'Ymd',
vtype: 'daterange',
endDateField: 'end'
},
{
xtype: 'datefield',
fieldLabel: 'End date',
format: 'Ymd',
id: "end",
//minValue: Ext.getCmp('start').getValue(),
//altFormats: 'm/d/Y',
vtype: 'daterange',
startDateField: 'start'
},
{
xtype: 'combo',
fieldLabel: 'Client',
id:"client",
hiddenName: 'client',
store: new Ext.data.SimpleStore({
data: [
['applix', 'applix'],
['banzai', 'banzai'],
['banzai-cooking', 'banzai - cooking'],
['integralAS', 'integralAS'],
['LinkSmart', 'LinkSmart'],
['nbcuniversal', 'nbcuniversal'],
['primenetwork', 'primenetwork'],
['quag', 'quag'],
['turnEU', 'turnEU'],
['turnUS', 'turnUS']
],
id: 0,
fields: ['value', 'text']
}),
valueField: 'value',
displayField: 'text',
triggerAction: 'all',
editable: false
}
]
}
],
buttons: [{
text: 'Submit',
handler: function() {
console.log(this);
start= Ext.util.Format.date(Ext.getCmp('start').getValue(),'Ymd');
end= Ext.util.Format.date(Ext.getCmp('end').getValue(),'Ymd');
//period = Ext.getCmp('period').value;
client = Ext.getCmp('client').value;
Ext.Ajax.request({
method : "GET",
url : 'http://whatever.com/count?client='+client+'&start='+start+'&end='+end,
timeout : 30000,
success :
function (response) {
//console.log(Ext.getCmp('to_add'))
Ext.Msg.alert(response.responseText);
desktop.getWindow('count-win').doClose();
}//handler
,
failure :
function(response) {
alert("Wrong request");
}
});
}
}]
});
}
return win;
}
});
The vtypes are already there, where should i put the listener and/or the function to handle the daterage property without cutting away all the rest of the code?Should i use a listener as in some examples here on stackoverflow (but i tryed and the window of the form wasn't working any more) or should i use the code from the manual? Anyone has any experience with this issue?
Ok then, the answer is more simple then it seems at first sight You have to leave the solution with vtype (which is difficult and it doesn't work). Then you have to add a listener to yours:
xtype: "datefield",
the code is here:
{
xtype: 'datefield',
fieldLabel: 'Start date',
format: 'Ymd',
id:"start",
//altFormats: 'Ymd',
vtype: 'daterange',
endDateField: 'end',
listeners:{
'change': function(th,a){
Ext.getCmp('end').setMinValue(a);
}
}},
It changes the minValue of the second datefield when the first datefield is changed.
It is simple, it worked for me.
I need to inform a selectfield sencha element from callback of Ext.Ajax.request({})
I have a this code, for example,
Ext.Ajax.request({
url: '/express/EXPRESSVE00007_es.jsp',
timeout: 90000,
params: {
evento : action,
cookie: document.cookie,
NAME : Ext.getCmp("txtName").getValue(),
LAST : Ext.getCmp("txtLast").getValue(),
SEX : Ext.getCmp("txtSex").getValue()
},
success: function(r, o) {
var response = r.responseText
response = response.trim()
response = response.replace('\n', '').replace('\r', '')
var jsonResponse = Ext.decode(response)
Ext.Msg.alert(jsonResponse)
},
failure: function() {
Ext.Msg.show({
title: "Failure",
msg: "Error, failed response",
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
})
}
})
and my selectfield,
{
xtype: 'selectfield',
id: 'selSex',
name: 'select',
label: '*Sex',
placeHolder: 'Select...',
displayField: 'desc',
hiddenName: 'second-select',
options: [
{desc: '', value: ''},
{desc: '', value: ''}
]
}
In this case, I need to inform "desc" and "value" field from callback Ext.Ajax.request, but I don't know. Please help me.
You can inform the selectfield from an Ext.Ajax.request by updating it's store.
You could declare a store to store all the field values and then on response from the request, you can shuffle the data store to which selectfield is binded.
E.g
{
xtype: 'selectfield',
store: sampleStore,
valueField:'value',
displayField:'desc',
}
and update the store values on Ext.Ajax.request's response like this,
Ext.StoreMgr.get('sampleStore').load();
You can do below
Test = Ext.regModel('Test', {
fields: [{
name: 'desc',
type: 'string'
}, {
name: 'value',
type: 'string'
}]
});
exStores = new Ext.data.Store({
model: 'Test',
autoLoad: false });
and select field
{
xtype: 'selectfield',
store: exStores,
id: 'selSex',
name: 'select',
label: '*Sex',
placeHolder: 'Select...',
valueField:'value',
displayField:'desc',
}
and ajax request
Ext.Ajax.request({
...
success: function(r, o) {
var response = r.responseText
response = response.trim()
response = response.replace('\n', '').replace('\r', '')
var jsonResponse = Ext.decode(response)
exStores.loadData(jsonResponse, false);
Ext.Msg.alert(jsonResponse)
},
...
})
Hope this help.
I need to create a dynamic gridpanel in ExtJS . I use an actioncolumn for this:
handler: function(view, rowIndex, colIndex, item, e) {
var tabs = Ext.getCmp('northPanel');
var rec = view.getStore().getAt(rowIndex);
modelFactory(rec.get('Reference'), rec.get('ResultFields'));
console.log(rec.get('ResultFields'));
console.log('start adding tab');
tabs.add({
title: 'Report: ' + rec.get('Reference'),
closable: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'tbfill'
}, {
xtype: 'button',
text: 'Export report'
}, {
xtype: 'button',
text: 'Refresh data'
}]
}],
xtype: 'tabpanel',
items: [{
xtype: 'gridpanel',
title: 'Gridview',
forceFit: true,
store: ND.store,
columns: []
}]
});
console.log('tab created');
},
Now I need to create the columns for this grid. The columns I need to make are in the rec.get('ResultFields'). When I use the console.log() I see this in the firebug:
[Object {
name = "currentSimAllocationByCcu", type = "textfield", format = null
}, Object {
name = "wanNumber", type = "textfield", format = null
}, Object {
name = "carrierName", type = "textfield", format = null
}, Object {
name = "dataPackageName", type = "textfield", format = null
}, Object {
name = "simIccid", type = "textfield", format = null
}, Object {
name = "expiryTime", type = "textfield", format = null
}, Object {
name = "bytesRx", type = "textfield", format = null
}, Object {
name = "bytesTx", type = "textfield", format = null
}]
How can I create columns with this?
What seems to be a problem?
If you get information about columns before you create a grid - then create array or columns based on array of your fields. Something like this:
var _cols = [],
_flds = rec.get('ResultFields');
Ext.Array.each(_flds, function(f) {
_cols.push(Ext.create('Ext.grid.column.Column', {
text: f.get('name'),
dataIndex: f.get('name')
}));
});
And then just use that _cols when creating grid.