I have an ENUM like this
define({
DEFAULT:1,
DDL:2,
props:{
1:{name: 'Default', value:1, id:1},
2:{name: 'DDL', value:2, id:2}
}
});
and I want to load it into a dijit/form/FilteringSelect
this is my code
var store = new Memory({
idProperty: "id",
data: type.props
});
var os = new ObjectStore({objectStore: store});
this.unitType = new Select({
name : 'name',
label : dojoConfig.i18n.unitType,
placeHolder: dojoConfig.i18n.unitType,
required: false,
store: os,
value: type.props[1].id,
searchAttr: 'name',
labelAttr: "name",
trim: true
});
but when I expand the dropdown list ... it doesnt expand without any errors in the console ... any idea what I made wrong ? thanks
You dropdown doesn't show anything because the given data wasn't an Array , but a js object ,
The dojo/store/Memory need ana array as data,
So to fix this you can edit your object by changing the object into array , or create and object from this and set to to your select , and this using Object.values(yourObject) that return an array of values from your object .
See below Working snippet :
require(["dijit/registry", "dijit/form/FilteringSelect", "dojo/store/Memory", "dojo/data/ObjectStore"],
function(registry, FilteringSelect, Memory, ObjectStore) {
var type = {
DEFAULT: 1,
DDL: 2,
props:{
1:{name: 'Default', value:1, id:1},
2:{name: 'DDL', value:2, id:2}
}
};
type.props = Object.values(type.props);
var store = new Memory({
idProperty: "id",
data: type.props
});
var os = new ObjectStore({
objectStore: store
});
new FilteringSelect({
name: 'name',
required: false,
store: os,
value: type.props[1].id,
searchAttr: 'name',
labelAttr: "name",
trim: true
}, "select");
});
<script>
dojoConfig = {
isDebug: true,
parseOnLoad: true,
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<body class="claro">
<select id="select">
</select>
</body>
Related
I am using select2 to select from a list the image that I want to be displayed on the screen.
For this I need to set an attribute on each option: s3_key
I want to put this attribute when the select2 is created
I have seen solutions to add data-* attributes when an option is selected. This solution doesn't work for me because
if the input already has a value selected when loading the web page, the image has to be displayed automatically.
$('#id-gci-main').select2({
language: '<?= getLanguage() ?>',
closeOnSelect: true,
allowClear: true,
placeholder: '',
data: <?= $aJsonGCIsPrincipalesOtorgados ?>
}).on('select2:select', function (e) {
var data = e.params.data;
$(this).children('[value="'+data['id']+'"]').attr({
'data-s3_key':data["s3_key"], //dynamic value from data array
});
}).val(0).trigger('load');
The variable $aJsonGCIsPrincipalesOtorgados has the following structure:
var data = [
{
id: 1,
text: 'xxxx'.
s3_key: '/xx/image.png'
},
Is there any way to do this?
Example code:
https://jsfiddle.net/JorgePalaciosZaratiegui/fhad7gmr/12/
don't do that, simply use a js Object select2data:
const data1 =
[ { id: 'key_1', text: 'YY', s3_key: 'xxxx/yy.png' }
, { id: 'key_2', text: 'BB', s3_key: 'wwww/bb.png' }
, { id: 'key_3', text: 'AAA', s3_key: 'wwww/aaa.png' }
]
const select2data = data1.reduce((r,{id,...more})=>(r[id]=more,r),{})
// console.log( select2data )
$("#id-gci-main").select2(
{ closeOnSelect : true
, allowClear : true
, placeholder : ''
, data : data1
}
).on('change', function(e)
{
console.clear()
console.log( select2data[this.value].s3_key )
});
#id-gci-main {
width : 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<select id="id-gci-main" ></select>
I've been trying to update the entire row of my grid, but having issues. I am able to update a single cell (if it doesn't have a formatter), but I would like to be able to update the entire row. Alternatively, I could update the column, but I'm not able to get it working if it has a formatter.
Here is the code that I'm using to update the grid:
grid.store.fetch({query : { some_input : o.some_input },
onItem : function (item ) {
dataStore.setValue(item, 'input', '123'); //works!
dataStore.setValue(item, '_item', o); //doesn't work!
}
});
And the structure of my grid:
structure: [
{ type: "dojox.grid._CheckBoxSelector"},
[[{ name: "Field1", field: "input", width:"25%"}
,{ name: "Field2", field: "another_input", width:"25%"}
,{ name: "Field3", field: "_item", formatter:myFormatter, width:"25%"}
,{ name: "Field4", field: "_item", formatter:myOtherFormatter, width:"25%"}
]]
]
Got some information in the #dojo freenode channel from 'tk' who kindly put together a fiddle showing the proper way to do this, most noteably putting an idProperty on the memoryStore and overwriting the data: http://jsfiddle.net/few3k7b8/2/
var memoryStore = new Memory({
data: [{
alienPop: 320000,
humanPop: 56000,
planet: 'Zoron'
}, {
alienPop: 980940,
humanPop: 56052,
planet: 'Gaxula'
}, {
alienPop: 200,
humanPop: 500,
planet: 'Reiutsink'
}],
idProperty: "planet"
});
And then when we want to update:
memoryStore.put(item, {
overwrite: true
});
Remember that item has to have a field 'planet', and it should be the same as one of our existing planets in order to overwrite that row.
I'm making a dijit.form.Form with two filteringSelect with the possibility to add more custom filteringselects dynamically, but when I try to post the Form with xhr.post no values are submitted, I've tried to convert the form to Json before posting but the object comes empty. I know I can access all the filteringselects values and post them but I was aiming for the "easy submit" automatic way.Thanks for the help in advance.
define([
"dojox/layout/ContentPane",
"dijit/form/Form",
"dijit/form/Button",
"dojox/widget/Standby",
"app/appCW/appWayP",
"dojo/data/ItemFileReadStore",
"dijit/form/FilteringSelect",
"dojo/_base/xhr",
"dojo/dom",
"dojo/on",
"dojo/dom-form",
"dojo/dom-construct",
"dojo/io/script",
"dojo/_base/lang"
], function(ContentPane,Form,Button,Standby,appWayP,ItemFileReadStore,FilteringSelect,xhr,dom,on,domform,domConstruct,script,lang){
return{
initLayout:function(){
var rtCont= new ContentPane({
title: "Route",
id: "rtCont",
style: "height: 100%; width: 100%;margin:0px;padding:3px",
content:"<DIV class=app_title><SPAN>Routing</SPAN></DIV>"+
"<DIV id='NodesList'></DIV>"
});
dijit.byId("AppsTC").addChild(rtCont);
var nodeStore = new ItemFileReadStore({
identifier: "id",
label: "name",
url:"../NodeService"
});
nodeStore.fetch();
var RouteFrm= new Form({
//encType: 'multipart/form-data',
id:"RouteFrm",
action:"../RouteService",
method:"",
onSubmit:function(e){
dojo.stopEvent(e);
var data = domform.toJson("RouteFrm");
alert(data);
var xhrArgs = {
form: dojo.byId("RouteFrm"),
handleAs: "json",
load: function(data){
},
error: function(error){
}
};
var deferred = xhr.post(xhrArgs);
}
},"NodesList");
//This button to add more filteringselects
var pluswPoint = new Button({
id: "pluswPoint",
label: "Add WayPoint",
showLabel: false,
iconClass: "waypointplus",
onClick: function () {
var wContainer = dom.byId("waypoints_container");
var tmpgtest = new appWayP({
'nodeStore':nodeStore
}).placeAt(wContainer);
tmpgtest.startup();
}
});
//This button to submit form
var showRoute= new Button({
id: "showRoute",
label: "Show Route",
showLabel: true,
type:"submit"
});
var inNode= new FilteringSelect({
id:"inNode",
value: "",
store: nodeStore,
'class': 'node_filteringselect',
searchAttr: "name",
placeholder: "Start"
});
var desNode= new FilteringSelect({
id:"desNode",
value: "",
store: nodeStore,
'class': 'node_filteringselect',
searchAttr: "name",
placeholder: "End"
});
RouteFrm.domNode.appendChild(inNode.domNode);
RouteFrm.domNode.appendChild(pluswPoint.domNode);
domConstruct.create("div",{id:"waypoints_container"},RouteFrm.domNode);
RouteFrm.domNode.appendChild(desNode.domNode);
RouteFrm.domNode.appendChild(showRoute.domNode);
RouteFrm.startup();
rtCont.startup();
}
}
});
Try adding a name in addition to the id for the filtering select, the form will not return the value if it does not see a name.
Given data in the form:
var grid_data = [ {Hello: 'World'}, {Jesus:'Navas'} ]
I wish to draw a grid like so:
The grid shows with 2 rows but with no data, I can't find the problem in the following code:
var grid_store = Ext.create('Ext.data.Store', {
fields: [
{name: 'Property'},
{name: 'Value'}
],
data: grid_data
});
// create the Grid
var grid_view = Ext.create('Ext.grid.Panel', {
store: grid_store,
renderTo: 'info_panel',
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Property',
width : 100,
sortable : true,
dataIndex: 'Property'
},
{
text : 'Value',
width : 80,
sortable : false,
dataIndex: 'Value'
}
],
height: 350,
width: 600,
title: 'Array Grid',
viewConfig: {
stripeRows: true
}
});
Renders to:
<div id="info_panel"></div>
If you're wondering how I got the example image, I changed the store to an ArrayStore and re-formatted the data into arrays, but I'd prefer to miss out that step and insert the data as-is.
edit:
I think what I'm really asking for is a way to alert extjs to use the JSON keys as values, as opposed to most of the grid examples out there that take the form:
{value: 'Hello'}, {property: 'World'}
As one of the commenters and your edit suggested, your grid is built to consume a json with 'Property' and 'Value' being the keys for the json objects. I don't know if it's possible for you to change the source of the data to send in the reformatted json, but if not, you can always just run a quick loop to do so after receiving the data:
var new_data = [];
Ext.each(grid_data, function(obj) {
for (var prop in obj) {
new_data.push({
Property: prop,
Value: obj[prop]
});
}
}, this);
In an earlier question, Why is my ExtJS datagrid populating as empty?, I made what was intended to be a "first try" implementation based on Jesus Garcia's ExtJS in Action (five stars on Amazon). When that didn't work, I went to reimplement the example I was trying to follow (pp. 159-161). I corrected a bug where in nameRecord a column is called 'name' and in colModel it is called 'fullName', but otherwise this page implements the example code identically barring whitespace:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/extjs/resources/css/ext-all.css" />
<script type="text/javascript"
src="/extjs/adapter/ext/ext-base-debug.js">
</script>
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
var arrayData = [
['Jay Garcia', 'MD'],
['Aaron Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Stein', 'DE'],
['Bryan Shanley', 'NJ'],
['Nyri Selgado', 'CA']
];
var nameRecord = Ext.data.Record.create([
{name: 'fullName', mapping: 1},
{name: 'state', mapping: 2}
]);
var arrayReader = new Ext.data.ArrayReader({}, nameRecord);
var memoryProxy = new Ext.data.MemoryProxy(arrayData);
var store = new Ext.data.Store({
reader: arrayReader,
proxy: memoryProxy
});
var colModel = new Ext.grid.ColumnModel([
{
header: 'Full Name',
sortable: true,
dataIndex: 'fullName'
},
{
header: 'State',
dataIndex: 'state'
}
]);
var gridView = new Ext.grid.GridView();
var selModel = new Ext.grid.RowSelectionModel({
singleSelect: true
});
var grid = new Ext.grid.GridPanel({
title: 'Our first grid',
renderTo: Ext.getBody(),
autoHeight: true,
width: 250,
store: store,
view: gridView,
colModel: colModel,
selModel: selModel
});
</script>
</body>
</html>
And this fails in the same way as my earlier question (Why is my ExtJS datagrid populating as empty?): it displays the headers but no rows of data.
So I have two questions:
First, what can I learn from this? Is this just what happens when you try to follow this specific title on how to use ExtJS? Is there another book I should be working from instead?
Second, where (if anywhere) can I find simple, working ExtJS datagrid demos that I can get working and then begin to adapt to my purposes?
Change your record creation to
var nameRecord = Ext.data.Record.create([
{name: 'fullName', mapping: 0},
{name: 'state', mapping: 1}
]);
and your store creation to
var store = new Ext.data.Store({
reader: arrayReader,
proxy: memoryProxy,
autoLoad: true
});
Regarding your second question: try the examples page on sencha.com.