I think I have everything correct here :
A simple model :
Ext.define('js.model.MyModel', {
extend: 'Ext.data.Model',
fields: [
{
name: "name",
type: "string"
},
{
name: "type",
type: "string"
}
]
});
A tree panel with tree store :
Ext.define('js.packageDialog.ReleaseTreeView.PackageTree', {
extend: 'Ext.tree.Panel',
rootVisible: true,
singleExpand: false,
initComponent: function () {
//Ext.create('js.model.MyModel');
Ext.apply(this, {
store: new Ext.data.TreeStore({
model: 'js.model.MyModel',
"root": {
"expanded": true,
"name": "",
"type": ""
},
proxy: {
type: 'memory'
//data: data
}
}),
columns: [
{
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'name'
},
{
text: 'Parents',
dataIndex: 'parents'
}
]
});
this.callParent();
},
loadData : function() {
this.store.setRootNode(data);
}
});
Some data :
var data = Ext.JSON.encode({
"children": [{
"type": "folder",
"name": "Photos",
"children": [{
"type": "JPEG",
"name": "wedding picture"
}, {
"type": "JPEG",
"name": "holiday picture"
}
]
}]
});
I put all this together. See the fiddle :
http://jsfiddle.net/x527x57t/
And nothing is shown in the tree panel. The columns are correct, however my loadData() method does not work.
I have got it to work like so:
var data = {
children: [{
text: "Photos",
leaf:false,
children: [{
"type": "JPEG",
text: "wedding picture",
leaf:true
}, {
text: "holiday picture",
leaf:true
}]
}]
};
Ext.define('js.model.MyModel', {
extend: 'Ext.data.Model',
fields: [
{
name: "text",
type: "string"
},
{
name: "type",
type: "string"
},
{
name:"leaf"
}
]
});
Ext.define('js.packageDialog.ReleaseTreeView.PackageTree', {
extend: 'Ext.tree.Panel',
rootVisible: true,
singleExpand: false,
initComponent: function () {
Ext.apply(this, {
store: new Ext.data.TreeStore({
model: 'js.model.MyModel',
root: {
expanded: true
//type: ""
},
proxy: {
type: 'memory'
//data: data
}
})
});
this.callParent();
},
loadData : function() {
this.store.setRootNode(data);
}
});
So specifying which are leaf nodes in the data, also properties like the root of your TreeStore was wrapped in quotes, so I just amended. The data is now displaying. This may not be the 'correct' answer but one I can offer so far for you. Hope it helps.
Related
How do I populate combo box values instead of hard coding from the database into the store of combo box
{
xtype: 'fieldset',
title: 'Dress Types',
items: [
{
xtype: 'combobox',
displayField: "displayName",
valueField: "displayName",
emptyText: 'Select Type',
store: {
fields: ["id", "displayName"],
data: [
{ "id": "1", "displayName": "Kurtha" },
{ "id": "2", "displayName": "Denim Top" },
{ "id": "3", "displayName": "Western T shirt" },
{ "id": "4", "displayName": "Sleeveless" }
]
},
name: 'dresses',
margin: '15px',
allowBlank: false,
forceSelection: true,
}
]
}
Thanks in advance
There are ways by which you can get this. You need to create one store in your js from your input data and then assign it to the comboBox.
Given example
var combstore = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [{
name: 'value',
mapping: "ITEMID",
type: 'string'
}, {
name: 'name',
mapping: "TITLE",
type: 'string'
}],
proxy: new Ext.data.HttpProxy({
type: 'ajax',
actionMethods: {
read: "POST"
},
url: Your URL,
headers: {
'Accept': 'application/json; charset=utf-8'
},
reader: {
type: 'json',
rootProperty: 'data'
},
autoLoad: true
})
});
Now in your comboBox you can call this combstore to your store.
store :combstore
In the variable combostore we are creating one data store by using Ext.data.Store and placing values in field. Then in proxy method calling url and mapping the values from field.
Read the doc for better understanding Doc
Check the below code.
Ext.create('Ext.form.ComboBox', {
valueField: "displayName",
emptyText: 'Select Type',
store: Ext.create('Ext.data.Store', {
fields: ["id", "displayName"],
proxy: {
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
}),
name: 'dresses',
margin: '15px',
allowBlank: false,
forceSelection: true,
renderTo: Ext.getBody()
});
I assumed my service returing data like below
{
"data": [{
"id": "1",
"displayName": "Kurtha"
}, {
"id": "2",
"displayName": "Denim Top"
}, {
"id": "3",
"displayName": "Western T shirt"
}, {
"id": "4",
"displayName": "Sleeveless"
}]
}
I am trying to load data in the extjs grid with paging toolbar using loaddata but it shows empty grid.
The data returned is
{
"data": [{
"id": "user1",
"title": "index0"
}, {
"id": "user2",
"title": "index1"
}, {
"id": "user3",
"title": "index2"
}, {
"id": "user4",
"title": "index3"
}],
"total": 8,
}
My code looks like
initcomponent:function(){
defaultModel:[{
header: 'Date',
dataIndex: 'id',
sortable: true
},
{
header: 'title',
dataIndex: 'title',
sortable: false,
}];
}
this.currStore = Ext.create('Ext.data.Store', {
fields : ['id','title'],
pageSize:4,
autoLoad:false,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'data',
totalProperty:'total',
}
}
});
this.currStore.load({
params:{
start:0,
limit: 4,
}
});
var config =
{
columns : this.defaultModel,
store : this.currStore,
columnLines : true,
loadMask : true,
autoScroll : true,
tbar : [{
xtype : 'button',
text : 'Refresh',
iconCls : 'btn-refresh',
scope : this,
handler : this.refreshGridData
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: this.currStore, // same store GridPanel is using
dock: 'bottom',
id:'pagingErrNot1',
pageSize:4,
displayInfo: true,
emptyMsg: "No notification to display",
listeners:{
beforechange : {
scope : this,
fn : function(pagingtoolbar,pageNumber,scope)
{
}
}
}
}],
};
Ext.apply(this,config);
this.callParent(arguments);
}
data is of the form given above and setdata is called after the data is returned from server side.
setData:function(data)
{
this.getStore().loadData(data);
this.getView().refresh();
}
but after loadData, grid is empty and and pagingtoolbar shows disabled.WHat am i doing wrong?
I am using a TreeStore to load data that looks like this:
{
"categories": [{
"text": "Ext JS",
"expanded": "true",
"categories": [{
"text": "app",
"categories": [{
"text": "Application.js",
"categories": "null"
}]
},
{
"text": "button",
"expanded": "true",
"categories": [{
"text": "Button.js",
"categories": "null"
},
{
"text": "Cycle.js",
"categories": "null"
},
{
"text": "Split.js",
"categories": "null"
}]
}
]
}]
}
What I want is to set the leaf property to true or false if the categories property is null or not.
My model looks like this :
Ext.define('TestTree.model.MyModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.Boolean'
],
fields: [
{
name: 'text'
},
{
type: 'boolean',
name: 'leaf'
}
]
});
The idea was to use the calculate config of the leaf field for that but if I try to use data.get('categories') I get Field leaf depends on undefined field get and if I try to define the field categories in my model an use data.categories, nothing happens.
I don't know what I am missing!
My store looks like this:
Ext.define('TestTree.store.MyTreeStore', {
extend: 'Ext.data.TreeStore',
requires: [
'TestTree.model.MyModel',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MyTreeStore',
autoLoad: true,
model: 'TestTree.model.MyModel',
proxy: {
type: 'ajax',
url: 'resources/data/treeData.json',
reader: {
type: 'json',
rootProperty: 'categories'
}
}
}, cfg)]);
}
});
Thank you!
Create your model with the following init method:
Ext.define("Files", {
extend : "Ext.data.Model",
fields : [{
name: 'categories'
},{
name: 'leaf',
convert : function(value, record) {
return record.get('categories') == 'null';
}
}]
});
This should fix your issue, and here is a fiddle so you can take a look: https://fiddle.sencha.com/#fiddle/gq8
I used calculate instead of convert.
From the doc
Using calculate is the simplest and safest way to define a calculated field.
So the code becomes
Ext.define("Files", {
extend : "Ext.data.Model",
fields : [{
name: 'categories'
},{
name: 'leaf',
calculate : function(data) {
return data.categories === null;
},
depends: ['categories']
}]
});
With below configuration i am not able to populated json data in tree panel.
After loading store from server i am not able to see any records in console logs.
Is there any specific json structure need to be send from server?
Is there any configuration miss?
Below is the config i am using
MODEL
Ext.define('nsoapp.model.nso.Client', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
fields: [
{
name: 'jsxid'
},
{
name: 'name'
},
{
name: 'type'
},
{
name: 'countryId'
},
{
name: 'contact'
},
{
name: 'email'
}
]
});
STORE
Ext.define('nsoapp.store.nso.Client', {
extend: 'Ext.data.TreeStore',
requires: [
'nsoapp.model.nso.Client',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'nsoapp.model.nso.Client',
storeId: 'nso.Client',
defaultRootProperty: 'record',
proxy: {
type: 'ajax',
url: '/client/',
reader: {
type: 'json',
root: 'populateClientRes'
}
}
}, cfg)]);
}
});
TREE PANEL
xtype: 'treepanel',
flex: 1,
margins: '0 0 3 0',
itemId: 'treeClient',
overlapHeader: false,
title: 'Clients',
titleCollapse: false,
animate: true,
displayField: 'name',
rootVisible: false,
viewConfig: {
rootVisible: false
}
In controller i am binding tree store to tree panel
var storeClient=this.getStore('nso.ordermanagement.clientcustomization.Client');
storeClient.load({
callback: function(records, operation, success) {
var treeClient=Ext.ComponentQuery.query("#treeClient")[0];
treeClient.bindStore(storeClient);
}
});
JSON DATA
{
"populateClientRes":{
"record":[
{
"name":"A_KPI",
"type":"CLIENT",
"jsxid":"14487361",
"countryId":"484",
"contact":"34434334",
"email":"",
"record":[
{
"name":"Products",
"value":"1",
"type":"PRODUCT"
},
{
"name":"Stores",
"value":"1",
"type":"STORE"
}
]
},
{
"name":"aCCStudyTest",
"type":"CLIENT",
"jsxid":"14425073",
"countryId":"484",
"contact":"1234567890",
"email":"",
"record":[
{
"name":"Products",
"value":"1",
"type":"PRODUCT"
},
{
"name":"Stores",
"value":"1",
"type":"STORE"
}
]
}
]
}
}
Short answer: JSON response is wrong!
Long answer
You specify as root populateClientRes so all children (and children of children) must use this tag.
Standard JSON response:
{
"success": true,
"children": [
{
"id": 1,
"name": "Phil",
"leaf": true
},
{
"id": 2,
"name": "Nico",
"expanded": true,
"children": [
{
"id": 3,
"name": "Mitchell",
"leaf": true
}
]},
{
"id": 4,
"name": "Sue",
"loaded": true
}
]
}
In your case you have to replace record with populateClientRes:
{
"success": true,
"populateClientRes": [
{
"name":"A_KPI",
"type":"CLIENT",
"jsxid":"14487361",
"countryId":"484",
"contact":"34434334",
"email":"",
"populateClientRes": [
{
...
}, {
...
populateClientRes: [{...},{...}]
},
]
},
{
...
}
]
}
Important notes
For all non-leaf nodes that do not have children (for example, Person with name Sue above), the server response MUST set the loaded property to true. Otherwise the proxy will attempt to load children for these nodes when they are expanded.
You find more information's here
I have set the pagesize in store and totalproperty in proxy setting and also defined dockedItems config. But in the page, all the records are displayed, instead of specified pagesize. Here is my code:
js file:
var sm = Ext.create('Ext.selection.CheckboxModel');
Ext.define('SuperUser', {
extend: 'Ext.data.Model',
fields: [
{ name: 'fname', type: 'string' },
{ name: 'lname', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'uid', type: 'string' },
{ name: 'isSup', type: 'boolean' },
{ name: 'upDate', type: 'string' },
{ name: 'upBy', type: 'string' }
]
});
//Create the grid
var superGrid=Ext.define('supusergrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.supusergrid',
title: 'Super Admin Grid',
gridId:'grid',
model:'SuperUser',
store: Ext.create('Ext.data.Store', {
storeId: 'supUserStore',
pageSize: 3,
model:'SuperUser',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'supUserStore.json',
reader: {
type: 'json',
root: 'data',
totalProperty:'total'
}
}
}),
selModel: sm,
columns: [
{
header: 'First Name',
dataIndex: 'fname'
},
{
header: 'Last Name',
dataIndex: 'lname'
},
{
header: 'Email',
dataIndex: 'email'
},
{
header: 'User ID',
dataIndex: 'uid'
},
{
header: 'Super Admin',
dataIndex: 'isSup'
},
{
header: 'Updated Date',
dataIndex: 'upDate',
},
{
header: 'Updated By',
dataIndex: 'upBy'
}
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: Ext.data.StoreManager.lookup('supUserStore'),
dock: 'bottom',
displayInfo: true
}],
initComponent: function () {
this.callParent(arguments);
}
});
Ext.onReady(function () {
Ext.widget('supusergrid', {
renderTo: 'div1'
});
});
json file:
{
"success": true,
"total": 12,
"data": [
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com"}
]
}
please suggest, where I am going wrong.
You are using an Ajax proxy. On your server, you can intercept request parameters page, start and limit. Then you create a json response with the page data.
Store paging isn't as smart as you seem to think it is. Just because you tell it that the page size is 3 records and that you have 12 total records doesn't mean it's going to break everything up into 4 nice pages for you.
When calling store.loadPage the store adds the start and limit params to the proxy request. When the response comes back, it assumes that you've correctly limited your result set and loads all records provided. It is your responsibility to use those params to limit the results returned to the store. Usually, this would require posting the data on a server so you can utilize these params.
Thankfully, there's a UX component that should help you out: Ext.ux.data.PagingMemoryProxy
And here's some sample code showing how it works: Sliding Pager example