JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">
JavaScript
var store = '[{"photo_id":1,"file_name":"test.JPG","x":123,"y":456},{"photo_id":2,"file_name":"test2.JPG","x":321,"y":765}]';
var storeVar = new Ext.data.Store({
extend: 'Ext.data.Model',
fields: ['photo_id', 'file_name'],
data: Ext.JSON.decode(store) // contains the json string
});
var Grid2Store = new Ext.data.JsonStore({
root: 'users',
fields: [ 'name', 'email' ],
//autoLoad: true,
data: { users: [
{ "name":"John Smith", "email":"[email protected]"},
{ "name":"Anna Smith", "email":"[email protected]"},
{ "name":"Peter Smith", "email":"[email protected]"},
{ "name":"Tom Smith", "email":"[email protected]"},
{ "name":"Andy Smith", "email":"[email protected]"},
{ "name":"Nick Smith", "email":"[email protected]"}
]}
});
var comp = new Ext.ux.form.SuperBoxSelect({
xtype: 'superboxselect',
fieldLabel: 'superboxselect',
name: 'superboxselect',
displayFieldTpl : '{email}',
valueField : 'name',
store : storeVar,
resizable: true,
forceSelection : true,
//iconcls : 'closeConfig',
mode : 'remote',
anchor:'100%',
width : '400'
});
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
renderTo: Ext.getBody(),
frame: true,
width: '100%',
items: [
{
anchor: '100%',
displayField: 'file_name',
valueField: 'photo_id',
store: storeVar,
xtype: 'combo',
multiSelect: true,
fieldLabel: 'Select an image',
allowBlank: false
},
{
xtype: 'superboxselect',
fieldLabel: 'superboxselect',
name: 'superboxselect',
displayField: 'file_name',
valueField: 'photo_id',
store : storeVar,
resizable: true,
forceSelection : true,
//iconcls :...