I have a couple of grids, divided in an accordion layout. They basicly show the same kind of data so an grouped grid should do the trick, however it looks really good this way and so far it works good too.
Left of the grids there is a form panel which is used to edit grid records, when I click on a record in the grid the appropriate data shows up in the form. I can edit the data, but when I click the save button, which triggers an 'model'.save() action, the related grid row draws blank and a dirty flag appears. I checked the model and the 'data' attribute doesn't contain any data but the id, the data is present in the 'modified' attribute.
I read that the red dirty flag means that the data isn't persisted in the back-end, but in this case it is. The request returns with a 200 status code and success : true.
The onSave method from the controller:
onSave : function() {
// Get reference to the form
var stepForm = this.getStepForm();
this.activeRecord.set( stepForm.getForm().getValues() );
this.activeRecord.save();
console.log( this.activeRecord );
}
The step store:
Ext.define( 'Bedrijfsplan.store.Steps', {
extend : 'Ext.data.Store',
require : 'Bedrijfsplan.model.Step',
model : 'Bedrijfsplan.model.Step',
autoSync : true,
proxy : {
type : 'rest',
url : 'steps',
reader : {
type : 'json',
root : 'steps'
},
writer : {
type : 'json',
writeAllFields : false,
root : 'steps'
}
}
} );
Step model:
Ext.define( 'Bedrijfsplan.model.Step', {
extend : 'Ext.data.Model',
fields : [ 'id', 'section_id', 'title', 'information', 'content', 'feedback' ],
proxy : {
type : 'rest',
url : 'steps',
successProperty : 'success'
}
} );
Step grid
Ext.define( 'Bedrijfsplan.view.step.Grid', {
extend : 'Ext.grid.Panel',
alias : 'widget.stepsgrid',
hideHeaders : true,
border : false,
columns : [ {
header : 'Titel',
dataIndex : 'title',
flex : 1
} ]
} );
I spend a couple of hours searching and trying, but I still haven't found the solution. Some help on this matter would be appreciated :)
Your model updating code:
this.activeRecord.set( stepForm.getForm().getValues() );
Should work, but I might try splitting it into two lines and setting a breakpoint to verify that getValues() is returning what you're expecting.
Also ensure that you have the name attribute set for each field in your form and that it matches exactly to the names of fields in your model.
Finally, it's better to call .sync() on the store rather than .save() on the model when you're working with a model that belongs to a store. They option autoSync: true on the store will make this happen automatically each time you make a valid update to one of its models.
The BasicForm.loadRecord and BasicForm.updateRecord methods provide a nice wrapper around the functionality you're seeking that may work better:
onRowSelected: function(activeRecord) {
stepForm.getForm().loadRecord(activeRecord);
}
onSaveClick: function() {
var activeRecord = stepForm.getForm().getRecord();
stepForm.getForm().updateRecord(activeRecord);
activeRecord.store.sync();
}
The only oddity I see is with your: this.activeRecord.set( stepForm.getForm().getValues() );
I've always used .set() on the store never on the record. e.g.:
myDataStore.set( stepForm.getForm().getValues() );
Related
I'm trying to get a grid on a website to allow the user the ability to edit cell values for only certain properties. I'm sorry if this is basic level, but I'm new to this type of advanced website design.
I've been looking around and found two previous questions that I tried to draw my functionality from:
How to find if an array contains a specific string in JavaScript/jQuery?
nggrid how can I disable/enable individual column
Combining these, I created the following code so that any row that has "Value" equal to anything in my noneditable list will not be open for the user to change:
noneditable = [ "hamburger", "fries" ]
$scope.gridOptions = {
data : 'gridData',
enableRowSelection : false,
enableCellEditOnFocus : true,
showFooter : true,
columnDefs : [ {
field : 'name',
displayName : 'Parameter',
enableCellEdit : false
}, {
field : 'value',
displayName : 'Value',
/**enableCellEdit : true**/
cellEditableCondition : '$.inArray(row.getProperty(\'value\'), noneditable) == -1'
} ]
};
I'm running this, and its compiling, but all cells in column "Value" are noneditable, even the ones contained in the list (tried both > -1 and == -1 to see if I had just gotten the logic wrong, but both produce the same results). Any thoughts? And thank you in advance.
UPDATE (3/27/15):
I was unable to find the solution to this problem, instead I worked around it by just adding another property on the list of values to be displayed. My operational code is:
$scope.gridOptions = {
data : 'gridData',
enableRowSelection : false,
enableCellEditOnFocus : true,
showFooter : true,
columnDefs : [ {
field : 'name',
displayName : 'Parameter',
enableCellEdit : false
}, {
field : 'value',
displayName : 'Value',
cellEditableCondition : 'row.getProperty(\'editable\')'
}]
};
I'm just posting this code in case it helps someone else out.
I have an XMLView home page containing some tiles. These tiles are populated from a JSON file. The tiles have a 'title' attribute which requires i18n data binding.
Part of the XML view:
<TileContainer id="container" tiles="{/TileCollection}">
<StandardTile
icon="{icon}"
title="{title}"
press="onPress" />
</TileContainer>
JSON file:
{
"TileCollection" : [
{
"icon" : "sap-icon://document-text",
"title" : "{i18n>foo}"
},
... etc
The old way I accomplished data binding was directly in the view with title="{i18n>foo}". Of course now I have essentially two layers of data binding, one in the JSON for the i18n, and one in the view to get the JSON (which gets the i18n).
This is also my Component.js where I set up the i18n model.
sap.ui.core.UIComponent.extend("MYAPP.Component", {
metadata: {
rootView : "MYAPP.view.Home", //points to the default view
config: {
resourceBundle: "i18n/messageBundle.properties"
},
... etc
init: function(){
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
var mConfig = this.getMetadata().getConfig();
var oRouter = this.getRouter();
this.RouteHandler = new sap.m.routing.RouteMatchedHandler(oRouter);
oRouter.register("router");
oRouter.initialize();
var sRootPath = jQuery.sap.getModulePath("MYAPP");
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl : [sRootPath, mConfig.resourceBundle].join("/")
});
this.setModel(i18nModel, "i18n");
}
This question arose from discussion about another question, so there may be more info there for anyone interested. Link
The approach I usually take is using a formatter function, which sole purpose is to get the correct localized value for a certain key (which is maintained in the resource model, and driven by the data model)
For instance, the Tile UI would look like this:
<TileContainer id="container" tiles="{/tiles}">
<StandardTile
icon="{icon}"
type="{type}"
title="{ path : 'title', formatter : '.getI18nValue' }"
info="{ path : 'info', formatter : '.getI18nValue' }"
infoState="{infoState}"
press="handlePress"/>
</TileContainer>
(Notice the formatter function getI18nValue for properties title and info; these are the properties to be translated. The other properties come as-is from the bound JSONModel)
The model could look like this:
tiles : [
{
icon : "sap-icon://inbox",
number : "12",
title : "inbox", // i18n property 'inbox'
info : "overdue", // i18n property 'overdue'
infoState : "Error"
},
{
icon : "sap-icon://calendar",
number : "3",
title : "calendar", // i18n property 'calendar'
info : "planned", // i18n property 'planned'
infoState : "Success"
}
]
where the title and info property values of the JSONModel (for instance, 'inbox' and 'overdue') correspond with a key in your resourcebundle files (and thus your ResourceModel)
The formatter function in the controller (or better, in a standalone JS file, for re-use in multiple views) is then pretty simple:
getI18nValue : function(sKey) {
return this.getView().getModel("i18n").getProperty(sKey);
}
It does nothing more than supplying the value from the model (for instance, 'inbox') and returning the localized value for this key from the resource model
I have an ExtJS form which contains several items that have the same name. I expect that when the form is loaded with the values from server-side all of those equally named components will get assigned the same relevant value.
Apparently, what happens is that only the first element from the group of equally named gets the value, others are skipped.
Is there an easy way to alter this observed behavior?
UPDATE
Below is the code of the form:
var productionRunAdvancedParametersForm = new Ext.form.FormPanel({
region : 'center',
name : 'productionRunAdvancedParametersCommand',
border : false,
autoScroll : true,
buttonAlign : 'left',
defaults : {
msgTarget : 'side'
},
layoutConfig : {
trackLabels : true
},
labelWidth : 200,
items : [
{
xtype : 'fieldset',
title : 'ASE',
collapsible : true,
autoHeight : true,
items : [ {
xtype : 'hidden',
name : 'genScens'
}, {
xtype : 'checkbox',
name : 'genScens',
fieldLabel : 'GEN_SCENS',
disabled : true
}]
}]
,
listeners : {
beforerender : function(formPanel) {
formPanel.getForm().load({
url : BASE_URL + 'get-data-from-server.json',
method : 'GET',
success : function(form, action) {
var responseData = Ext.util.JSON.decode(action.response.responseText);
if (!responseData.success) {
Screen.errorMessage('Error', responseData.errorMessage);
}
},
failure : function(form, action) {
Ext.Msg.alert("Error", Ext.util.JSON.decode(action.response.responseText).errorMessage);
}
});
}
}
});
The server response is:
{"data":{"genScens":true},"success":true}
What happens is only the hidden component gets value 'true', the disabled checkbox doesn't get checked. If I swap them in the items arrays, then the checkbox is checked but the hidden doesn't get any value.
The behaviour you see is exactly what I'd expect.
Inside a form, using the same field name multiple times -unless you use it for radiobuttons, which is not the case- is an error. Just think about what the form submit function should do in this case: should it send the same key (input name) twice, possibly with different values?
(Obviously, in the case of radiobuttons the answer is simple: sent the input name as key, and the checked radiobutton's value as value).
What Ext does here is, scan the form seaching for the input field matching the name, and then assign the value to the first matching input (since it assumes no duplicate names).
You can work it around simply by:
using two different names in the form (eg. genScens and genScens_chk )
sending the same value under two different keys in the server-side response, e.g.
{"data":{"genScens":true,"genScens_chk":true},"success":true}
Please note: if you cannot alter the server response, still use two different names, just add a callback to the success function, setting the genScens_chk value accordingly, like that:
success : function(form, action) {
var responseData = Ext.util.JSON.decode(action.response.responseText);
if (!responseData.success) {
Screen.errorMessage('Error', responseData.errorMessage);
}
else{
formPanel.getForm().findField("genScens_chk").
setValue(responseData.data.genScens);
}
},
i'm trying to set a pagingtoolbar on my livesearchgridpanel.i'm getting the data over a Httpproxy ,so here is my store :
tempStore = new Ext.data.Store
({
groupField : default_groupby_s,
model : 'reportWorkspace',
allowFunctions : true,
autoSync : false,
pageSize : 20,
autoLoad : true,
remoteSort : false,
proxy : new Ext.data.HttpProxy
({
url : url_s,
actionMethods :
{
read : 'POST'
},
reader :
{
type : 'json',
root : 'workspace_report',
successProperty : 'success'
}
})
});
return tempStore ;
}
and here is my pagingtoolbar ,it will be included in my LivesearchgridPanel:
{
xtype: 'pagingtoolbar',
store: tempStore ,
dock: 'bottom',
pageSize:20,
displayInfo: true
}
the problem,it's that the pagingtoolbar is displaying pages correctly,but in the case of my grid,it displays ALL the data at the same time (in every page) . is it possible to do it without setting any starting point or limit in the autoload param ??
i just want to download all my data and then display it Correctly with pages
Any suggestion Please ?
I see several incosistencies:
LiveGrid was not built for paging at all but as an alternative to it.
ExtJS 4.1x no longer uses HTTP Proxy class but instead uses type: 'ajax' proxy config.
If you are going to page your data, you need to remote sort it, otherwise it won't make sense.
You have to make sure your grid panel and your pagingtoolbar refer to the same store instance. A common config for that in a grid panel is:
.
this.dockedItems = [
{
xtype:'pagingtoolbar',
store:this.store, // same store GridPanel is using
dock:'bottom',
displayInfo:true
}
];
Good day, i have a grid with boolean column:
var grid = Ext.create('Ext.grid.Panel', {
...
columns: [{
dataIndex: 'visibleForUser',
text: 'Visible',
editor: {
xtype: 'checkboxfield',
inputValue: 1 // <-- this option has no effect
}
},
...
Grid's store is remote via JSON proxy. When i save or update row, the resulting JSON
look like:
{... visibleForUser: false, ... }
As you see, ExtJS serializes checkbox value as true or false JSON terms.
I need to customize this and serialize to, say, 1 and 0, any suggestion how to accomplish this ? Thank you.
I've just changed my checkboxes system-wide to always act/respond to 0 and 1:
Ext.onReady(function(){
// Set the values of checkboxes to 1 (true) or 0 (false),
// so they work with json and SQL's BOOL field type
Ext.override(Ext.form.field.Checkbox, {
inputValue: '1',
uncheckedValue: '0'
});
});
But you can just add this configs per checkbox.
Ext JS 4.1.1 has a new serialize config on record fields. When a writer is preparing the record data, the serialize method is called to produce the output value instead of just taking the actual field value. So you could do something like this:
fields: [{
name: "visibleForUser",
type: "boolean",
serialize: function(v){
return v ? 1 : 0;
}
/* other fields */
}]
I try to avoid overriding default component behavior whenever possible. As I mentioned, this only works in 4.1.1 (it was introduced in 4.1.0 but I believe it was broken). So if you're using an earlier version, one of the other answers would suit you better.
You can try to override getValue
Ext.define('Ext.form.field.Checkbox', {
override : 'Ext.form.field.Checkbox',
getValue: function () {
return this.checked ? 1 : 0;
}
});