Develop Reference

cellEditableCondition always returning false

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.

TypeError: overHeader is undefined after using reconfigure on grid

I was running into this error when using the grid reconfigure method.
TypeError: overHeader is undefined [Break On This Error]
This is the Error i saw at ext-dev.js (overHeader.isOnLeftEdge(e))
and the warnings are showing up :
Ext.grid.header.Container attempted to reuse an existing id h1
The code snippet is :
initComponent: function () {
var searchGrid=this;
searchGrid.plugins = [ Ext.create('Ext.ux.grid.HeaderFilter'), Ext.create('Irm.grid.GridResetView')];
searchGrid.columns = [{
header: '',
dataIndex: '',
sortable: false,
menuDisabled: true,
hideable: false,
draggable: false,
width: 25,
tdCls : 'grid-cell-wordwrap',
componentCls: 'auto-test-search-result-grid-header-cart-icon',
renderer: function (value, metaData, record) {
var returnValue;
returnValue = 'my return value';
return returnValue;
}
},{
header : '<span data-qtip="'+searchGrid.translate('search.gridHeadAsset')+'">'+
searchGrid. translate('search.gridHeadAsset')+'</span>',
dataIndex : 'assetType',
sortable : true,
hideable: false,
draggable : false,
width : 90,
componentCls : 'auto-test-search-result-grid-header-asset-type',
tdCls : 'grid-cell-wordwrap',
renderer : function (value, metaData, record) {
var assetType = value,
boxContents = '',
returnValue;
returnValue = 'adfasf';
return returnValue;
} // this is how its declare in the view
var myGrid = this.getSearchGrid(); // this is general grid which
var myStore = this.getRetrievalItemsStore(); // this is attached to the store from where it brings the data
myGrid.reconfigure(myStore,filterColumns); // filter colums are the new set of columns i want to set to the grid.
can any one please let me know why this is happening?
I really Appreciate your help..this is happening in ext js 4.07.
EDIT :
Found the problem
This problem happens when the grid declaration is in one file and we are using columns for reconfiguration. if we see we are sending an array of columns, but reconfiguration needs an array of objects , i.e the configuration at the declaration time. Use another variable to send the raw config to the new file or make sure ur declaration of grid is on the same page as the reconfig method.
Please correct me if am wrong.
Glad if this helps anyone.

List not populating with a JsonP proxy

I want to have a Navigation view. I am trying to populate the list in Sencha Touch using a JsonP proxy.
Here's the sample code snippet of what I have tried till now :
var view = Ext.define('MyApp.view.NavigateView', {
extend: 'Ext.navigation.View',
xtype:'navigateview',
config : {
fullscreen:true,
styleHtmlContent:true,
scrollable:true,
items : [
{
title:'Navigation',
items : [
{
xtype:'list',
store: {
fields : ['title','author'],
proxy : {
type:'jsonp',
url:'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
},
autoLoad:true,
},
itemTpl:'<div class="contact">{title} <strong>{author}</strong></div>',
listeners : {
itemtap : function(){
Ext.Msg.alert('Called');
}
}
}
],
}
]
}
});
But the problem is, my list is not getting populated. No items are being shown up in the list.
Also, I am constantly getting this error on console.
XMLHttpRequest cannot load
http://api.tinyhippos.com/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=list.php%3F_dc%3D1334462633038%26page%3D1%26start%3D0%26limit%3D25.
Origin http://localhost is not allowed by Access-Control-Allow-Origin.
Anyone please guide ? Anything that I am missing here ?

i was facing the same error when using AJAX request in cross domain.
have a look here
you have to make sure that the server part is configured properly using jsonp
as a first step identify if your application will run correctly when you disable web security in your browser
locate your chrome installation directory
then type in your cmd: chrome --disable-web-security

Your Ext.navigation.View object is containing one Ext.Component object (xtype not defined so defaulted to 'component') that is containing your list. If you put your list directly as an item of your view, it'll be rendered:
var view = Ext.define('MyApp.view.NavigateView', {
extend: 'Ext.navigation.View',
xtype: 'navigateview',
config : {
fullscreen: true,
styleHtmlContent: true,
scrollable: true,
items : [{
title: 'Navigation',
xtype: 'list',
store: {
fields: ['title','author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
},
autoLoad:true
},
itemTpl: '<div class="contact">{title} <strong>{author}</strong></div>'
}]
}
});
Note1: Not sure why your code is not working.
Note2: The error your mentioned is not related to your code snippet

Extjs 4 gridrow draws blank after model save

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() );

Read JSON string in ExtJS Combobox

I'm trying to read the following string in an ExtJS combobox:
[
{"id":"1","company_name":"company a"},
{"id":"2","company_name":"company b"}
]
EDIT: I think there is some problem with the way my JSON data source is formatting the string because i dont have any root here. Is it important to have a root element?
Here is my Ext JS code:
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://somesite.com/someFile.php'
}),
reader: new Ext.data.JsonReader({},
[
{name: 'id', mapping: 'id'},
{name: 'company_name', mapping: 'company_name'},
]
)
});
var search = new Ext.form.ComboBox({
store : ds,
fieldLabel : 'Query string',
displayField : 'company_name',
typeAhead : true,
loadingText : 'Searching...',
pageSize : 5,
renderTo : Ext.getBody(),
width : 200,
mode: 'remote'
});
});
But unfortunately, i'm unable to get this to work. :( Please help!
I'm a n00b at JavaScript.

Yes, you'll need a root. See the docs for JsonReader, the 'root' config option is required.
Also: if you're not doing some cross-domain fetching of data, you probably shouldn't be using ScriptTagProxy. ScriptTagProxy requires that the server wrap the json-encoded data in a function call. If you're just calling back your same server, use HttpProxy instead.