Access vuex state dynamically with bracket notation in template - javascript

I have an v-for in my template and a piece of state which I want to dynamically access using bracket notation (this works for actions so it should work for state afaik) but nothing is getting rendered, this is my template:
<template v-if="field.element == 'select'">
<select class="modal_input_select" v-model="formData[field.id]">
<option v-for="result in $store.state[field.module][field.results]" :key="result.id"
:value="result.id">{{ result.title }}</option>
</select>
</template>
And this is my schema I use to build my modal:
createSchema:
{
title: 'Nueva publicación', description:'',
formData: { image: '', title: '', body:'' },
fields:
[
{ id: 'image', label: 'Imagen', element: 'image', type: 'image' },
{ id: 'title', label: 'Titulo', element: 'input', type: 'text' },
{ id: 'body', label: 'Contenido', element: 'editor', type: 'html' },
{ id: 'postcategory', label: 'Categoría', element: 'select', type: 'select', module: 'PostCategories', results: 'postCategories'},
],
buttons:
[
{ text: 'Guardar', background: 'var(--blue_boot)', validate: true, module: 'Posts', action: 'create' },
{ text: 'Volver', background: 'var(--grey_boot)', validate: false, module: 'AdminPanel', action: 'hideModal' },
],
mounted:
[
{ module: 'PostCategories', action: 'all' },
]
},

Related

toggle show/hide table column and save to localstorage in vue

I would like to show and hide table column dynamically with checkbox and save it the option to localstore in vue 2. I find a jquery version but when I tried to use it did not worked.
I am a beginer in vue.
Thank you for your help.
My vue table:
export default {
extends: axiosGetPost,
props: ['id','tab_name', 'route_name'],
data() {
return {
hidePreLoader: true,
price: '',
purchase_price: '',
selling_price: '',
products: {},
tableOptions: {
tableName: 'products',
columnSelect : true,
columns: [
{
title: 'lang.item_image',
key: 'image',
type: 'images',
source: '/uploads/products',
imagefield: 'imageURL',
sortable: false
},
{title: 'lang.sku', key: 'sku', type: 'text', sortable: true},
{title: 'lang.sku_2', key: 'sku_2', type: 'text', sortable: true},
{title: 'lang.sku_3', key: 'sku_3', type: 'text', sortable: true},
{title: 'lang.sku_4', key: 'sku_4', type: 'text', sortable: true},
{title: 'lang.attribute_values', key: 'attribute_values', type: 'text', sortable: true},
{title: 'lang.quantity', key: 'test', type: 'text', sortable: true},
{title: 'lang.selling_price', key: 'selling_price', type: 'text', sortable: true},
{title: 'lang.receiving_price', key: 'purchase_price', type: 'text', sortable: true},
],
formatting : ['selling_price','purchase_price'],
source: '/products/variantDetails/' + this.id,
},
}
},
I run out of ideas.
Thank you for your help.
For this you need to set defaults so that the checkbox values first try to read from localStorage. Then create a method when the input is clicked to change the value and update the value set into storage.
Vue.use(VueTables.ClientTable);
new Vue({
el: "#app",
data: {
columns: ['name', 'code'],
columnHidden: {
name: localStorage.getItem('name') || false,
code: localStorage.getItem('code') || false
},
data: getData()
},
methods: {
toggleColumn(column) {
this.columnHidden[column] = !this.columnHidden[column];
localStorage.setItem(column, true);
}
}
});
function getData() {
return [{
code: "ZW",
name: "Zimbabwe"
}, {
code: "ZM",
name: "Zambia"
}, {
code: "YE",
name: "Yemen"
}];
}
<div id="app" v-cloak>
<template v-for="column in columns">
<label for=`toggleTable${column}`>{{`Toggle ${column}`}}</label>
<input v-on:click="toggleColumn(column)" id=`toggleTable${column}` type="checkbox" :checked="columnHidden[column]" />
<br />
</template>
<v-client-table :columns="columns" v-model="data">
</v-client-table>
</div>

ExtJS 4.2 - How to map array to a model field and display dynamically on a grid column?

I have this json data:
{
id: 1,
name: 'something',
description: 'somethingsomething',
customers: [{
id: 1,
username: 'cust1'
}, {
id: 2,
username: 'cust2'
}]
}
While I have no problems displaying the first three fields on the gridpanel, I however have an issue retrieving the array object for the customers field. My model goes like this:
fields: [
'id', {
name: 'name',
sortType: Ext.data.SortTypes.asUCString
},
'permanent', {
name: 'description',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'customers',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'username',
Type: Ext.data.SortTypes.asUCString,
mapping: 'customers[0].username'
}
]
When I try to access customers[0].username, it only retrieves the ones on that specified index. Removing the index number returns undefined as I assume it is looking for what index to return from. How do I properly retrieve all of customers: [] and display it to my grid where it is structured as:
{
xtype: 'gridpanel',
store: oStore,
viewConfig: {
loadMask: false,
enableTextSelection: true
},
hideHeaders: false,
bodyBorder: true,
columns: [{
text: 'Customer',
dataIndex: 'username',
flex: 1
}, {
header: '',
xtype: 'actioncolumn',
itemId: 'remove-player-btn',
width: 50,
sortable: false,
resizable: false,
menuDisabled: true,
items: [{
icon: 'resources/img/x.png',
tooltip: 'Remove Player',
scope: oMe
}],
editor: {
xtype: 'text',
name: 'deleteRow'
}
}]
}
You can use convert function available in model.This convert function is used for some calculation purpose & map response data for our needs.For example I will map username as below:
fields: [
{
name:'username',
convert:function(value,model)
{
return model.data.customers.username;
}
}
]
Use same technique for id field.Reply if any issues.

How can I save and restore AlloyUI FormBuilder fields?

I want to save the user selected and predefined fields of an AlloyUI FormBuilder. I have tried to use JSON.stringify(formBuilder.get('fields')), but I get the following error:
Uncaught TypeError: Converting circular structure to JSON
How can I save (and restore) the fields of an AlloyUI FormBuilder?
In order to save the fields of an AlloyUI FormBuilder, you can use field.getAttributesForCloning() to obtain the important field attributes. Then you can combine those attributes into an array. Finally, you can convert the array to JSON to save it with JSON.stringify():
var fields = [];
formBuilder.get('fields').each(function(field) {
fields.push(field.getAttributesForCloning());
});
fields = JSON.stringify(fields);
If you want to restore the fields, you can use JSON.parse() on the JSON:
new Y.FormBuilder({
/* ...your code here... */
fields: JSON.parse(fields)
}).render();
Here's a runnable example using AlloyUI's example FormBuilder code:
YUI().use('aui-form-builder', function(Y) {
var formBuilder = new Y.FormBuilder({
availableFields: [{
iconClass: 'form-builder-field-icon-text',
id: 'uniqueTextField',
label: 'Text',
readOnlyAttributes: ['name'],
type: 'text',
unique: true,
width: 75
}, {
hiddenAttributes: ['tip'],
iconClass: 'form-builder-field-icon-textarea',
label: 'Textarea',
type: 'textarea'
}, {
iconClass: 'form-builder-field-icon-checkbox',
label: 'Checkbox',
type: 'checkbox'
}, {
iconClass: 'form-builder-field-icon-button',
label: 'Button',
type: 'button'
}, {
iconClass: 'form-builder-field-icon-select',
label: 'Select',
type: 'select'
}, {
iconClass: 'form-builder-field-icon-radio',
label: 'Radio Buttons',
type: 'radio'
}, {
iconClass: 'form-builder-field-icon-fileupload',
label: 'File Upload',
type: 'fileupload'
}, {
iconClass: 'form-builder-field-icon-fieldset',
label: 'Fieldset',
type: 'fieldset'
}],
boundingBox: '#myFormBuilder',
fields: [{
label: 'City',
options: [{
label: 'Ney York',
value: 'new york'
}, {
label: 'Chicago',
value: 'chicago'
}],
predefinedValue: 'chicago',
type: 'select'
}, {
label: 'Colors',
options: [{
label: 'Red',
value: 'red'
}, {
label: 'Green',
value: 'green'
}, {
label: 'Blue',
value: 'blue'
}],
type: 'radio'
}]
}).render();
Y.one('#resetFormBuilder').on('click', function(event) {
var fields = [];
formBuilder.get('fields').each(function(field) {
fields.push(field.getAttributesForCloning());
});
fields = JSON.stringify(fields);
formBuilder.destroy();
event.target.set('style', 'display: none;');
new Y.FormBuilder({
/* ...your code here... */
boundingBox: '#myFormBuilder',
fields: JSON.parse(fields)
}).render();
});
});
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
<button id="resetFormBuilder" class="btn btn-primary">
Reset <code>FormBuilder</code>
</button>
<div id="wrapper">
<div id="myFormBuilder"></div>
</div>
</div>

Association between models failing in Ext js 6

I am working on small example to understand association which is working fine in Ext js 5 but failing in Ext js 6 version.
Ext.onReady(function() {
// parent model
Ext.define('Continent', {
extend: 'Ext.data.Model',
field: ['name'],
hasMany: {
model: 'Country',
name: 'countries'
}
});
//child model
Ext.define('Country', {
extend: 'Ext.data.Model',
field: ['name'],
associations: [{
type: 'belongsTo',
model: 'Continent',
associationKey: 'countries',
}]
});
//created store for parent which contains child data
Ext.define('ContinentStore', {
extend: 'Ext.data.Store',
storeId: 'continent',
model: 'Continent',
autoLoad: true,
proxy: {
type: 'memory',
data: [{
name: 'Asia',
countries: [{
name: 'India'
}, {
name: 'Srilanka'
}, {
name: 'Bangladesh'
}]
}, {
name: 'Africa',
countries: [{
name: 'Nigeria'
}, {
name: 'Kenya'
}, {
name: 'South Africa'
}]
}, {
name: 'America',
countries: [{
name: 'West'
}, {
name: 'East'
}, {
name: 'South'
}]
}]
}
});
var continentGrid = Ext.create('Ext.grid.Panel', {
title: 'Continent Grid',
store: Ext.create('ContinentStore'),
width: '50%',
height: '100%',
listeners: {
select: function(cmp, record, index) {
//record.countries() will return new store.
// to append new store I have used reconfigure method.
Ext.getCmp('CountryGrid').reconfigure(record.countries());;
}
},
columns: [{
dataIndex: 'name',
text: 'Continent',
flex: 1
}]
});
var countryGrid = Ext.create('Ext.grid.Panel', {
title: 'Country Grid',
id: 'CountryGrid',
width: '50%',
height: '100%',
columns: [{
dataIndex: 'name',
text: 'Country',
flex: 1
}]
});
Ext.create('Ext.window.Window', {
width: 500,
height: 400,
layout: 'hbox',
autoShow: true,
items: [continentGrid, countryGrid]
})
//console.log(continent);
});
when I try to run the example in Ext js 6 verison getting below error.
Uncaught Error: hasMany ("Continent") and belongsTo ("Country") should not be used in conjunction to declare a relatextionship. Use only one.(…)
working fiddle

extjs dataview not show images

I want to show some pictures using a dataview. I have one model and one store with the url. My problem is simple, i configured my xtype: 'dataview' but not works and dont show any error. What im i doing wrong?
Store:
Ext.define('Proyecto.store.ST_PJdatos', {
extend: 'Ext.data.Store',
model: 'Proyecto.model.MD_PJdatos',
data: [
{ idPersonaje: 1, nombre: 'Aerie', retrato: 'http://img.picshare.at/1440990535_female_godlike_moon_jasonseow01_lg.png', arquetipo: 'Neutral', profesion: 'Mago', pv: 16, pa: 9, ps: 12, idAtributos: 1 },
{ idPersonaje: 2, nombre: 'Tybalt', retrato: 'http://img.picshare.at/1440990535_male_human_jasonseow03_lg.png', arquetipo: 'Neutral', profesion: 'Picaro', pv: 21, pa: 18, ps: 19, idAtributos: 2 },
{ idPersonaje: 3, nombre: 'Zojja', retrato: 'http://img.picshare.at/1440990535_N7bmTqw.png', arquetipo: 'Maligno', profesion: 'Clerigo', pv: 26, pa: 14, ps: 29, idAtributos: 3 },
{ idPersonaje: 4, nombre: 'Arcturus', retrato: 'http://img.picshare.at/1440990535_poe_beaverskin02_lg.png', arquetipo: 'Maligno', profesion: 'Caballero', pv: 31, pa: 27, ps: 10, idAtributos: 4 }
]
});
Model:
Ext.define('Proyecto.model.MD_PJdatos', {
extend: 'Ext.data.Model',
fields: [
{ name: 'idPersonaje', type: 'int' },
{ name: 'nombre', type: 'auto' },
{ name: 'retrato', type: 'auto' },
{ name: 'arquetipo', type: 'auto' },
{ name: 'profesion', type: 'auto' },
{ name: 'pv', type: 'int' },
{ name: 'pa', type: 'int' },
{ name: 'ps', type: 'int' },
{ name: 'idAtributos', reference: 'Proyecto.model.MD_PJatributos', unique: true }
]
});
MainView:
Ext.define('Proyecto.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'Proyecto.view.main.MainController',
'Proyecto.view.main.MainModel'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
xtype: 'panel',
bind: {
title: '{name}'
},
region: 'west',
width: 250,
split: true,
items: [{
xtype: 'dataview',
store: Ext.data.StoreManager.lookup('Proyecto.model.MD_PJdatos'),
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap">',
'<div class="thumb"><img src="{retrato}"></div>',
'<span class="x-editable">{nombre}</span>',
'</div>',
'</tpl>'
],
itemSelector: 'div.thumb-wrap'
}],
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Tab 1',
html: '<h2>Content appropriate for the current navigation.</h2>'
}]
}]
});
The
First of all, you are passing the model class name to your StoreManager.lookup call, not the store class name:
store: Ext.data.StoreManager.lookup('Proyecto.model.MD_PJdatos')
Then, even if you passed the store class name it would still not work because StoreManager.lookup expects "The id of the Store, or a Store instance, or a store configuration" but not a store class name.
Replace your StoreManager.lookup call with simply:
new Proyecto.store.ST_PJdatos

Categories