I encountered some weird behavior on GridPanel feature of ExtJs. I have included a groupField config option and it is not displayed and as well not working. Maybe you guys can give me an idea why?
createStore : function(itemPath) {
return new
CQ.Ext.data.GroupingStore({
proxy : new CQ.Ext.data.HttpProxy(
{
url : "/bin/test/private/folder/check.json",
method : "GET"
}),
//method: "GET",
reader: new CQ.Ext.data.JsonReader({
root: 'variables',
fields: [
{name: 'group', type: 'string'},
{name: 'path', type: 'string'},
{name: 'status', type: 'string'}
]
}),
updateData : function() {
// request the data
this.load({
params : {
path : itemPath
}
});
},
sortInfo: {field: 'path', direction:'ASC'},
groupField: 'group',
groupOnSort: true,
autoLoad : true
});
},
If you want your groups to be displayed in the grid panel, you also need to add the grouping feature to your grid.
Where is updateData coming from? I am not seeing it in the documentation anywhere. Is that piece of code causing the issue?
Here is the example from Sencha: http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/grouping.html
Make sure you are viewing the 3.4 documentation too.
Related
edit http://jsfiddle.net/zns6B/4/ Added js fiddle link and running into a cannot get 'Fields' of undefined now
edit2 So i found that the second grids store model is correct with Sc.Model.B. But the records in the store have ids that are Sc.Model.A . So my store model is set to Sc.Model.B but the store is using Sc.Model.A . It still gets stores the data in the store but only as if the model was set to Sc.Model.A in the first place.
edit3 I have take all the creation of instance out of my ListGrid. I have instead added them when creating the list grid. I have added the following. This does not work either. I am at a lose for what to do.
var obj1 = Ext.create('Sc.ListGrid',{
title: "first Component",
foo: true,
id: 'firstGrid',
myStore: Ext.create('My.Store.MyStore',{model:Ext.create('My.Model.Model'});
renderTo: 'renderToMe1'
});
I am trying to generate these two grids. When foo == true i want it to generate a store with model A. When it equals false i want it to use model B. I have tried to just specifically add the My.Model.MyModel but that does not work. The second grid will somehow inherit the first models model. I have changed it just to try and use fields instead of using the model at all but the second grid still uses the first grids.
I have also tried declaring the Stores inside the initComponent as well but i get the same result either way.
var obj1 = Ext.create('Sc.ListGrid',{
title: "first Component",
foo: true,
id: 'firstGrid',
renderTo: 'renderToMe1'
});
var obj2 = Ext.create('Sc.ListGrid',{
title: "second Component",
foo: false,
renderTo: 'renderToMe2'
});
Sc.ListGrid
Ext.define('Sc.ListGrid', {
extend: 'Ext.grid.Panel',
title: 'Grid',
store: Ext.data.StoreManager.lookup('bleh'),
requires: ['stuff'],
columns: [
{ text: 'id', dataIndex: 'id' },
],
config:{
foo: null,
},
initComponent: function(){
if(this.foo == true){
Ext.apply(this,{
store: this.buildStore1()
});
}
if(this.foo == false){
Ext.apply(this,{
store: this.buildStore2()
});
}
this.callParent();
},
buildStore1:function(){
return Ext.create('Sc.Store.League.LeagueStore',{url:'somewhere',fields:["S"]});
},
buildStore2:function(){
return Ext.create('Sc.Store.League.LeagueStore',{url:'somewhere',fields:["A"]});
}
});
Also an example of a model i am trying to use as well.
Ext.define('Sc.Model.A', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'type', type: 'string'},
{name: 'gamename', type: 'string'}
]
});
Ext.define('Sc.Model.B', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'type', type: 'string'},
{name: 'gamename', type: 'string'},
{name: 'something1', type: 'string'},
{name: 'something2', type: 'string'},
]
});
It will create both grids and load the data from my webservice. When i check the grid with Sc.Model.B's data it will have id and type. But will not have any data for something1, and something2. My webserivce is returning json and all values are entered. There are no nulls. If i Ext.getCmp('firstGrid').getStore().getData(0); If i use Ext.getCmp('firstGrid').getStore() and check the model name. It shows Model B but reflects A
Do you need it to be done in the initComponent()??
This is a fiddle I saved from a while ago when I was trying to do something similar. If you need help tweaking it let me know and ill update it.
The main thing to note is the grid.reconfigure(store,columns);
That will change the grid's store and columns appropriately.
http://jsfiddle.net/zqG55/1/
The issue was that the proxy wasn't being set or created properly because the proxy model was referencing the previous model instance. This is my solution
var themodel = 'A.Model.SomeModel';
var myProxy = new Ext.data.proxy.Ajax({
model: themodel,
url: url,
reader: {
type: 'json',
}
});
Ext.apply(this,{
columns: modelColumns.columns,
store: Ext.create('M.Store.MyStore',{
model: themodel ,
autoLoad: true,
proxy: myProxy
})
});
I get from server next JSON:
{
"contextPath":"http://apps.dhis2.org/demo",
"user":{
"id":"GOLswS44mh8",
"name":"System Administrator",
"isAdmin":true,
"ou":{
"id":"ImspTQPwCqd",
"name":"Sierra Leone"
}
}
}
I need convert this JSON in two Models : User model and OrganizationUnit model.
I read this tutorial http://docs.sencha.com/touch/2.2.1/#!/api/Ext.data.reader.Reader so it my code :
User model :
Ext.define('mobile-visualizer.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'isAdmin', type: 'boolean'}
],
hasOne: {
model: "mobile-visualizer.model.OrganizationUnit",
name: "ou"
},
proxy: {
type: 'ajax',
url : 'http://apps.dhis2.org/demo/dhis-web-visualizer/initialize.action',
method : 'GET',
withCredentials : true,
useDefaultXhrHeader : false,
reader: {
type: 'json',
rootProperty: 'user'
}
}
}
});
OrganizationUnit model :
Ext.define('mobile-visualizer.model.OrganizationUnit', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'}
],
belongsTo: 'mobile-visualizer.model.User'
}
});
Store :
Ext.define('mobile-visualizer.store.UsersStore', {
extend : 'Ext.data.Store',
model : "mobile-visualizer.model.User",
autoLoad : false,
storeId : "usersStore",
proxy : {
type : 'ajax',
url : 'http://apps.dhis2.org/demo/dhis-web-visualizer/initialize.action',
method : 'GET',
withCredentials : true,
useDefaultXhrHeader : false,
reader : {
type : 'json',
rootProperty : 'user'
}
}
});
So, when I try get user from store using another code :
var store = Ext.create('mobile-visualizer.store.UsersStore');
store.load({
callback : function() {
// the user that was loaded
var user = store.first();
console.log(user.ou())
}
});
I have error : Uncaught TypeError: Object [object Object] has no method 'ou'
I can get all information about user but I can't get ou from user. It look like some association issue.
But I make all as like official tutorial . Please help to resolve this problem.
Thanks.
Follow my rules and everything will come out rosy:
http://extjs-tutorials.blogspot.ca/2012/05/extjs-hasmany-relationships-rules.html
http://extjs-tutorials.blogspot.ca/2012/05/extjs-belongsto-association-rules.html
These are for extjs, but very similar for sencha touch.
You are forgetting the associationKey.
Also, no need to redefine proxy in store as it will inherit its model's proxy.
Also, a user probably belongs to an org unit and doesn't have one...
i want to refresh kitchen sink(http://pydictionary.appspot.com/) sencha's left hand side menu whose data source is json. I have changed the data in .json file but menu doesn't load new data in menu.
data is coming from leftmenu.json
Ext.regModel('Demo', {
fields: [
{name: 'text', type: 'string'},
{name: 'source', type: 'string'},
{name: 'leaf', type: 'boolean'}
]});
sink.StructureStore = new Ext.data.TreeStore({
model: 'Demo',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'leftmenu.json',
reader: {
type: 'tree',
root: 'items'
}
}});
i am trying to reload it in following ways...but not working
sink.StructureStore.setProxy(sink.StructureStore.getProxy());
sink.StructureStore.getRootNode().removeAll();
sink.StructureStore.load();
if your code is correct, after load() list data should automatically change. And we dont need to change the url everytime. only load will work
i just need to add one magical line which i missed
Ext.getCmp("nestedList").onBackTap();
this menu is loaded when user clicks "Table of contents option" of first level menu. now its working
I can't get my application to work using MVC architecture.
Here is the code:
app.js
Ext.application({
name: CONFIG.APP_NS,
appFolder: '../js/app',
autoCreateViewport: true,
/*
models: ['User'],
stores: ['Users'],
//*/
controllers: ['Main', 'Tab', 'Import', 'Export', 'Predict', 'Admin']
});
Import.js (controller)
Ext.define(CONFIG.APP_NS+'.controller.Import', {
extend: 'Ext.app.Controller',
//stores: ['Users'], //Uncommenting this makes the application not load at all
models: ['User'],
views: ['Import.Window', 'Import.Toolbar', 'Import.Grid'],
init: function(){
...
},
...
});
User.js (model)
Ext.define(CONFIG.APP_NS+'.model.User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'username', type: 'string'},
{name: 'password', type: 'string'},
{name: 'salt', type: 'string'},
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'email', type: 'string'},
{name: 'admin', type: 'boolean'},
{name: 'authenticated', type: 'boolean'}
],
hasMany: {model: CONFIG.APP_NS+'.model.Roles', name: 'roles'},
proxy: {
type: 'ajax',
url: 'model/users',
reader: {
type: 'json'
}
}
});
Ext.define(CONFIG.APP_NS+'.model.Roles', {
extend: 'Ext.data.Model',
fields: [
{name: 'role', type: 'string'}
],
belongsTo: CONFIG.APP_NS+'.model.User'
});
Users.js (store)
Ext.define(CONFIG.APP_NS+'store.Users', {
extend: 'Ext.data.Store',
requires: CONFIG.APP_NS+'.model.User',
model: CONFIG.APP_NS+'.model.User'
});
Grid.js (view)
Ext.define(CONFIG.APP_NS+'.view.Import.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.importgrid',
initComponent: function() {
this.store = Ext.create('Ext.data.Store', { //Works fine with the code as it is
model: CONFIG.APP_NS+'.model.User',
proxy: {
type: 'ajax',
url: 'model/users',
reader: {
type: 'json'
}
}
});
//*/
//this.store = Ext.create(CONFIG.APP_NS+'.store.Users', {});
this.columns = [
{header: 'Name', dataIndex: 'username', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
this.store.load();
}
});
I have tried almost every combination of stores: in different files possible, nothing seems to do the trick. If I do not include the store anywhere, I get the error Object is not a function (or TypeError: Cannot call method 'on' of undefined if defined outside of the initComponent in the view) somewhere in internal extjs files. It seems that even if I copy the structure from the tutorial examples, it still does not work, so I must be missing something.
What am I doing wrong?
Thank you for your time.
EDITS:
I am running this code on Wamp (localhost). The server has both ExtJS4 and Symfony installed and running.
Updated error message.
Fixed a typo in the Model, see comments.
(I see you have the stores commented out in the app.js. Is this intentional?)
I ran into a similar problem.. as soon as i added the store to my app.js and view.js (a grid panel), my app stopped working.
I'm pretty sure I fixed it by adding the stores (all of them) to the controller and the app.js. Ok.. just checked again, and I get a different error message if the store was missing from controller.js: "Uncaught TypeError: Cannot call method 'on' of undefined" (this is on chrome). Slightly different error message.
Also, consider commenting out the this.store.load().. i.e. remove the server data-access variable - (one thing at a time.)
I found the bug.
Users.js (store)
Ext.define(CONFIG.APP_NS+'store.Users', {
extend: 'Ext.data.Store',
requires: CONFIG.APP_NS+'.model.User',
model: CONFIG.APP_NS+'.model.User'
});
First line should be:
Ext.define(CONFIG.APP_NS+'.store.Users', {
I was missing a period before store.
Molecule Man's comment made me recheck all the definitions, thank you.
As part of my EXTJS 4 learning process, I am trying to establish a simple process of database connection - loading a value in a data Store - taking the value and placing it in a dataField.
The data is loaded fine from the php script and placed into the Store via a json call. (as confirmed through FireBug)
However, the dataField, does not seem to be able to load the value.
Here is what I have so far:
//Model definition
Ext.define('FingerModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'}
]
});
//Store Definition
var est_data = new Ext.data.Store({
model: 'FingerModel',
proxy: {
type: 'ajax',
url: 'finger.php',
extraParams: {opt: 'getName'},
reader: {
type: 'json',
root: 'results',
totalProperty: 'total'
}
},
autoLoad: true,
// turn off remote sorting
remoteSort: false
});
//Form definition
var fingerForm = Ext.create('Ext.form.Panel', {
width: 500,
title: 'Finger',
waitMsgTarget: true,
items: [{
xtype: 'fieldset',
title: 'Finger Form',
items: [{
xtype:'textfield',
fieldLabel: 'Location Name',
name: 'name'
}]
}]
});
fingerForm.getForm().loadRecord(FingerModel);
Anybody see anything obvious that I'm doing wrong?
Thanks in advance.
M.
Ext.form.field.Text does not have a 'store' property. How would it know which row of the store to use?
You should use Form.loadRecord() to load the model into the form, and it will set form fields with the same name as the model field names.