Develop Reference

Disable selected options in ng-multiselect-dropdown

List used for the nf-multiselect-dropdown :
children: any = [{
id: "Son",
label: 'Son',
isDisabled: false
}, {
id: "Daughter",
label: 'Daughter',
isDisabled: false
}, {
id: "None",
label: 'None',
isDisabled: false
}];
Dropdown settings :
this.dropdownSettingsChildren = {
singleSelection: false,
idField: 'id',
textField: 'label',
selectAllText: 'Select All',
unSelectAllText: 'Unselect All',
itemsShowLimit: 1,
allowSearchFilter: true,
enableCheckAll: false,
};
Logic : When selected the 'None' option, it should make the fields 'isDisabled' as true
onChildrenOptionsSelect(event: any) {
if (event.id.includes('None')) {
for (let ele of this.children) {
if (!(ele.id.includes('None'))) {
ele.isDisabled = true;
}
}
}
this.onChildrenOptionsSelectOperation();
}
onChildrenOptionsDeSelect(event: any) {
if (event.id.includes('None')) {
for (let ele of this.children) {
if (!(event.id.includes('None'))) {
ele.isDisabled = false;
}
}
}
this.onChildrenOptionsSelectOperation();
}
HTML code ->
<ng-multiselect-dropdown class="width-120"
[placeholder]="'Select'" ngDefaultControl
[settings]="dropdownSettingsChildren" [data]="children"
[(ngModel)]="psHistory.maritalStatus.children"
name="dummyname"
(onSelectAll)="onChildrenOptionsSelectAll($event)"
(onDeSelectAll)="onChildrenOptionsSelectAll()"
(onSelect)="onChildrenOptionsSelect($event)"
(onDeSelect)="onChildrenOptionsDeSelect($event)">
</ng-multiselect-dropdown>
When checked the array, the values are properly reflecting but the options in ng-multiselect-dropdown are not disabled
I'd like to reflect the disabled fields on UI as well
I used this link as a reference to my code -> Stackblitz reference

How do I import and access a nested array/object in React?

I'm working with WordPress blocks using Javascript/React. I have a working piece of code that I want to be able to break up into multiple smaller files for easier management, however I can't seem to figure out how to properly import and access the information I want in this way.
Below I have a const const BLOCKS_TEMPLATE = []; with a bunch of data inside it that serves as a template for my custom block. It works fine if I have it inside my main file, but stops working if I take it out and try to import it.
I had tried moving this BLOCKS_TEMPLATE const out into its own file block_template.js and importing it at the top, then trying to access the data below in registerBlockType like below. It's not working for me, and I'm pretty sure I'm just screwing up the syntax. Can someone let me know what I'm doing wrong, if this is possible? Thank you and hopefully this is clear (not sure if the question I wrote is phrased correctly). I'm newer to working with React.
import { BLOCKS_TEMPLATE } from "./block_template";
const el = wp.element.createElement;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;
const { __ } = window.wp.i18n;
registerBlockType('idg-blocks-plugin/stats-bar-template', {
title: __('Stats Bar Template'),
category: 'widgets',
icon: 'welcome-widgets-menus',
keywords: [__('Statistics'), __('Stats')],
edit: (props) => {
return el(
'div',
{ className: props.className },
el(InnerBlocks, {
template: BLOCKS_TEMPLATE,
templateLock: false,
})
);
},
save: (props) => {
return el(
'div',
{ className: props.className },
el('div', { className: 'custom-div' }, el(InnerBlocks.Content, {}))
);
},
});
The external file, block_template.js, is set up like this:
export const BLOCKS_TEMPLATE = [
[
'core/columns',
{
className: 'is-style-stats-columns',
},
[
[
'core/column',
{
className: 'is-statistic',
},
[
[
'core/paragraph',
{
className: 'is-style-main-stat',
placeholder: 'ex: 76.4B',
align: 'center',
},
],
[
'core/paragraph',
{
className: 'is-style-stat-supporting',
content: 'ex: Average Buying Power at Each Summit',
align: 'center',
},
],
],
],
[
'core/column',
{
className: 'is-statistic',
},
[
[
'core/paragraph',
{
className: 'is-style-main-stat',
placeholder: 'ex: 76.4B',
align: 'center',
},
],
[
'core/paragraph',
{
className: 'is-style-stat-supporting',
content: 'ex: Average Buying Power at Each Summit',
align: 'center',
},
],
],
],
[
'core/column',
{
className: 'is-statistic',
},
[
[
'core/paragraph',
{
className: 'is-style-main-stat',
placeholder: 'ex: 76.4B',
align: 'center',
},
],
[
'core/paragraph',
{
className: 'is-style-stat-supporting',
content: 'ex: Average Buying Power at Each Summit',
align: 'center',
},
],
],
],
],
],
];

Error using template slot and slot-scope on VueJS

Error using a slot and slot-scope on VueJS to put into a column of a table.
A template as follows:
<b-table hover striped :items="users" :fields="fields">
<template slot="actions" slot-scope="data">
<b-button variant="warning" #click="loadUser(data.item)" class="mr-2">
<i class="fa fa-pencil"></i>
</b-button>
<b-button variant="danger" #click="loadUser(data.item, 'remove')">
<i class="fa fa-trash"></i>
</b-button>
</template>
</b-table>
After all, I'm able to get users on DB. And have success to show it on table. But, the buttons on slot can't.
The idea is put two buttons:
The update button
The delete button
And each button manage one function.
<script>
import { baseApiUrl, showError } from '#/global'
import axios from 'axios'
export default {
name: 'UserAdmin',
data: function(){
return {
mode: 'save',
user: {},
users: [],
fields: [
{ key: 'id', label: 'Código', sortable: true},
{ key: 'name', label: 'Nome', sortable: true},
{ key: 'email', label: 'E-mail', sortable: true},
{ key: 'adminMaster', label: 'Administrador', sortable: true,
formatter: value => value ? 'Sim' : 'Não'},
{key: 'adminEnterprise', label: 'Chefe de Empreendimento', sortable: true,
formatter: value => value ? 'Sim' : 'Não'},
{ key: 'manager', label: 'Gerente', sortable: true,
formatter: value => value ? 'Sim' : 'Não'},
{ key: 'customer', label: 'Cliente', sortable: true,
formatter: value => value ? 'Sim' : 'Não'},
{ key: 'actions', label: 'Ações'}
],
}
},
methods: {
loadUsers() {
const url = `${baseApiUrl}/users`
axios.get(url).then(res => {
this.users = res.data
})
},
reset() {
this.mode = 'save'
this.user = {}
this.loadUsers()
},
save() {
const method = this.user.id ? 'put' : 'post'
const id = this.user.id ? `/${this.user.id}` : ''
axios[method](`${baseApiUrl}/users${id}`, this.user)
.then(() => {
this.$toasted.global.defaultSuccess()
this.reset()
})
.catch(showError)
},
remove() {
const id = this.user.id
axios.delete(`${baseApiUrl}/users/${id}`)
.then(() => {
this.$toasted.global.defaultSuccess()
this.reset()
})
.catch(showError)
},
loadUser(user, mode = 'save') {
this.mode = mode
this.user = { ...user }
}
},
mounted() {
this.loadUsers()
}
}
</script>

Alright, so, it looks like you're using an official release of BV 2.0., BV is preparing for Vue 3 which is revising the component-slotting system.
As such, BV has renamed the custom slots, you need to use cell({key}) like so:
<template slot="cell(actions)" slot-scope="data">

Toolbar in extjs4

I have some toolbar in my exts 4 window
this.tbar = {
xtype: 'toolbar',
items: [
{
id: "btnClearFilter",
itemId: "btnClearFilter",
action: 'delFilter',
disabled: true,
handler: function (btn, e) {
btn.setDisabled(true);
}
},
'-',
{
text: 'Export',
tooltip: 'Export',
disabled: false,
menu : {
items: [{
text: 'Export 1'
, icon: 'Content/Resources/images/Excel-16.png'
, action: 'export'
}]
}
}
]
};
From controller i can cause action delFilter like this
'ns-main-win > toolbar button[action=delFilter]': {
click: this.delFilter
},
How couse action from menu item?

I dunno what you mean, you want to trigger the action on delFilter?
Ext.getCmp('btnClearFilter').click()

Have you tried giving the menu item an id and then searching using that
'#export'{
click:this.export
}

Trouble with Sencha Touch MVC

I'm trying to learn how to use Sencha Touch to build web apps. I've been following the tutorial Here and I am a bit stuck. Below have created one controller, two views and a model (All other code is copy & paste from the tutorial). The first view, Index works great. However if I try to access the second, it brings up a blank page, none of the toolbar buttons work and it doesn't fire the alert.
If I do comment out the line this.application.viewport.setActiveItem(this.editGyms);, the alert will fire, but obviously, it doesn't render the page.
I've looked at a couple other tutorials, and they seem to also be using the setActiveItem member to switch views.. Am I missing something, or do I have to somehow deactivate the first view to activate the second or something?
HomeController.js
Ext.regController('Home', {
//Index
index: function()
{
if ( ! this.indexView)
{
this.indexView = this.render({
xtype: 'HomeIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
editGyms: function()
{
if ( ! this.editGyms)
{
this.editGyms = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGyms);
Ext.Msg.alert('Test', "Edit's index action was called!");
},
});
views/home/HomeIndexView.js
App.views.wodList = new Ext.List({
id: 'WODList',
store: 'WODStore',
disableSelection: true,
fullscreen: true,
itemTpl: '<div class="list-item-title"><b>{title}</b></div>' + '<div class="list-item-narrative">{wod}</div>'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [App.views.wodList]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
views/home/EditGymStore.js
App.views.EditGymStore = Ext.extend(Ext.Panel, {
html: 'Edit Gyms Displayed Here',
});
Ext.reg('EditGymStore', App.views.EditGymStore);
models/appModel.js
Ext.regModel('WOD', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'wod', type: 'string' },
{ name: 'url', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title' }
]
});
Ext.regStore('WODStore', {
model: 'WOD',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'wod-app-localstore'
},
// REMOVE AFTER TESTING!!
data: [
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc1</br><br/>' },
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc2</br><br/>' }
]
});
viewport.js with toolbar
App.views.viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
dockedItems: [
{
xtype: 'toolbar',
title: 'The Daily WOD',
buttonAlign: 'right',
items: [
{
id: 'loginButton',
text: 'Login',
ui: 'action',
handler: function() {
Ext.Msg.alert('Login', "This will allow you to Login!");
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
ui: 'action',
handler: function() {
Ext.Msg.alert('Refresh', "Refresh!");
}
}]
},
],
});
Thanks for the help!!

In HomeController.js your action function (editGyms) is the same name as the variable you're using for your view (this.editGyms) so when it tries to setActiveItem(this.editGyms) its actually passing the controllers action function rather than the results of this.render({...})
Either change the name of the controller action or change the name of the variable you use to hold the view.. like
editGyms: function() {
if ( ! this.editGymView) {
this.editGymView = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}

I am colleagues with the guy that wrote the tutorial you are referring to. You should add a comment on that post because I described your problem to him and he said that he knows the solution.
You can just add a link to this page so that you won't need to describe everything again.
Also he will (very) soon publish the 3rd part of that tutorial that will cover some similar things.