I need to create an oriented graph that simulate a conversation. Is it possible to create such a graph with Cytoscape.js?
I would need something like:
elements: [
{data: {id: '1', content:'Hi, I am John ...'}},
{data: {id: '2', content:'Hi, I am Max ...'}},
{data:{id: '1_2', source: '1', target: '2' }}
],
And then the content to be displayed inside the node:
You first need to set text-wrap to wrap and then you can create multi-line labels by using \n in the label. For example: setting label to Hello\nWorld will be rendered as
Hello
World
Here is an example: https://jsbin.com/galokipuqu/1
Also see the documentation for more details.
P.S: Max is the main developer of Cytoscape.js :)
Related
I'm working with react-select, to add a multi-select control in my web-app. http://jedwatson.github.io/react-select/
I'm looking for a good example to inject mobx observables into the control.
The first challenge I have is initialising the options in an async way (options are fetched from server, but after that I want regular filtering to apply, no need for async-options).
Any good examples out there?
import Select from 'react-select';
<Select
multi
disabled={this.state.disabled}
value={this.state.value}
placeholder="Select your favourite(s)"
options={this.state.options}
onChange={this.handleSelectChange}
/>
As noted in MobX documentation, due to limitations in ES5, ObservableArray still has some quirks. react-select is one of those libraries that don't work with ObservableArray out of the box. There are 2 ways to solve this.
Method 1
you already have an observable array with label and value
#observable myOptions = [
{label: 'foo', value: 123},
{label: 'bar', value: 345}
]
then you can use the ObservableArray's .peek() method to return a regular array for read-only purposes
<Select
options={this.myOptions.peek()}
onChange={this.handleSelectChange}
/>
Method 2
You have the observable array in some other format, returned from server. This is a more common case, actually.
#observable peopleData = [
{name: 'foo', _id: 123, address: 'fooville'},
{name: 'bar', _id: 345, address: 'barville'}
]
in this case, you can create a #computed value, which also returns a plain array:
#computed get peopleOptions() {
return this.peopleData.map(x => ({ label: x.name, value: x._id })
}
and connect the Select component to the computed value, which will auto-update each time new data from server are fetched.
<Select
options={this.peopleOptions}
onChange={this.handleSelectChange}
/>
in both cases, this.handleSelectChange should just update the original data.
Can we use Array Instead of Store for List in "sencha touch".
config:{
store: 'storeName',
scrollable: true,
itemTpl: '<div>{store_id}</div>'
}
This is config part of my store I want to use array for this list instead of store.
Please provide some code.
Thanks.
You can use a List's data config property, which is an array of any fields you want, with some that will match your itemTpl for display. It's basically a direct line into a List's store, which is created in the background for you without needing to be set. You will not need to define the store when setting the data directly.
It's probably best to set the data as an array in a defined store, and then set the store to the list, but you don't have to do it this way, and there are some cases you want to just use a simple array (see example below).
The Sencha Touch documentation shows examples of using the data array without a defined store here.
Sencha Touch 2.1.1 List data example
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
});
You could also set data to an externally defined array, provided your list is created after the array is. If this turns out to be a timing problem, then you can set the data with an array at any later time using
listname.setData(someArray);
Provided you got a proper reference to listname ahead of time.
I'm using Sencha Architect 2.1
I have an Store and a Container, but how can I render the data from the store using the container?
I created a 1 minute video explaining the problem:
http://www.youtube.com/watch?v=_HpR9h80D94
In other words this is what I want to do in Secha Designer 2:
data: ordersStoreId.getData(),
Compleate:
xtype: 'container',
title: 'MyContainer6',
iconCls: 'info',
data: ordersStoreId.getData(),
tpl: [
'Testing: {status}'
]
Any idea? Thanks! :)
So this looks like a bug. I guess one way to work around this issue is to add the show listener to your container and then you can dynamically pull in data from your store.
listeners: {
show: function(this, opts){
this.setData( Ext.getStore('yourStore').getData() );
}
}
So in Architect:
1) Select your container
2) In your config window add an Event Bindings by clicking the + icon and choose Basic Event Binding
3) Choose the event name show like I suggested. You will then be presented with an editable code view where you can put your code. ex:
this.setData( Ext.getStore('yourStore').getData() );
Hope this helps.
I'm using Sencha Touch in one of my mobile projects. As one of the components of it I'm using the Picker. I know that the picker values are being got from the "data" attribute which is an array containing object like so:
[{"text":"One","value":1},{"text":"Two","value":2},{"text":"Three","value":3}]
However what I need to do is - fill the picker with values from an array which is being generated dynamically from a store. Could anybody help me with this, please?
Thanks.
Use Ext.Picker.Slot which allows you to add a Ext.data.Store to it. The store will enable you to get data from server and the Picker slots will be populated.
This is what given in Sencha docs:
A general picker class. Ext.picker.Slots are used to organize multiple
scrollable slots into a single picker. slots is the only necessary configuration.
The slots configuration with a few key values:
name: The name of the slot (will be the key when using
getValues in this Ext.picker.Picker)
title: The title of this slot (if useTitles is set to true)
data/store: The data or store to use for this slot.
Remember, Ext.picker.Slot class extends from Ext.dataview.DataView.
{
xtype:'picker',
width:'100%',
height:'100%',
id:'chooseLocationRoomListPicker',
baseCls:'pickerCls',
cancelButton: false,
doneButton: false,
toolbar:false,
slots : [{
name:'chooseLocationRoomListPickerList',
store: Ext.getStore('roomStore'),
displayField: 'level',
valueField: 'id',
align:'center',
value:'202'
}]
}
I would like to have images displayed in a horizontal list.
This is what I've done so far :
var list = Ext.create('Ext.List',{
store: store,
itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
inline:true,
scrollable: {
direction: 'horizontal',
directionLock: true
}
});
My store has 5 items, but the list only display two (because the screen is not large enough to display more than two images).
I tried to solve this problem by setting the width of my list to 1000px like so :
style:'width: 1000px',
All the items are now shown, but now, the problem is the list is not scrollable anymore. I can't go further than the width of the screen.
[UPDATE]
I've tried with a hbox panel but nothing is showing. Any idea why ?
var hbox = Ext.create('Ext.Panel',{
layout:'hbox',
style:'background-color:red;',
data: [
{name: 'Jamie', age: 100},
{name: 'Rob', age: 21},
{name: 'Tommy', age: 24},
{name: 'Jacky', age: 24},
{name: 'Ed', age: 26}
],
tpl: new Ext.XTemplate('{name}')
});
this.setItems([hbox]);
I just see a red background?
Did you try passing an object instead of just true for the 'inline' config:
var list = Ext.create('Ext.List',{
store: store,
itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
inline: { wrap: false },
scrollable: {
direction: 'horizontal',
directionLock: true
}
});
In the docs, they mention this avoids your wrapping problem and enables horizontal scrolling:
http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.DataView-cfg-inline.
I did not try it though.
Hope this will work for you.
Ok, I finally found this working example which was quite helpful :
http://dev.sencha.com/deploy/touch/examples/production/list-horizontal/index.html
You can also find it in the examples/production/list-horizontal when you download Sencha Touch 2
It's not a really good idea (or might be impossible) to create a horizontal Ext.List
If you tends to produce something like "image slider" or "carousel", then it would be better if you create an Ext.Carousel or something that is more customizable, hbox. Ext.Carousel is easy and well-documented, so I will talk a little bit more about hbox.
The idea is, first you create an empty hbox with fixed height. Then, you can eventually add items to it. Each item is whatever you like, for example: Ext.Image in your case. Each of your hbox item is a component then you can easily customize it the way you want.
Hope this idea helps.