Why in component
var matrix = new enyo.Control({
name:"Matrix",
tag: "div",
classes : 'strategies',
/*handlers: {
init: "initHandler"
},*/
components: [
{ tag: "div", classes: "blankblock", content: ' ' },
{ tag: "div", classes: "label1", content: 'Player A' },
{ tag: "div", classes: "label2", content: 'B' },
{ name:'matrixTable', tag: "table", components: [
{ name: 'tr1', tag: 'tr', components: [
{ tag: 'td', components: [{tag: 'input'}]},
{ tag: 'td', components: [{tag: 'input'}]}
]},
{tag: 'tr', components: [
{tag: 'td', components: [{tag: 'input'}]},
{tag: 'td', components: [{tag: 'input'}]}
]}
]} ,
{ name: 'addV', tag: "button", classes:'addV', content: "+", ontap: "addRow" },
{ name: 'addH', tag: "button", classes:'addH', content: "+", ontap: "addColl" }
],
addRow: function(inSource, inEvent){
this.$.matrixTable.createComponent
alert(this.$.matrixTable.$.toSource());
},
addColl: function(inSource, inEvent){
}
});
this.$ include all components, even those with nesting order 2
I expect
this.$.matrixTable.$.tr1
but I have
this.$.tr1
Because you declared them as part of the Matrix kind then Enyo will have them all owned by the Matrix kind. If you want them to be owned as you described then you need to break out the MatrixTable kind into its own separate kind. If you want to enforce that encapsulation then you need to create a kind to hide it.
Further, you should always avoid going two levels deep into a kind. In other words, this.$.matrixTable.$.tr1 would be bad form. Make properties or add functions to return values.
In enyo you need to be aware of two chains: owner chain vs parent-child chain.
Whereas "matrixTable" is a parent of "tr1", an owner of "tr1" is "Matrix".
So to get to "tr1" from "Matrix", you can go two ways:
this.$.tr1 or this.children[3].children[0],
similarly, to get to "Matrix" from "tr1" you can do:
this.$.tr1.owner or this.$.tr1.parent.parent
This way, no matter how deeply nested are your components, the owner will always be the kind within which the component is defined.
Related
I've started building a form in react-jsonschema-form and i'm having a lot of difficulty changing it visually.
The form is an array and it has a button to add and remove a set of input boxes.
I've build it as a component in a test project which has no css applied to it so far.
The form will render as a tiny box where there is no room for the buttons (they are cut of as shown below in images).
a single element
a second element
How its supposed to look on react-jsonschema-form playground
A key difference between my array and the sample array is that i'm having two text input elements per array element. I dont know if this could cause it.
I do need to have two input values as its a group of data that is related, and both is required.
This is my code:
//json schema
const schema = {
type: "object",
properties: {
listOfNumbers: {
title: "opret ledig nummerserie",
type: "array",
required: ["nr_fra", "nr_til"],
items: {
properties: {
nr_fra: {
type: "string",
pattern: "^\\d*$",
minLength: 8,
maxLength: 8,
},
nr_til: {
type: "string",
pattern: "^\\d*$",
minLength: 8,
maxLength: 8,
},
},
},
},
},
};
//uiSchema
const uiSchema = {
listOfNumbers: {
"ui:options": {
orderable: false,
},
items: {
//nr_fra: { "ui:options": { label: false } },
//nr_til: { "ui:options": { label: false } },
},
},
}
I'm applying no css to the below form.
// Form
<Form
schema={schema}
uiSchema={uiSchema}
formData={this.state.formData}
onSubmit={(formOutput) => this.handleSubmit(formOutput)}
transformErrors={transformErrors}
/>
I've spent a day and a half on trying to strongarm this, but i could really use some help on how to proceed.
It seems it was css inputs that was needed to solve this.
The below will expand the elements to their proper size/form.
Posting this here for posterity, as this is not accurately documented.
<div className="col-md-offset-3 col-md-6">
<Form schema={schema}
uiSchema={uiSchema}>
</Form>
</div>
I have been trying to change the language from English to others,
$t('bascketball')
↑this works inside the template, however I am looking the way that I can change the language of elements inside of export Default.
If you know how to solve it, please advice me.
export default {
name: "Home",
components: {},
data() {
return {
Games: [
keyword: '',
games: [
{
heading: $t('Basketball'),
text:
"Hello Basketball players, want to know about team members. Click Below.",
img:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt0Sh97iYcu0kTguhcsW_szWfzolqu1ynGeQ&usqp=CAU",
},
You can do it with one of these:
this.$t('Basketball')
this.$i18n.tc('Basketball')
But because you're calling the API, you cannot do it in data, you can rewrite it to a computed method, like that:
computed: {
games() {
return [
{
heading: this.$t('Basketball'),
text:
"Hello Basketball players, want to know about team members. Click Below.",
img:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt0Sh97iYcu0kTguhcsW_szWfzolqu1ynGeQ&usqp=CAU",
}
]
}
}
I have multiple ckeditor in a component and for some reason i want a textarea-ckeditor to be readonly with some toolbar enabled;
ie: 'print','preview','find', and 'maximize'.
How can i achieve this? i've tried removing the plugins but only success if i alter the config.js which will 'standardize' all my ckeditor.
What i can think is that i need to alter something from this code.
CKEDITOR.replace('header',{
width: '100%',
height: 570});
Thanks in adv..
I found the solution but instead of removing the toolbar buttons, i list all the desired buttons as following;
toolbar: [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: ['-','Preview', 'Print', '-' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find','-','-' ] },
{ name: 'tools', items: [ 'Maximize'] }
]
I want to display only 4 columns, but when I bind the grdOptions.Data=entity,
then all fields in entity are converted into a column. Can we prevent it from autogenerating all the columns?
As per the first page of documentation:
... if you wanted to configure the core ui-grid, you might choose to set some options and columns on your grid (the documentation for these is found in gridOptions and columnDef.
And here's the first example:
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name: 'field1', enableSorting: false },
{ name: 'field2' },
{ name: 'field3', visible: false }
]
};
When you use the Ext.dataview.List in Sencha, it automatically inserts a nice loading spinner while the data is loading. That's all fine and dandy, but I'd like to know how to use a custom loader .gif.
I've looked around and think I need to change the loadmask but not positive cause I'm new to this. See this link.
Below is the code for one of my Lists. I'm hoping to be able to add the code suggested to one place so that all lists are affected and have the new spinner.
{
xtype: 'list',
height: '',
id: 'categoryList',
itemId: '',
width: '100%',
scrollable: false,
emptyText: '<div class="pdtsListHtml" style="margin-top:30%">Product List Empty</div>',
itemTpl: [
'<div ><div class="pdtsListHtml" style="display:inline;">{navigationElementItemName} ({navigationElementItemRecordCounts})</div><div style="display:inline;float:right;margin-right:5px;"><img src="resources/image/arrow.png" width="11" height="11"></div></div>'
],
store: 'productListStore',
allowDeselect: true,
onItemDisclosure: false
}
Here's a fiddle that shows you an example list with a loading mask that uses a gif.
Basically you should define your own Ext.LoadMask subclass and use it on the list:
Ext.define("Test.MyLoadMask", {
extend: "Ext.LoadMask",
alias: "widget.myloadmask",
getTemplate: function() {
var prefix = Ext.baseCSSPrefix;
return [
{
reference: 'innerElement',
cls: prefix + 'mask-inner',
children: [
{
reference: 'indicatorElement',
cls: prefix + 'loading-spinner-outer',
children: [
{ tag: 'img', src: "http://example.com/my-spinner.gif" }
]
},
{
reference: 'messageElement'
}
]
}
];
}
});
Then you should define an applyMasked on your lists that modifies the xtype and sets it to myloadmask instead of loadmask.