I'm trying to make form with button inside js, because formly directive rendered form isn't correct. I decided push my button and render that button by template but button has lost access to the controller and validation form. Where i have missed here?
controller.js
.controller('X', ['$log', 'Api', function($log, Api) {
var _self = this;
_self.model = {};
_self.formParts = [{
className: 'row',
fieldGroup: [
{
className: 'col-xs-3',
key: 'q',
type: 'select',
templateOptions: {
required: true,
valueProp: "id",
labelProp: "name",
options: [
{name: '0', id: 0},
{name: '1', id: 1},
],
}
},
{
className: 'col-xs-7',
key: 'n',
type: 'input',
templateOptions: {
required: true,
type: 'text',
placeholder: 'name'
}
}
{
className: 'col-xs-2',
templateUrl: 'button.html'
}
]
}];
_self.save(model) {
$log.info(model);
};
}]);
main.html
<formly-form model="f.model"
fields="f.formFields"
form="formForm">
</formly-form>
button.html
<button type="submit" class="btn btn-success"
ng-disabled="formForm.$invalid"
ng-click="f.save(f.model)">Save
</button>
Related
I am trying to change a hardcoded array within another JSX file.
the first file routes.js. I tried loading the array then changing it . it just changes the loaded data not the array directly from the other file. How do i write to the other JSX array from the main component.
const routes = [
{
type: "collapse",
name: "Our Mission",
key: "dashboards",
icon: <Shop size="12px" />,
collapse: [
{
name: "Ways We can Help",
key: "default",
route: "/dashboards/default",
component: Default,
},
{
name: "How It Works",
key: "automotive",
route: "/dashboards/automotive",
component: Automotive,
},
{
name: "Who We Are",
key: "smart-home",
route: "/dashboards/smart-home",
component: SmartHome,
},
],
},
{ type: "title", title: " ", key: "space1" },
{
type: "collapse",
name: "Services",
key: "services",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
{
type: "collapse",
name: "Products",
key: "products",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
];
export default routes;
code used in main jsx file. I want to be able to write to the remote array changing its values.
const handleSubmit = (event) => {
event.preventDefault();
// I want to push or filter with the code below
{
routes.length = 0;
routes.map((route) => console.log({ route }));
}
};
You can't change the array itself because it's a const. You could change it to a let and then export it like this:
EDIT
export let routes = [
{
type: "collapse",
name: "Our Mission",
key: "dashboards",
icon: <Shop size="12px" />,
collapse: [
{
name: "Ways We can Help",
key: "default",
route: "/dashboards/default",
component: Default,
},
{
name: "How It Works",
key: "automotive",
route: "/dashboards/automotive",
component: Automotive,
},
{
name: "Who We Are",
key: "smart-home",
route: "/dashboards/smart-home",
component: SmartHome,
},
],
},
{ type: "title", title: " ", key: "space1" },
{
type: "collapse",
name: "Services",
key: "services",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
{
type: "collapse",
name: "Products",
key: "products",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
];
Then to use it in another jsx component you can import it like this.
import {routes} from '../yourPathToIt/main'
I am trying to set up a basic Tabulator table in Vue.JS and I see the table but the styling is broken.
I set up a new(basic) VueJS project and followed the instructions for Vue setup listed here: http://tabulator.info/docs/4.1/frameworks#vue
I added some sample data and the ran the app (npm run dev)
Here is my code:
Testpage.vue
<script>
var Tabulator = require('tabulator-tables')
export default {
name: 'Test',
data: function () {
return {
tabulator: null, // variable to hold your table
tableData: [
{name: 'Billy Bob', age: '12'},
{name: 'Mary May', age: '1'}
] // data for table to display
}
},
watch: {
// update table if data changes
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData)
},
deep: true
}
},
created: function () {
console.log('Test', this.$refs)
},
mounted () {
// instantiate Tabulator when element is mounted
this.tabulator = new Tabulator(this.$refs.table, {
data: this.tableData, // link data to table
columns: [
{title: 'Name', field: 'name', sorter: 'string', width: 200, editor: true},
{title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress'}
]
})
},
template: '<div ref="table"></div>'
}
</script>
App.vue:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Router(index.js)
import Vue from 'vue'
import Router from 'vue-router'
import Test from '#/components/TestPage'
import HelloWorld from '#/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{ path: '/test', name: 'Test', component: Test }
]
})
I expect to see a styled table like the demo shows in the documentation.
A table with no styling appears on the page. (No borders, colors, etc)
you need to include the /dist/css/tabulator.css file from the Tabulator directory in your project with the rest of your CSS to bring in the table styling.
How you do that will depend on the evironment you are developing in
I tried to set up the described minimal Vue.JS Project on my own but encountered the following message in the console
> [Vue warn]: You are using the runtime-only build of Vue where the
> template compiler is not available. Either pre-compile the templates
> into render functions, or use the compiler-included build.
To avoid this message, it was necessary to modify the Testpage.vue. In my case it worked to move the key 'template' with its value from script section to its own 'template' section.
<template>
<div ref="table"></div>
</template>
<script>
const Tabulator = require('tabulator-tables');
export default {
name: 'Test',
data() {
return {
tabulator: null, // variable to hold your table
tableData: [
{ name: 'Billy Bob', age: '12' },
{ name: 'Mary May', age: '1' },
], // data for table to display
};
},
watch: {
// update table if data changes
tableData: {
handler(newData) {
this.tabulator.replaceData(newData);
},
deep: true,
},
},
created() {
// console.log('Test', this.$refs);
},
mounted() {
// instantiate Tabulator when element is mounted
this.tabulator = new Tabulator(this.$refs.table, {
data: this.tableData, // link data to table
columns: [
{
title: 'Name', field: 'name', sorter: 'string', width: 200, editor: true,
},
{
title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress',
},
],
});
},
};
</script>
in normal highchart i get svg code with code like this
var chart = $('#container').highcharts()
svg = chart.getSVG();
So, how can i get svg code with this highchart directive in angular js???
i try like normal code but i didn't get svg code.
i use this directive for my highchart
https://github.com/rootux/angular-highcharts-directive
and this my code in controller.js
$scope.chartLogisticGIGR = {
options: {
tooltip: {
shared: true
}
},
xAxis: { // Primary xAxis
categories: $scope.nameMonths,
title: {
text: 'Month'
},
labels: {
enabled: true
},
min:0
},
yAxis: [{ // Primary yAxis
title: {
text: 'GI / GR in IDR'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value / 1000000,'0') + ' mil';
}
}
}, { // Secondary yAxis
title: {
text: 'Balance'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value / 1000000,'0') + ' mil';
}
},
}],
series: [{
name: 'AGP - Goods Receipt',
type: 'column',
stacking: 'normal',
stack: '1',
data: $scope.dataLogisticGIGR_AGP_GR,
color: $rootScope.getColor('AGP Ext'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AGP - Goods Issue',
type: 'column',
stacking: 'normal',
stack: '1',
data: $scope.dataLogisticGIGR_AGP_GI,
color: $rootScope.getColor('AGP Int'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AGP - Balance',
type: 'spline',
data: $scope.dataLogisticGIGR_AGP_Balance,
color: $rootScope.getColor('AI 2'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Goods Receipt',
type: 'column',
stacking: 'normal',
stack: '3',
data: $scope.dataLogisticGIGR_AI_GR,
color: $rootScope.getColor('AI'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Goods Issue',
type: 'column',
stacking: 'normal',
stack: '3',
data: $scope.dataLogisticGIGR_AI_GI,
color: $rootScope.getColor('AP 2'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Balance',
type: 'spline',
data: $scope.dataLogisticGIGR_AI_Balance,
color: $rootScope.getColor('AP'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
}],
title: {
text: ''
},
loading: false
};
in this is my code in directive highchart
'use strict';
angular.module('chartsExample.directives',[])
.directive('chart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
chartData: "=value"
},
transclude:true,
replace: true,
link: function (scope, element, attrs) {
var chartsDefaults = {
chart: {
renderTo: element[0],
type: attrs.type || null,
height: attrs.height || null,
width: attrs.width || null
}
};
//Update when charts data changes
scope.$watch(function() { return scope.chartData; }, function(value) {
if(!value) return;
// We need deep copy in order to NOT override original chart object.
// This allows us to override chart data member and still the keep
// our original renderTo will be the same
var newSettings = {};
angular.extend(newSettings, chartsDefaults, scope.chartData);
var chart = new Highcharts.Chart(newSettings);
});
}
};
});
Thank's....
Hello!
I want this handler "handler: onEventControler (???)" removed from view (it do not belong there)
For grid view set dockedItems this cod:
this.dockedItems = [{
xtype: 'toolbar',
items: [{
xtype: 'newstation'
},{
id: 'add-persone-btn',
xtype: 'button',
itemId: 'add',
text: 'Add',
iconCls: 'icon-add',
handler: onEventControler(???)
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
I also tried to implement a this.control, but I could not ask for a button selectorQuery.
How do I properly respecting the architecture mvc extJs4?
thank you.
You should be able to do something like this inside the controller of this view.
init: function () {
this.control({
'toolbar #add': {
click: this.onAddStation
}
});
}
Handler:
onAddStation: function(button, e, eOpts){
//Handle
}
Alternatively, you could use an "action" config on your button.
action: 'addstation'
Then you could have:
init: function () {
this.control({
'button[action=addstation]': {
click: me.onAddStation
}
});
}
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button
This is method "initComponent" for view gridd view:
initComponent: function () {
this.plugins = [Ext.create('Ext.grid.plugin.RowEditing')];
this.dockedItems = [{
xtype: 'toolbar',
items: [{
xtype: 'button',
itemId: 'add',
text: 'Add',
iconCls: 'icon-add',
action: 'add-new-persone'
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
action: 'delete-persone',
disabled: true
}, '-', {
itemId: 'synch',
text: 'Synchronization',
iconCls: 'icon-synch',
action: 'synch-persone'
}]
}];
// paging bar on the bottom
this.bbar = Ext.create('Ext.PagingToolbar', {
store: this.store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[]
});
this._initColumns();
this._initFilter();
this.callParent(arguments);
},
In sencha touch, I have a carousel declared like this:
ajaxNav = new Ext.Panel({
scroll: 'vertical',
cls: 'card1 demo-data',
styleHtmlContent: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [{
xtype: 'carousel',
items: [{
id:'tab-1',
html: '',
cls: 'card card1'
},
{
id:'tab-2',
html: '<p>Clicking on either side of the indicators below</p>',
cls: 'card card2'
},
{
id:'tab-3',
html: 'Card #3',
cls: 'card card3'
}]
}]
});
Does anybody knows how to add elements dinamycally??
I write you a simple example to show you how to dinamically add a new panel to an existing Ext.Carousel element.
Ext.setup({
onReady: function() {
var ajaxNav = new Ext.Carousel({
fullscreen: true,
dockedItems: {
xtype: 'toolbar',
title: 'Demo',
items: [{
xtype: 'button',
ui: 'action',
text: 'Add',
handler: function(){
var element = new Ext.Panel({
html: 'New Element'
});
ajaxNav.add(element);
ajaxNav.doLayout();
}
}]
},
items: [{
id:'tab-1',
html: '',
cls: 'card card1'
},{
id:'tab-2',
html: '<p>Clicking on either side of the indicators below</p>',
cls: 'card card2'
},{
id:'tab-3',
html: 'Card #3',
cls: 'card card3'
}]
});
}
});
As you can see, on the "Add" press button event, you first have to define your panel according to your needs, then add it to your carousel, and, the most important thing, you have to let the carousel recalculate his layout calling the "doLayout()" function.
Hope this helps.