Dojo populate combo box widget dynamically - dojo

Could someone please explain to me why this simple straight forward code isnt working,
var serviceStore = new dojo.data.ItemFileWriteStore({
data: {identifier: "serviceCode",items:[]}
});
//jsonObj is a json object that I obtain from the server via AJAX
for(var i = 0; i<jsonObj.length;i++){
serviceStore.newItem({serviceCode: jsonObj[i]});
}
var serviceFilterSelect = dojo.byId('serviceSelect');
serviceFilterSelect.store = serviceStore;
There is no error at all displayed but my combobox with the id "serviceSelect" doesn't display any options, the combo is declared in the html section of my code,
<input dojoType = "dijit.form.ComboBox" id="serviceSelect"></input>
Any pointers towards the right direction will be much appreciated.

First of all you should use dijit.byId to get dojo widget instead of dojo.byId.
Also every item in jsonObj should contains field "name". This field will be displayed in combobox. E.g:
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.ComboBox");
var storeData = {
identifier: 'serviceCode',
items: []
}
var jsonObj = [{
serviceCode: 'sc1',
name: 'serviceCode1'
},
{
serviceCode: 'sc2',
name: 'serviceCode2'
}]
dojo.addOnLoad(function () {
var serviceStore = new dojo.data.ItemFileWriteStore({ data: storeData });
for (var i = 0; i < jsonObj.length; i++) {
serviceStore.newItem(jsonObj[i]);
}
var serviceFilterSelect = dijit.byId('serviceSelect');
serviceFilterSelect.attr('store', serviceStore);
});
And HTML:
<select dojotype="dijit.form.ComboBox" id="serviceSelect" ></select>
It seems that it works.

I can't tell from the code you posted, but if you're having trouble getting the DOM nodes, they may not had a chance to get loaded.
You can try wrapping what you have above with a dojo.ready(function(){ ... });.

Have you put items in your store? I can't tell from the sample that you posted.
var serviceStore = new dojo.data.ItemFileWriteStore({
data: {
identifier: "serviceCode"
,items: [
{serviceCode:'ec', name:'Ecuador'}
,{serviceCode:'eg', name:'Egypt'}
,{serviceCode:'sv', name:'El Salvador'}
]
}
});

For dojo >= 1.6:
dojo.byId('serviceSelect').store=serviceStore;
For dojo < 1.6:
dojo.byId('serviceSelect').attr("store",serviceStore);

Related

SAPUI5 column summing

I developed a SAPUI5 table on frontend having 4 columns, now I need to show the total sum of 1 column. If anyone knows the code related to this please help me
Controller code
onInit: function () {
var oTable = this.byId("producttable");
oTable.addStyleClass("myCustomTable");
//column list item creation
var oTemplate = new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: "{Plant}"
}),
new sap.m.Text({
text: "{PlantDesc}"
}),
new sap.m.Text({
text: "{parts: [ {path: 'NetAmount'}, {path: 'currency'}],type: 'sap.ui.model.type.Currency',formatOptions: {showMeasure: false, maxFractionDigits: 0,roundingMode: 'away_from_zero'}}"
})
]
});
var sServiceUrl = "/sap/opu/odata/sap/ZSALES_PLANT001_SRV/";
//Adding service to the odata model
var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, false);
//Setting model to the table
oTable.setModel(oModel);
oTable.bindAggregation("items", {
path: "/ZSalesheaderSet",
template: oTemplate
});
I am getting the following errors in console
sap-ui-core.js:187 Assertion failed: could not find any translatable
text for key 'Total Sales-Yesterday' in bundle
'./i18n/i18n.properties' Failed to load resource: the server
responded with a status of 503 ()
getSum: function() {
var sum = 0, items = this.getView().byId("tableId").getItems();
for (var i = 0; i < items.length; i++) {
sum = sum + items[i].getBindingContext("urBoundModel").getObject().urColumn
}
return sum;
}
If you have bound the table to a Odata or JSON model. Just Iterate over your items and sum the bound property of the column.

Dojo CompoButton - onClick event of MenuItem issue with its function

I have the following code in dojo creating a ComboButton with several MenuItems of the correlated Menu:
testfunc = function (input) {
//Code that uses input
}
var menu = new Menu({
id: "saveMenu"
});
//array has 10 json objects and each object has an "Id" field
for(var i=0; i<10; i++) {
var temp = array[i]["Id"];
var menuItem1 = new MenuItem({
label: "Option"+i,
onClick: function() { testfunc(temp); }
});
menu.addChild(menuItem1);
}
var comboButton = new ComboButton({
optionsTitle: "Options",
label: "Combo",
dropDown: menu,
---> onClick:function(){ console.log("Clicked ComboButton"); }
}, "combo");
comboButton.startup();
menu.startup();
I need for each MenuItem its onClick function to pass a different variable in the testfunc. Specifically the value of the array[i]["Id"] which is an array that has 10 json objects. With the above code the parameter that is passed in ALL the testfunc functions of ALL the MenuItems is the last one.
Is it possible to pass for each MenuItem the correct array[i]["Id"] value
i.e.
MenuItem0 -> onClick: testfunc(array[0]["Id"])
MenuItem1 -> onClick: testfunc(array[1]["Id"])
MenuItem2 -> onClick: testfunc(array[2]["Id"])
.
.
.
etc
Thanks
I have found a solution to my problem and I think I should share it.
The issue was solved by passing in the testfunc of the onClick event of the menuItem the parameters using the "this" token e.g.
var menuItem1 = new MenuItem({
id: array[i]["Id"],
label: "Option"+i,
onClick: function() { testfunc(this.id, this.label); }
});

Ext JS 4 - how to change content of an item which can't be referenced by an ID

I would really appreciate any help with the following problem:
I need to be able to change content of an item (div or textfield) but the problem is that there are going to be multiple instances of the same window so I cannot use div IDs.
I tried this little example:
var myBtnHandler = function(btn) {
myPanel.items.items[0].html = "Changed by click!";
myPanel.doLayout();
}
var fileBtn = new Ext.Button({
text : 'Change',
handler : myBtnHandler
});
var panel1 = {
html : 'Original content.'
};
var myPanel = new Ext.Window({
title : 'How to change it?',
items : [
panel1,
fileBtn
]
});
myPanel.items.items[0].html = "Changed on load!";
myPanel.show();
Referencing an element by myPanel.items.items[0] works on load but does not work when it's in the button handler - is it a scope-related problem? How to reference an element without its ID?
Thank you very much,
H.
The problem has nothing to do with scope. The first time you set the html property, the component has not yet been rendered, so on initial render it will read the html property off the component. The second time, you're just setting a property on an object, it's not going to react in any way.
Instead, you should use the update() method.
Ext.require('*');
Ext.onReady(function() {
var myBtnHandler = function(btn) {
myPanel.items.first().update("Changed by click!");
}
var fileBtn = new Ext.Button({
text: 'Change',
handler: myBtnHandler
});
var panel1 = {
html: 'Original content.'
};
var myPanel = new Ext.Window({
title: 'How to change it?',
items: [panel1, fileBtn]
});
myPanel.items.items[0].html = "Changed on load!";
myPanel.show();
});
There are several functions that go through elements that belongs to a container. Try using for example down():
btn = panel.down('button');
Where 'button' parameter would mean 'give me element which type is equal to 'button'. Check out Sencha doc for querying various elements too: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery
Following on from Sha's reply. To put his advice in context with your example.
var myBtnHandler = function(btn) {
btn.up('window').down('panel').update('Changed by click!');
}
var fileBtn = new Ext.Button({
text : 'Change',
handler : myBtnHandler
});
var panel1 = {
html : 'Original content.'
};
var myPanel = new Ext.Window({
title : 'How to change it?',
items : [
panel1,
fileBtn
]
});
myPanel.show();
myPanel.update('Changed on load!');

How to empty the datastore in sencha?

I am new to sencha touch. I have a datastore and i want to empty the datastore when the back button is clicked. Is there any method like refresh used to empty the datastore? Can anyone show me a bit of code on it?
This is not working in my case:
{
text: 'Back',
ui: 'back',
width: 50,
handler: function() {
var records = iPolis.journalListStore.getRange();
iPolis.journalListStore.remove(records);
iPolis.Viewport.setActiveItem('journalPanel', {
type: 'slide',
direction:'right'
});
}
}
you can use store.getRange(); to get all records of an Ext.data.Store and then pass those records to store.remove(); function to remove it form store
var records = store.getRange();
store.remove(records);
Ok, i found a solution to my question, i will post it here maby it will help someone.
the problem is that the store was not loaded so i have to getRange after the store load, here is the code :
StoreTrajectoire.on('load',function(store,records,opts){
var points = [];
points =StoreTrajectoire.getRange();
}
this will return an array of objects, to read the array data :
for(var i = 0; i < store.getCount(); i++ ) {
var record = store.getAt(i);
var data = record.get('your attribue')
points.push(p);
console.log(points[i]);
}
wish that can help you.

How to refilter a dojo DataGrid?

I have a DataGrid that I already filtered using grid.filter(query, rerender). If I add another item, after calling save() I see the new item in the grid even though it shouldn't display because of the filter. I'm thinking "ok, I'll just filter it again when the store finishes saving. But after calling grid.filter with the same query all the rows disappear. Any ideas what I might be doing wrong?
Code to filter the grid:
var filterQuery = dijit.byId("filterTextbox").attr("value");
var grid = dijit.byId("grid");
var queryValue = "*";
if(filterQuery != ""){
queryValue += filterQuery + "*";
}
grid.filter({name: queryValue}, true);
Code to add new items to the grid
function addItemToGrid(newItemName){
var newItem = {name: newItemName};
var grid = dijit.byId("grid");
var store = grid.store;
store.addItem(newItem);
store.save();
}
Try to use:
store.newItem(newItem);
instead of store.addItem(newItem);
(addItem is not a standard method to add items into store)
Inside of your addItemToGrid function, try adding an onComplete listener to your save method and sort or filter the grid in the onComplete function
store.save({onComplete: function() {
grid.filter({name: queryValue}, true);
}
});
I had the same problem and only managed to fix it by running the grid filter periodically in the background with the help of some jQuery. Here is some sample code; hope this helps someone else having problems with this.
// ADD JQUERY
<script src="http://code.jquery.com/jquery-latest.js"></script>
.
// PUT THIS IN THE <HEAD> OF THE PAGE
<script type="text/javascript">
$(document).ready(function() {
function filterTheDataGrid() {
if (dijit.byId("grid") != undefined) {
dijit.byId("grid").filter({color: "Red"});
}
}
// RUN THE filterTheDataGrid FUNCTION EVERY ONE SECOND (1000 MILLISECONDS) //
// LOWER '1000' FOR FASTER REFRESHING, MAYBE TO 500 FOR EVERY 0.5 SECOND REFRESHES //
var refreshDataGrid = setInterval(function() { filterTheDataGrid(); }, 1000);
}
</script>
.
// PUT THIS IN THE <HEAD> OF THE PAGE
<script type="text/javascript">
// SETUP THE LAYOUT FOR THE DATA //
var layoutItems = [[
{
field: "id",
name: "ID",
width: '5px',
hidden: true
},
{
field: "color",
name: "Color",
width: '80px'
}
]];
// Create an empty datastore //
var storeData = {
identifier: 'id',
label: 'id',
items: []
}
var store3 = new dojo.data.ItemFileWriteStore( {data : storeData} );
</script>
.
// PUT THIS IN THE <HTML> OF THE PAGE
<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutItems" query="{ type: '*' }" clientSort="true" rowsPerPage="40"></div>
.
<script type="text/javascript">
function addItemToGrid(formdata) {
// THIS FUNCTION IS CALLED BY A DIALOG BOX AND GETS FORM DATA PASSED TO IT //
var jsonobj = eval("(" + dojo.toJson(formData, true) + ")");
var myNewItem = {
id: transactionItemID,
color: jsonobj.color
};
// Insert the new item into the store:
store3.newItem(myNewItem);
store3.save({onComplete: savecomplete, onError: saveerror});
}
</script>