I am working in extjs4 MVC. I am getting stuck at a point where I have been working on association.Association is working properly when I am using in my system local side.But when I am uploading it to server side then the associated data is not displaying.I am trying a lot but not getting answer how this conflict occurs.
My application is working properly at client side.It displays associated data also.But when when I uploading data to server side then it does not display associated data.
Here is my application's some part which is working at local side:--
But when I am uploading my side to server side then the options means associated data is not displayed
Here Is my some code:--
1) Model class :--
Ext.define('B.model.kp.PollModel',{
extend: 'Ext.data.Model',
idproperty:'',//fields property first position pk.
fields: ['pollId','pollQuestion','isActive','pollTypeId','createDate','userId','publishDate','isPublished','approvalUserId','percentagevotes','optionId'],
hasMany:{
model:'B.model.kp.PolloptionModel',
foreignKey:'pollId',
name:'options',
},
proxy:
{
type:'ajax',
api:
{
read:'index.php/KnowledgePortal/Poll/GetPublicPoll',
create:'index.php/KnowledgePortal/Pollvote/setPollVote',
},//End of api
reader:
{
type:'json',
root: 'polls',
//successProperty: ,
},//End of reader
writer:
{
type:'json',
root: 'records',
//successProperty: ,
},
}//End of proxy
});
2) Store class :--
Ext.define('B.store.kp.PollStore',{
extend: 'Ext.data.Store',
model: 'B.model.kp.PollModel',
autoLoad: true,
});//End of store
3) View class:--
Ext.define('B.view.kp.poll.PollView',{
extend:'Ext.view.View',
id:'pollViewId',
alias:'widget.PollView',
store:'kp.PollStore',
config:
{
tpl:'<tpl for=".">'+
'<div id="main">'+
'</br>'+
'<b>Question :-</b> {pollQuestion}</br>'+
'<tpl for="options">'+
'<p>{#}.<input type="radio" name="{parent.pollId}" value="{optionId}"> {option}</p>'+
'</tpl></p>'+
'</div>'+
'</tpl>',
itemSelector:'div.main',
},
});// End of login class
4) here is my main view class
Ext.define('B.view.kp.poll.Poll',{
extend:'Ext.form.Panel',
requires:[
'B.view.kp.poll.PollView'
],
id:'pollId',
alias:'widget.Poll',
title:'Poll',
//height:180,
items:[
{
xtype:'PollView',
},
],//end of items square
buttons:[
{
disabled:true,
name:'vote',
formBind:true,
text:'vote',
action:'voteAction'
},
{
text:'result',
action:'resultAction',
}
]
});
5) And here is the json file --
{
'polls': [
{
"pollId": 1,
"pollQuestion": 'Who will win the match',
"options": [
{
"optionId":1,
"option":'India',
"pollId":1
},
{
"optionId": 2,
"option": 'Pakistan',
"pollId":1
},
{
"optionId": 3,
"option": 'Srilanka',
"pollId":1
},
{
"optionId": 4,
"option": 'Australia',
"pollId":1
},
],
}
]
}
6) PollOption model class :--
Ext.define('B.model.kp.PolloptionModel',{
extend: 'Ext.data.Model',
//idproperty:'',//fields property first position pk.
fields: ['optionId','option','pollId','percentagevotes'],
associations:[
{type:'HasMany', model:'Pollvotemodel', foreignKey:'optionId'},
{type:'BelongsTo', model:'PollModel', foreignKey:'pollId'},
]
});
Please someone give me some suggestion to solve this problem...
are you sure your server-side data feed is exactly the same as your local data feed.
Are the related questions entered into the live database?
Related
In an effort to create a treepanel, i configure it with a treestore whose AJAX proxy url receives json data i have no control of. But using Ext.data.reader.Json's transform property invokable before readRecords executes, gives an option to modify the passed raw (deserialized) data object from the AJAX proxy into a modified or a completely new data object. The transform config, gives the code snippet below:
Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'users.json',
reader: {
type: 'json',
transform: {
fn: function(data) {
// do some manipulation of the raw data object
return data;
},
scope: this
}
}
},
});
I would please like an example on how to go about modifying the return JSON object
[
{
"id": 3,
"attributes":
{},
"name": "user_one",
"login": "",
"email": "user_one#ats",
"phone": "0751223344",
"readonly": false,
"administrator": false,
"password": null
},
{
"id": 4,
"attributes":
{},
"name": "user_two",
"login": "",
"email": "user_two#ats",
"phone": "0751556677",
"readonly": false,
"administrator": false,
"password": null
}
]
into a JSON object fit for a treestore.
The hierarchical tree is to be rendered to show which user is under which admin using a condition administrator==true from the returned JSON, then a second AJAX request that returns that admin's users shown here.
[
{
"user_id": 3,
"admin_id": 1,
},
{
"user_id": 4,
"admin_id": 2,
}
]
Is the data nested at all? Otherwise why use a treepanel instead of a grid? To your question though, it'll depend on how you configure your treepanel but it would probably be something like this:
transform: {
fn: function(data) {
var treeRecords = Ext.Array.map(data, function(i){
return {
text: i.name,
leaf: true
//any other properties you want
}
});
var treeData = {
root: {
expanded: true,
children: treeRecords
}
};
return treeData;
},
scope: this
}
I try to setup a hasMany relationship and want load my main entity with all the associated models in a single request.
But that seems not to work with "hasMany" relations that is inherited.
I have a BaseModel that defines all relations and fields and a "normal" model that defines the proxy to load from.
These are my (relevant) models:
Ext.define('MyApp.model.BaseUser', {
"extend": "Ext.data.Model",
"uses": [
"MyApp.model.UserEmail",
"MyApp.model.Account"
],
"fields": [
{
"name": "name"
},
{
"name": "accountId",
"reference": {
"type": "MyApp.model.Account",
"role": "account",
"getterName": "getAccount",
"setterName": "setAccount",
"unique": true
}
}
]
"hasMany": [
{
"name": "emails",
"model": "MyApp.model.UserEmail"
}
],
});
Ext.define('MyApp.model.User', {
extend: "MyApp.model.BaseUser",
proxy: {
type: 'rest',
url : '/api/user',
reader: {
type: 'json',
rootProperty: 'data',
}
}
});
Ext.define('MyApp.model.UserEmail', {
extend: 'Ext.data.Model',
"fields": [
{
"name": "id",
"type": "int"
},
{
"name": "email",
"type": "string"
},
],
proxy: {
type: 'rest',
url : '/api/user/email',
reader: {
type: 'json',
rootProperty: 'data',
}
}
});
// MyApp.model.Account looks like MyApp.model.UserEmail
This is my server's response:
{
data: [
{
name: 'User Foo'
accountId: 50
account: {
id: 50,
balance: 0
},
emails: [
{
id: 70,
email: 'hello#world.de'
}
]
}
]
}
The "account" relation is working on the "normal" User Model and I can access it via the auto-generated method user.getAccount() as I expected.
Now I tried to access the users emails with the auto-generated methods:
// user is of 'MyApp.model.User'
user.emails(); // store
user.emails().first(); // null
user.emails().count(); // 0
It seems that the "emails"-relation models were not loaded into my user model. Am I accessing them the right way?
I can access them via user.data.emails. But this is an array of plain objects, not of UserEmail-Objects.
Can anyone give me some advice? Is nested loading supported with keyless associations?
Kind regards,
czed
Edit:
Clearified what I ment.
It should work. Here's a working fiddle. Check console for nested loaded data.
Trying to display Milestone for each release, but when trying to create DataStore for Milestone getting error
Uncaught Rally.data.ModelFactory.getModel(): Could not find registered factory for type: milestone
below is my code any ideas or suggestions on this
_getMileStones: function(startDate, endDate, project_id) {
var startDateFilter = Ext.create('Rally.data.QueryFilter', {
property: 'TargetDate',
operator: '>',
value: startDate
});
startDateFilter = startDateFilter.and({
property: 'TargetDate',
operator: '<',
value: endDate
});
startDateFilter = startDateFilter.and({
property: 'TargetDate',
operator: '!=',
value: null
});
startDateFilter = startDateFilter.and({
property: 'TargetDate',
operator: '!=',
value: null
});
var filters = startDateFilter;
Ext.create('Rally.data.wsapi.Store',{
model: 'milestone',
autoLoad: true,
filters: filters,
context: {
project: project_id,
projectScopeDown: true,
projectScopeUp: false
},
fetch: ['Name','FormattedID','DisplayColor'],
listeners: {
load: function(store,records) {
console.log("records values", records);
}
}
}, this);
},
The current stable rc3 release candidate of AppSDK2 predates milestones. They are not available in rc3. When I use rc3 I get the same error you get. If I switch to "x", in the app's config file, and use rab build to rebuild the app, the error goes away:
{
"name": "myapp",
"className": "CustomApp",
"server": "https://rally1.rallydev.com",
"sdk": "x",
"javascript": [
"App.js"
],
"css": [
"app.css"
]
}
Generally it is not recommend using "x" because it is constantly changes. It is not a stable version. But as long as you know that, you may use "x". The AppSDK next release may not be too far in the future, and it will include support for Milestones.
UPDATE: AppSDK2.0 GA has not been announced yet, but it is expected to be released soon. If you use "sdk":"2.0" you get Milestone data.
"x" returns Milestones, but it is a head version that is subject to constant changes. 2.0rc3 does not have Milestones.
You may choose to use 2.0 even though it is not formally available yet.
This app example:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.wsapi.Store',{
model: 'milestone',
autoLoad: true,
fetch: ['Name'],
listeners: {
load: function(store,records) {
console.log("records values", records);
}
}
}, this);
}
});
Along with this config:
{
"name": "milestones",
"className": "CustomApp",
"server": "https://rally1.rallydev.com",
"sdk": "2.0",
"javascript": [
"App.js"
],
"css": [
"app.css"
]
}
will return milestone data:
I try to use Ext.Direct with the ExtJS 4 MVC structure, and I'm not able to add the provider.
I get the error Uncaught TypeError: Cannot call method 'addProvider' of undefined while calling addProvider:
Ext.Direct.addProvider(Ext.app.REMOTING_API);
I tried both in launch of the application and in initof the controller.
Ext.define('Dir.Application', {
require: [
'Ext.direct.*',
'Ext.data.*',
'Ext.grid.*'
],
launch: function(){
Ext.Direct.addProvider(Ext.app.REMOTING_API);
}
...
});
and
Ext.define('Dir.controller.Main', {
init: function(){
Ext.Direct.addProvider(Ext.app.REMOTING_API);
}
...
});
both give the same error.
Where is the correct location to put addProvider into the code ?
Update: applying the recommendations of #rixo.
Ext.define('Dir.Application', {
view:['Grid'],
requires: [
'Ext.direct.*',
'Ext.data.*',
'Ext.grid.*'
],
launch: function(){
Ext.Direct.addProvider(Ext.app.REMOTING_API);
}
...
});
My view is defining a store and a proxy:
Ext.define('Dir.view.Grid', {
extend: 'Ext.grid.Panel',
store: {
proxy: {
type: 'direct',
reader:{root: 'table'},
api: {
create: QueryDatabase.createRecord,
read: QueryDatabase.getResults,
update: QueryDatabase.updateRecords,
destroy: QueryDatabase.destroyRecord
}
}
...
}
Now the first error is OK, but I receiver an error complaining that QueryDatabase is not defined. It gets defined through the provider at Ext.Direct.addProvider(Ext.app.REMOTING_API); but it is not ready when the view is loaded through the views: [] declaration in the application definition.
Is there a way to get this working without nesting Ext.application inside Ext.onReady like in my solution?
No nesting would be better for the MVC way like explained here in the docs.
The require in your application definition won't do anything. It should be plural requires.
Also, you seem to have devised this in your own answer, but the name Ext.direct.Manager seems to be the favored by Sencha over Ext.Direct now.
Edit
According to the docs, you can set your direct functions using a string. Apparently, this is intended to solve exactly the kind of problems you've run into.
This should work and fix your issue:
api: {
create: 'QueryDatabase.createRecord',
read: 'QueryDatabase.getResults',
update: 'QueryDatabase.updateRecords',
destroy: 'QueryDatabase.destroyRecord'
}
Probably you are missing the API definition before calling the provider, take a look to this definition from Sencha's examples page
Ext.ns("Ext.app"); Ext.app.REMOTING_API = {
"url": "php\/router.php",
"type": "remoting",
"actions": {
"TestAction": [{
"name": "doEcho",
"len": 1
}, {
"name": "multiply",
"len": 1
}, {
"name": "getTree",
"len": 1
}, {
"name": "getGrid",
"len": 1
}, {
"name": "showDetails",
"params": ["firstName", "lastName", "age"]
}], ...}]
} };
It should be included as a javascript file inside your webpage
<script type="text/javascript" src="api.php"></script>
Something like this example.
Hope it helps.
Adding Direct providers is better done before the Application constructor runs:
Ext.define('Foo.Application', {
extend: 'Ext.app.Application',
requires: [
'Ext.direct.Manager',
'Ext.direct.RemotingProvider'
],
name: 'Foo',
constructor: function() {
Ext.direct.Manager.addProvider(...);
this.callParent(arguments);
}
});
Ext.application('Foo.Application');
I found this solution:
Ext.require([
'Ext.direct.RemotingProvider',
'Ext.direct.Manager',
'Ext.data.proxy.Direct'
]);
Ext.onReady(function(){
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
Ext.application({
name: 'Dir',
extend: 'Dir.Application'
});
});
It doesn't look really nice, because it uses the ExtJS 4 application instantiation inside a Ext.onReady.
At least it works. Maybe there is a better solution ?
I don't have clear idea about extjs 'root' parameter in data store.
var xxx = new Ext.data.JsonStore
({
autoLoad: true,
url: 'www.dataserver.com',
root: 'data',
idProperty: 'ID',
fields: ['ID', 'Name']
});
i feel this very small thing but i'm very new to extjs please explain to me what is use for this root above data tore
It's a config of the JsonReader.
The JsonStore accepts all configs of JsonReader.
In the root config you give the name of the property that'll contain the array of row objects.
In your case it'll be :
{
data: [
{ID: 1, Name: "some name"},
{ID: 2, Name: "another name"}
]
}
Readers are used to interpret data to be loaded into a Model instance or a Store - often in response to an AJAX request. In general there is usually no need to create a Reader instance directly, since a Reader is almost always used together with a Proxy, and is configured using the Proxy's reader configuration property
Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
},
});
The above reader is configured to consume a JSON string that looks something like this:
{
"success": true,
"users": [
{ "name": "User 1" },
{ "name": "User 2" }
]
}
See in the above json structure, we have two attribute(with key:value pair) as "success" amd "users. The "users" key has array of object, which we are going to use in store. so in this json we are going to use the "users" attribute for our reader, so only we mention "users" as root for that store.
As recap, root is the config which will tell which part of attribute/object im going to use for my store in consume json.
Thanks