i have a json that i have to itterate in my jade :
[
{ RefSlipNo:
{ fieldlabel: 'RefSlipNo',
fieldname: 'RefSlipNo',
fieldtype: 'text',
required: '1',
default_value: '',
placeholder: 'Ref Slip No',
order_no: '1',
formgroup: 'vehicleDetails',
can_delete: '0',
status: '1' },
BookNumber:
{ fieldlabel: 'BookNumber',
fieldname: 'BookNumber',
fieldtype: 'text',
required: '1',
default_value: '',
placeholder: 'Book Number',
order_no: '2',
formgroup: 'vehicleDetails',
can_delete: '1',
status: '1' },
SlipDate:
{ fieldlabel: 'SlipDate',
fieldname: 'SlipDate',
fieldtype: 'text',
required: '1',
default_value: '',
placeholder: 'Slip Date',
order_no: '3',
formgroup: 'invoice',
can_delete: '1',
status: '1' },
FillFuelDate:
{ fieldlabel: 'FillFuelDate',
fieldname: 'FillFuelDate',
fieldtype: 'text',
required: '1',
default_value: '',
placeholder: 'Fill Fuel Date',
order_no: '4',
formgroup: 'invoice',
can_delete: '1',
status: '1' }
]
i want to use fieldset and legend on the basis of formgroup like:
-------invoice--------------------|
FillFuelDate : |
SlipDate : |
----------------------------------|
-------vehicleDetails-------------|
RefSlipNo : |
BookNumber : |
----------------------------------|
But could not able to get logic. How to loop it in jade. I want to get all field list with invoice formgroup under one fieldset and all vehicledetails under 1 fieldset as shown above.
In your JavaScript, define a function like this, and pass it as a local to your pug template:
function groupByFormGroup(fields) {
const formGroups = [];
const formGroupsByName = {};
fields.forEach(field => {
if (!formGroupsByName[field.formGroup]) {
formGroupsByName[field.formGroup] = {name: field.formGroup, fields: []};
formGroups.push(formGroupsByName);
}
formGroupsByName[field.formGroup].push(field);
});
}
Then in the pug template, do something like:
each formGroup in groupByFormGroup(fields)
fieldset
legend= formGroup.name
each field in formGroup.fields
label= field.fieldLabel
input(type="text" name=field.fieldName)
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 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',