i'm using SenchaTouch and would like to use their Picker for a UI component. I have this code:
var datePicker = new Ext.Picker({
slots: [
{
name : 'limit_speed',
useTitles: true,
title: 'Terminals',
data : [
{text: 'Terminalq 1', value: 1},
{text: 'Terminal 2', value: 2},
{text: 'Terminal 3', value: 3},
{text: 'Terminal 4', value: 4}
]
}
]
});
Does anyone know how to get an event handler to work on the doneButton??
Adding a function to the change event.
datePicker.on('change', function(){
// do some stuff
});
or
var datePicker = new Ext.Picker({
slots: [
{
name : 'limit_speed',
useTitles: true,
title: 'Terminals',
data : [
{text: 'Terminalq 1', value: 1},
{text: 'Terminal 2', value: 2},
{text: 'Terminal 3', value: 3},
{text: 'Terminal 4', value: 4}
]
}
],
listeners: {
change: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ console.log('click el'); }
}
}
});
you could also add it to the 'hide' event, depends if you care about the value or not.
if u want to take value of selected field u can use this code.
listeners: {
change: function(picker,button) {
selectedValue = picker.getValue()['limit_speed'];
console.log(selectedValue);
}
}
You can get the selected value of dynamically created datepicker
listeners: {
change: function(picker,selectedValue) {
console.log(selectedValue);
}
}
Related
data: function(){
return {
items: [
{ id: '1', name: 'Item 1', bool: false},
{ id: '2', name: 'Item 2', bool: false},
{ id: '3', name: 'Item 3', bool: false},
{ id: '4', name: 'Item 4', bool: false}
],
checkedItems: [],
};
},
methods:
{
select: function(event, index) {
if (!this.items[index].bool) {
this.checkedItems.splice(index, 1);
} else {
this.checkedItems.push(this.items[index]);
}
}
}
When I click on the div it copies the items data into checkedItems and sets bool to true.
Is it possible to target the item id and remove that specific one from checkedItems as the current splice is removing the wrong item based off the index.
Why not use an object instead of an array, something like this:
data: function(){
return {
items: [
{ id: '1', name: 'Item 1', bool: false},
{ id: '2', name: 'Item 2', bool: false},
{ id: '3', name: 'Item 3', bool: false},
{ id: '4', name: 'Item 4', bool: false}
],
checkedItemsObj: {},
};
},
methods:
{
select: function(event, index) {
let item = this.items[index];
if (!item.bool) {
this.checkedItemsObj[item.id] = item
} else {
delete this.checkedItemsObj[item.id]
}
},
getCheckedItems: () => Object.values(data().checkedItemsObj)
}
Now to get the array of checked items anytime, you can call methods.getCheckedItems()
I am capturing geoposition using Cordova API and then on success, I render the current location on a Google map.
When I first do a get_position using I render a form as follows:
var geo_panel = new Ext.form.Panel({
useCurrentLocation: true,
fullscreen: true,
layout: 'fit',
items: obj
});
Where obj is a toolbar defined as
toolbar = Ext.create('Ext.Toolbar', {
docked: 'top',
alias : 'widget.geolocationToolbar',
ui: 'light',
defaults: {
iconMask: true
},
items: [
{
xtype: 'button',
ui: 'back',
text: 'Back',
// destroy form.Panel overlay and return to tree store view
handler: function() {
geo_panel.destroy();
}
},
{
xtype: 'button',
itemId: 'stopWatch',
text: 'StopWatch',
iconCls: 'arrow_right',
iconMask: true,
handler: function() {
EvaluateIt.utils.UtilityService.clear_watch();
}
},
{
xtype: 'selectfield',
itemId: 'accuracy',
autoSelect: false,
placeHolder: 'accuracy',
options: [
{text: ''},
{text: 'high', value: 5},
{text: 'med high', value: 10},
{text: 'medium', value: 15},
{text: 'med low', value: 20},
{text: 'low', value: 66}
],
listeners: {
change: function(field, value) {
if (value instanceof Ext.data.Model) {
value = value.get(field.getValueField());
}
console.log(value);
// set accuracy as config variable
EvaluateIt.config.accuracy = value;
}
}
},
{
iconCls: 'home',
handler: function() {
google_map.getMap().panTo(position);
}
}
]
});
This renders just fine in my form panel.
My onSuccess method then passes an argument to add a google_map to the geo_panel form panel.
I have tried geo_panel.add(toolbar, google_map), which works, but I then get an issue of when I hit the "Back" button in the toolbar above:
{
xtype: 'button',
ui: 'back',
text: 'Back',
// destroy form.Panel overlay and return to tree store view
handler: function() {
geo_panel.destroy();
}
},
I have to click it twice: the first time destroys the google_map and then the second destroys the toolbar. This is a very undesirable behavior. I've tried destroying each of the items in the geo_panel, but that does other weird things. This is acting like there are multiple instances of geo_panel. Any ideas?
I figured it out: I was creating two instances of my geo_panel. I refactored the code and everything now works as desired.
I am having one select field and want to handle select field picker events manually. Following code for selectfield :
{
xtype: 'selectfield',
label: 'Choose one',
name:'abcd',
usePicker:true,
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
],
defaultPhonePickerConfig: {
hideOnMaskTap: true,
listeners: {
change: function(ths, val) {
console.log('change event called');
},
pick: function(ths, The, slot) {
console.log('pick event called');
PICKER_CONFIG = null;
if (PICKER_CONFIG != true) {
if (The[slot.getName()] != undefined && The[slot.getName()] != null && The[slot.getName()] != "") {
// Ext.getCmp('contractList').setValue(The[slot.getName()]);
ths.fireEvent('change', ths, The);
ths.hide();
}
}
},
cancel: function() {
console.log('cancel called');
PICKER_CONFIG = true;
},
show:function(){
console.log('show called');
}
}
},
pick is not getting called because i am using base css .
Here is my app.scss
#import 'sencha-touch/base';
But its working if i am using sencha-touch default and default/all css
like:
#import 'sencha-touch/default';
#import 'sencha-touch/default/all;
but, i don't want to use it
Is there any way to get that pick by using sencha-touch/base css.
hmm...
Can you tell me from where you get "pick" event ?
And what it supposed to do ?
I'm guessing that its doing the same thing as "change".
And how do you know its because you are using base css ?
from what I read the base css is sencha will be using bare minimum styling for components to work and the rest will be up to user. so there should be no effect on event components behaviour.
This is what i wrote to set Picker in SelectField:
{
xtype: 'selectfield',
usePicker: true,
displayField: 'text',
valueField: 'value',
options: [
{ text: 'Choose Dosage', value: 'default' },
],
defaultPhonePickerConfig : {
listeners: {
change: function(thePicker, newValue, oldValue) {
//check if custom variable has been set to false
if (newValue.slotsNumeric != null && newValue.slotsDecimal != null) {
var total = newValue.slotsNumeric + newValue.slotsDecimal;
// set the select field to show the correct selected value!!
var DecimalPicker = Ext.ComponentQuery.query('selectfield')[0];
DecimalPicker.setOptions({
text: total,
value: total
});
}
},
},
useTitles: true,
hideOnMaskTap: true,
slots: [
{
name : 'slotsNumeric',
title : 'Numeric',
align: 'center',
data : [
{text: '0', value: 0},
{text: '1', value: 1},
{text: '2', value: 2},
{text: '3', value: 3},
{text: '4', value: 4},
{text: '5', value: 5},
{text: '6', value: 6},
{text: '7', value: 7},
{text: '8', value: 8},
{text: '9', value: 9},
]
},
{
name : 'slotsDecimal',
title : 'Decimal',
align: 'center',
data : [
{text: '.0', value: .0},
{text: '.1', value: .1},
{text: '.2', value: .2},
{text: '.3', value: .3},
{text: '.4', value: .4},
{text: '.5', value: .5},
{text: '.6', value: .6},
{text: '.7', value: .7},
{text: '.8', value: .8},
{text: '.9', value: .9},
]
}
]
}
}
I am unable to get index value form the dataview:
{
xtype: 'list',
itemId: 'catList',
store: 'CategoryStore',
scrollable: false,
layout: 'fit',
itemHeight: 20,
itemTpl: [
'<div>',
'<tpl for="data">',
'<span >{category_name}</span> ',
'</tpl>',
'</div>'],
listeners: {
'itemtap': function(list, index, target, record, e, eOpts){
console.log(record.get('cat_id'));
}
}
}
Edited:
If i put data static on store it works fine but it does not work while getting data from server:
it works like as displayed on list:
{
xtype: 'list',
itemId: 'catList',
scrollable: false,
data: [
{ category_name: 'A', cat_id: 1},
{ category_name: 'B', cat_id: 2},
{ category_name: 'C', cat_id: 3},
{ category_name: 'D', cat_id: 4},
{ category_name: 'E', cat_id: 5},
],
loadingText: "Loading Words...",
emptyText: '<div>{message}</div>',
autoLoad:true,
itemTpl:[
'<tpl for=".">',
'<span >{category_name}</span> ',
'</tpl>',
]
},
Here, I tap many times on different row but only gets index 0, why is this? why am i not getting different index value while tapping different row of list item;
My JSON
I tried and working perfectly for me, Let me share what i did.
Model
Ext.define('Myapp.model.Category', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'cat_id', type: 'integer' },
{ name: 'category_name', type: 'string' },
{ name: 'created_date', type: 'string' },
{ name: 'order', type: 'integer' },
{ name: 'status', type: 'integer' },
{ name: 'deleted', type: 'integer' },
{ name: 'type', type: 'integer' }
]
}
});
Store
Ext.define('Myapp.store.Category', {
extend: 'Ext.data.Store',
requires: [
'Myapp.model.Category'
],
config: {
storeId: 'category',
model: "Myapp.model.Category",
proxy: {
type: "ajax",
url : "http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363?_dc=1376475408437&page=1&start=0&limit=25",
reader: {
type: "json",
rootProperty: "data"
}
},
autoLoad: true
}
});
List
{
xtype: 'list',
itemId: 'catList',
store: Ext.create('Myapp.store.Category'),
layout: 'fit',
itemHeight: 20,
itemTpl: [
'<div>',
'{category_name}',
'</div>'],
listeners: {
itemtap: function(list, index, target, record, e, eOpts){
console.log(record.get('cat_id'));
}
}
}
Output
As you can see itemtap function also printing correct cat_id
UPDATE
Based on your comment
{
xtype :'panel',
items : [{
xtype : 'toolbar',
itemId: 'categoryName' // Give itemId
},
{
xtype: 'list',
itemId: 'catList',
height : '100%',
store: Ext.create('GoodNews.store.Category'),
layout: 'fit',
itemHeight: 20,
itemTpl: [
'<div>',
'{category_name}',
'</div>'],
listeners: {
itemtap: function(list, index, target, record, e, eOpts){
var catId = record.get('cat_id');
var categoryName = record.get('category_name');
// Set the title like this
this.getParent().getComponent('categoryName').setTitle(categoryName);
}
}
}]
}
I don't really know what's wrong with your code as I tested it and it worked fine. However, a few things are wrong.
You do not need the for loop in your itemTpl as "itemTpl" is already
iterating in you data array for you. You would need it if you were
using just "tpl".
Avoid to have your listeners in your view. Instead,
get a reference to your list in your controller, and set the
listeners there. This is bad practise and it breaks the NVC pattern.
Here is a small version that works on my te4st application:
{
xtype: 'list',
itemId: 'catList',
scrollable: false,
data: [
{ category_name: 'A', cat_id: 1},
{ category_name: 'B', cat_id: 2},
{ category_name: 'C', cat_id: 3},
{ category_name: 'D', cat_id: 4},
{ category_name: 'E', cat_id: 5},
],
loadingText: "Loading Words...",
emptyText: '<div>{message}</div>',
autoLoad:true,
itemTpl: '{category_name}',
listeners: {
'itemtap': function(list, index, target, record, e, eOpts){
//TODO: whatever..
}
}
}
I need to add my store value in picker. Is it possible in Sencha? If anyone know the answer please help me on this. Thanks in advance.
var picker = Ext.create('Ext.Picker', {
slots: [
{
name : 'limit_speed',
title: 'Speed',
data : [
{text: '50 KB/s', value: 50},
{text: '100 KB/s', value: 100},
{text: '200 KB/s', value: 200},
{text: '300 KB/s', value: 300}
]
}
]
});
Ext.Viewport.add(picker);
picker.show();
You can replace data with store, read the documentation provided in the link below.
The slots configuration with a few key values:
name: The name of the slot (will be the key when using getValues in this Ext.picker.Picker).
title: The title of this slot (if useTitles is set to true).
data/store: The data or store to use for this slot.
http://docs.sencha.com/touch/2.2.0/#!/api/Ext.picker.Picker
Set slot data from a store:
slots : [{
store:null,
name:'picker'
}]
This is a bit old but it might help somebody.
You can call the setStore() method in the initialize function and then you need to set the valueField property on the picker slot to the value you want from the store.
Example of a picker with a slot and initialize:
Ext.define('MyApp.view.JobPicker', {
extend: 'Ext.picker.Picker',
alias: 'widget.jobpicker',
config: {
zIndex: 10,
useTitles: true,
doneButton: {
action: 'donePreviousJobPicker'
},
cancelButton: {
action: 'cancel'
},
slots: [
{
xtype: 'pickerslot',
itemTpl: [
'{jobName}'
],
align: 'center',
name: 'JobSlot',
title: 'Select Previous Job',
valueField: 'indexID'
}
]
},
initialize: function() {
this.callParent();
var jobs = Ext.getStore("JobsPickerStore");
jobs.clearFilter(true);
this.query('pickerslot[name=JobSlot]')[0].setStore(jobs);
}
});