I have created toolbar containing 1 selectfield.
Items in select field are more & there is no way to know that there is more item in the list.
How can i solve this problem. Please help me.
Here is code
items: [
{
xtype : 'toolbar',
docked: 'top',
id: 'toptool',
flex: 1,
items: [
{
xtype: 'selectfield',
name: 'test',
options: [
{
text: 'cat 1',
value: '1',
},
{
text: 'cat 2',
value: '2',
},
{
text: 'cat 3',
value: '3',
},
{
text: 'cat 1',
value: '1',
},
{
text: 'cat 2',
value: '2',
},
{
text: 'cat 3',
value: '3',
},
{
text: 'cat 1',
value: '1',
},
{
text: 'cat 2',
value: '2',
},
{
text: 'cat 3',
value: '3',
},
{
text: 'cat 1',
value: '1',
},
{
text: 'cat 2',
value: '2',
},
{
text: 'cat 3',
value: '3',
},
{
text: 'cat 1',
value: '1',
},
{
text: 'cat 2',
value: '2',
},
{
text: 'cat 3',
value: '3',
}
]
}
]
}
]
first off all remove the comma(,) after the "value" parameter. Now use a css class or inline style to fix the height of the select field.
xtype: 'selectfield',
name: 'test',
style: 'height:100px',
Related
I have an array of items including 5 columns, but I want one of them to be displayed in detailslist, so I created a variable like this:
_columns: IColumn[] = [
{
key: 'Title',
name: 'Title',
fieldName: 'Title',
minWidth: 100,
maxWidth: 200,
isResizable: true,
ariaLabel: 'Operations for Field'
}];
and here is the Detailslist:
<MarqueeSelection selection={this._selection}>
<DetailsList
setKey={'items'}
items={items}
columns={columns}
selection={this._selection}
selectionPreservedOnEmptyClick={true}
onItemInvoked={this._onItemInvoked}
dragDropEvents={this._getDragDropEvents()}
columnReorderOptions={this.state.isColumnReorderEnabled ? this._getColumnReorderOptions() : undefined}
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
/>
</MarqueeSelection>
As output it displays all of the columns and ignores the columns property.
Make sure the fieldName is the name of the field in the items object. For example:
https://codepen.io/mohamedhmansour/pen/yQqaZx?editors=1010
Assuming items is the following:
const items = [
{ key: 'A', text: 'Item a' },
{ key: 'B', text: 'Item b' },
{ key: 'C', text: 'Item c' },
{ key: 'D', text: 'Item d' },
{ key: 'E', text: 'Item e' },
{ key: 'F', text: 'Item f' },
{ key: 'G', text: 'Item g' },
{ key: 'H', text: 'Item h' },
{ key: 'I', text: 'Item i' },
];
Then columns definition should be:
const columns = [
{ key: 'somekey1', name: 'Item', fieldName: 'text' }
];
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()
Does RadioGroup works properly in sencha touch ?
Example :
var myRadioGroup = new Ext.form.RadioGroup({
id: 'myGroup',
xtype: 'radiogroup',
fieldLabel: 'Single Column',
// Arrange radio buttons into three columns, distributed vertically
columns: 3,
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'rb', inputValue: '1'},
{boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
{boxLabel: 'Item 3', name: 'rb', inputValue: '3'},
{boxLabel: 'Item 4', name: 'rb', inputValue: '4'},
{boxLabel: 'Item 5', name: 'rb', inputValue: '5'},
{boxLabel: 'Item 6', name: 'rb', inputValue: '6'}
]
});
var resultsPanel = Ext.create('Ext.Panel', {
title: 'Results',
style:"margin:50px 0 0 10px;",
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch',//, // Each takes up full width
padding: 55
},
defaults: {
labelWidth: '85%',
labelWrap: true,
labelAlign: 'right'
},
items:[{
xtype: 'radiogroup',
fieldLabel: 'RadioGroup',
items:myRadioGroup
}]
});
Ext.viewport.add(resultsPanel);
This generates the following error :
[ERR] C2008: Requirement had no matching files (Ext.form.RadioGroup) -- C:\xampp\htdocs\testRadio\app.js:17:30.
Does anyone have an idea ,i tried updating app.json (not working ) ,also i searched for RadioGroup.js in touch/src/form/ but did not find it .
Sencha don't have radio group field , It has radio field only.
refer this. http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.field.Radio
for implementing Radio group give same name to all radio field:
ex:
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'radiofield',
name : 'color',
value: 'red',
label: 'Red',
checked: true
},
{
xtype: 'radiofield',
name : 'color',
value: 'green',
label: 'Green'
},
{
xtype: 'radiofield',
name : 'color',
value: 'blue',
label: 'Blue'
}
]
});
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 was wondering what is the best way to make the tab bar translucent (iOS7 style) and have the content scroll underneath it. I am using a tab panel. Thoughts?
I tried setting tab bar to floating:true, but:
1. tabBar seems to be intended for private use and couldn't find floating property on it
2. On doing the following on the tab panel:
tabBar: {
floating: true
},
tabBarPosition: 'bottom'
I'm just getting the tab bar to be docked on top. Thoughts?
Thanks!
As of right now, you can't achieve translucence with CSS and dynamic content underneath. If it was a static image, you could do it.
You can approximate the effect with transparency. You basically need to use a container as your tab bar and style it with "position: absolute;" and set bottom: 0. The tab bar container shouldn't be an item of the list, rather an item of a container which also has the list.
Here's a quick example: https://fiddle.sencha.com/#fiddle/26i
Ext.application({
name : 'Fiddle',
launch : function() {
var toolbar = {
xtype: 'container',
bottom: 0,
alias: 'bottomtoolbar',
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Option 1',
style: 'background: transparent;',
iconAlign: 'top',
width: 80,
height: 60,
margin: '0 10 0 10'
},
{
xtype: 'button',
text: 'Option 2',
style: 'background: transparent;',
iconAlign: 'top',
width: 80,
height: 60,
margin: '0 10 0 10'
},
{
xtype: 'button',
text: 'Option 3',
style: 'background: transparent;',
iconAlign: 'top',
width: 80,
height: 60,
margin: '0 10 0 10'
}
],
width: '100%',
height: 80,
style: 'position: absolute; background: rgba(255,255,255,0.9);'
};
var list = {
xtype: 'list',
itemTpl: '{title}',
items: [
{
// Spacer so end of list is selectable
xtype: 'container',
height: 80,
scrollDock: 'bottom'
}
],
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
};
Ext.Viewport.add(toolbar);
Ext.Viewport.add(list);
}
});
Granted, it's not styled very well, but you get the idea. Hope that helps.
Tabbar is docked by default to the bottom of the screen so even if you make it translucent all the content will be above it you will be unable to achieve what you wish. Instead you can set a bottom for the tab bar to position it below then add some opacity like .75 or .8 to try & get what you want