I am trying to use ngx-graph in my project to draw a hierarchical graph. I have issue with links that connecting two nodes. I have tried all curve types, but not getting expected result.
Here is some code snippets:
HTML
[links]="links"
[nodes]="nodes"
[layoutSettings]="layoutSettings"
[curve]="curve"
[draggingEnabled]="false"
[panningEnabled]="true"
[enableZoom]="false"
[autoZoom]="true"
[autoCenter]="false"
<ng-template #nodeTemplate let-node>
<svg:g class="node">
<svg:rect [attr.width]="100" [attr.height]="50" fill ="#fff" stroke-width ="1" stroke = "#000" />
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}</svg:text>
</svg:g>
</ng-template>
</ngx-graph>
TS
layoutSettings = {
orientation: 'TB'
};
nodes: Node[] = [
{
id: 'first',
label: 'Parent'
}, {
id: 'c1',
label: 'Child 1'
}, {
id: 'c2',
label: 'Child 2'
}, {
id: 'c3',
label: 'Child 3'
}
];
links: Edge[] = [
{
id: 'a',
source: 'first',
target: 'c1',
label: 'is parent of'
}, {
id: 'b',
source: 'first',
target: 'c2',
label: 'custom label'
}, {
id: 'c',
source: 'first',
target: 'c3',
label: 'custom label'
}
];
Output that I am getting is:
Expected output is:
Any help or suggestions would be appreciated Thank you.
I found answer for my own question. This can be achieved by custom layouts.
Here you can found a custom layout, which resolves my issue.
Related
I've error on grid, when try to click on disabled cell. Here is the code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
columns: [{
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
disabled: true
}
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}],
height: 100,
width: 400,
renderTo: Ext.getBody()
});
}});
How to reproduce:
Click on cell "Lisa"
Sort by "Name" column
Wait 30 sec
Click on cell "Lisa" cell again
This error occurs:
Uncaught TypeError: Cannot read properties of null (reading 'value')
Reproduced on ExtJs "7.5.0" and older.
The v-select that I change the option is triggering the other v-select automatically, the operation is to be independent between them, the issue that I am unable to get this code right. Someone with more experience than I could help me with?
<v-data-table
:headers="headers"
:items="res"
item-key="Name"
class="elevation-23"
>
<template v-slot:item.path="{ item }">
<v-select
v-model="cSel"
:items="item.path"
></v-select>
</template>
</v-data-table>
data () {
return {
expanded: [],
singleExpand: false,
cSel: 'A',
res: [
{
fullName: 'name 1',
med: 'med 1',
startDate: 'start date 1',
path: ['A', 'B', 'C', 'D'],
},
{
fullName: 'name 2',
med: 'med 2',
startDate: 'start date 2',
path: ['A', 'B', 'C', 'D'],
},
],
totalRes: 0,
search: '',
loading: false,
options: {
page: 1,
itemsPerPage: 40,
},
headers: [
{ text: 'Name', value: 'fullName' },
{ text: 'Med', value: 'med' },
{ text: 'Start Date', value: 'startDate' },
{ text: 'Create ', value: 'path', width: '200' },
],
}
You're using only one cSel variable for all items. That's why one change affects every select component.
You could either include the variable in every item. So you'd have item.cSel.
Or you convert cSel to an object and access it with an identifier:
cSel: {}
<v-select
v-model="cSel[item.fullName]"
:items="item.path"
></v-select>
I used the fullName property in this case. As long as that's unique this solution should work but it would probably be better to have an id property.
Have two table, Quiz and Questions
Quiz table store questions id and its display position.
Display position is different for every Quiz.
Quiz table:
{
id: '1'
name: 'Quiz 1'
questions: [
{
question_id: '1',
position: 4
},
{
question_id: '2',
position: 1
},
......
]
}
...
Question Table:
[
{
id: '1',
title: 'Question 1'
},
{
id: '2'
title: 'Question 2'
}
]
I want the the return result like this
{
id: '1',
name: 'Quiz 1',
questions: [
{
position: 4,
title: 'Question 1'
},
{
position: 1,
title: 'Question 2'
}
]
}
How can i get the desired result?
thanks
I got the desired result by using following query
r.db('database').table("quizes").get(id)
.do((quiz) => {
return quiz.merge({'questions': quiz('questions').map((q) => {
return q.merge((r.db('database').table('questions').get(q('id')).without('id')))
})
})
})
I'm working on a grid with a remote filter. So, i set a field in a grid column header.
My question is,
How can i get the field value without field-id ??
See the example below
Thank You
You might be able to bind the value config of your textfield (the textfield in your items of the column header) to an attribute in a view model.
Something like :
var vm = Ext.create('Ext.app.ViewModel', {
data: [{
test : ''
}],
alias: 'viewmodel.myviewmodel',
stores: {
simpsonsStore: Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
data:[
{'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224"},
{'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234"},
{'name': 'Homer', "email":"homer#simpsons.com", "phone":"555-222-1244"},
{'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254"}
]
})
}
});
var grid = Ext.create('Ext.panel.Panel', {
height: 400,
width: 400,
renderTo: Ext.getBody(),
viewModel: vm,
layout: 'hbox',
items:[{
xtype: 'button',
bind: {
text: '{test}'
}
},{
xtype: 'grid',
flex: 1,
bind: '{simpsonsStore}',
columns: [{
text: 'Name',
dataIndex: 'name',
items: [{
xtype: 'textfield',
bind: {
value: '{test}'
}
}]
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}]
}]
});
PS : here is the fiddle ;) https://fiddle.sencha.com/#fiddle/15j6 you can type in your header filed, the button text will updated automatically :)
Trying to have a button push to a different view 'new profile' and 'profile page' (second view) Of course I would have authentication, however just trying to get the views correct before implement the controllers and server side.
Having the following errors:
Uncaught ReferenceError: view is not defined Main.js:116
Uncaught ReferenceError: view is not defined Main.js:126
Google only brings back "ext is not defined" responses.
Forgive the shocking coding as this is my first app for my school assignment (please give feedback how to improve this if possible) I understand that the view needs to be defined, however in the Sencha Touch's API is where I got the information.
Thanks for your time.
var pageFilterGame = {
xtype: 'panel',
title: 'Filter Games',
items: [
{
xtype: 'fieldset',
title: 'Filter games to find the perfect one',
instructions: 'Please fill in atleast one field to start.',
items: [
{
xtype: 'selectfield',
label: 'What enviroment will this game be played in',
options: [
{ text: 'Outside on Grass', value: 'grass' },
{ text: 'Outside on Concrete', value: 'concrete' },
{ text: 'Inside', value: 'inside' }
]
},
{
xtype: 'selectfield',
name: 'equipment',
label: 'What equipment do you have',
options: [{text: 'DB form'}]
},
{
xtype: 'numberfield',
name : 'Player Numbers',
label: 'How many players do you have',
minValue: 2,
maxValue: 50
},
{
xtype: 'numberfield',
name: 'avgname',
label: 'Average age of players',
minValue: 2,
maxValue: 99
},
{
xtype: 'selectfield',
label: 'Sort result by:',
options: [
{ text: 'Highest Rated', value: 'rated' },
{ text: 'Equipment', value: 'equipment' },
{ text: 'Alphabetically', value: 'alpha' }
]
},
],
},
{
xtype: 'button',
ui: 'action',
text: 'Filter Games',
action: '',
maxWidth: '150px'
}
]
};
var pageSearch = {
xtype: 'panel',
title: 'Search',
items: [
{
xtype: 'fieldset',
title: 'Search',
items: [
{
xtype: 'searchfield',
label: 'Search',
name: 'search'
}
]
},
{
xtype: 'button',
ui: 'action',
text: 'Search',
action: '',
maxWidth: '100px'
}
]
};
var pageProfileLogin = {
xtype: 'panel',
title: 'My Profile',
items: [
{
xtype: 'fieldset',
title: 'Please login to access your profile',
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Username'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
clearIcon: false
}
]
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
text: 'Login',
ui: 'confirm',
handler: function() {
view.push({
title: 'Second View',
padding: 10,
})},
},
{
xtype: 'button',
ui: 'action',
text: 'Create New',
handler: function() {
view.push({
title: 'New Profile',
items: [
{
xtype: 'fieldset',
title: 'Please fill in the form to create your profile',
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Username'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
clearIcon: false
},
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
],
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
text: 'Login',
ui: 'confirm',
},
]
}
]
});
}
},
]
},
]}
var viewTabConfig = {
xtype: 'tabpanel',
styleHtmlContent: true,
title: 'Get Creative!',
items: [pageFilterGame, pageSearch, pageProfileLogin]
};
var viewDef = {
//
// Another new UI element introduced. This UI element allows one to add multiple panels in a 'stacked' like operation. A
// new panel when pushed into the NavigationView will be displayed along with a back button. When the back button is tapped,
// the visible view is 'popped' and the parent view gets displayed again. See demo in the lecture recording.
//
extend: 'Ext.NavigationView',
id: 'navView',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.field.Password',
'Ext.field.Select',
'Ext.field.Number',
'Ext.field.Search',
'Ext.form.FieldSet',
'Ext.tab.Panel',
'Ext.data.Store',
'Ext.data.reader.Xml'
],
config: {
fullscreen: true,
items: [viewTabConfig]
}
};
Ext.define("a2.view.Main", viewDef);
I had to add extra models and view to the app.js file and it worked fine.