I have defined Ext.tree.Panel and on change of combo value, I am calling
tree.getStore().load();
Here is my treepanel code
Ext.define('InboxTreePanel', {
extend: 'Ext.tree.Panel',
xtype: 'inboxtreepanel',
height: 250,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
store: Ext.create('Ext.data.TreeStore', {
fields: [{
name: 'id',
type: 'string'
}, {
name: 'text',
type: 'string'
}],
autoLoad: false,
proxy: {
type: 'jsonajax',
url: app_global.serviceExtn + 'browseS3.do',
reader: {
type: 'json',
root: 'results'
}
},
root: {
loaded: false
}
}),
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
text: 'Nodes',
editor: 'textfield'
}]
});
me.callParent(arguments);
}
});
In return I am getting json data but data is not loading in treepanel
{"success":true,
"code":null,
"message":null,
"data":[{"id":"root/Date-2015-08-30","text":"Date-2015-08-30","leaf":false},
{"id":"root/Date-2015-08-31","text":"Date-2015-08-31","leaf":false},
{"id":"root/Date-2015-09-08","text":"Date-2015-09-08","leaf":false},
{"id":"root/Date-2015-09-09","text":"Date-2015-09-09","leaf":false}],
"totalCount":0}
Can anyone help why data is not loading in treepanel? What is wrong in my code
Related
Ext.define('Form', {
extend: 'Ext.data.Model',
fields: [
{name:'type', type:'String'}
]
});
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Form',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/test.json',
reader: {
type : 'json',
root: 'types'
}
}
});
Ext.define('DForms', {
extend: 'Ext.panel.Panel',
bodyPadding: 12,
layout : 'auto',
autoScroll : true,
items: [{
xtype:'selectcombo',
queryMode:'local',
emptyText: 'Select Condition',
store:store,
displayField: 'type',
valueField: 'type',
width : 200,
typeAhead : true
}],
});
When this loads, the selectcombo is empty, nothing gets loaded, i have searched through many sites, and can't find anything to help. Any suggestions would be great
The xtype you look for is combo, the store type is JsonStore because the ArrayStore will not interpret the json from the types root as you might expect. I can not simulate the ajax request here though.
Ext.onReady(function() {
Ext.define('Form', {
extend: 'Ext.data.Model',
fields: [{
name: 'type',
type: 'String'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'Form',
data: [{
type: 'Aaaaaaa'
}, {
type: 'Bbbbbb'
}, {
type: 'Ccccccccccc'
}, {
type: 'Ddddddd'
}]
});
Ext.define('DForms', {
extend: 'Ext.panel.Panel',
bodyPadding: 12,
layout: 'auto',
autoScroll: true,
items: [{
xtype: 'combo',
queryMode: 'local',
emptyText: 'Select Condition',
store: store,
displayField: 'type',
valueField: 'type',
width: 200,
typeAhead: true
}],
});
Ext.create('DForms', {
renderTo: Ext.getBody()
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" />
I think type in fields is case-sensitive. So try
fields :[{name : 'type', type : 'string'}]
If still not working, as Tejas1991 pointed out check the content of your json.
I have a nested JSON and I cannot seem to extract the nested array. I am not sure if I set up my store and models correctly. It seems right. As you can see at the bottom of this post, when I try to get the nested part out, it doesn't work.
JSON data:
{
"data":{
"name":"John",
"age":"23",
"gender":"Male",
"purchase":[
{
"item":"shirt",
"qty":1,
"price":10
},
{
"item":"hat",
"qty":2,
"price":25
},
{
"item":"pants",
"qty":1,
"price":15
}
]
},
"success":true,
"errorMsg":""
}
Store:
Ext.define('Pvm.store.MyStore', {
extend: 'Pvm.store.PvmBaseStore',
requires: [
'Pvm.model.Customer'
],
model: 'Pvm.model.Customer',
autoLoad: false
});
Customer Model:
Ext.define('Pvm.model.Customer', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
fields: [{
name: 'name',
type: 'auto'
}, {
name: 'age',
type: 'auto'
}, {
name: 'gender',
type: 'auto'
}],
associations: {
type: 'hasMany',
model: 'Pvm.model.Purchase',
name: 'purchase',
associationKey: 'purchase'
},
proxy: {
type: 'ajax',
actionMethods: {
create: 'POST',
read: 'POST', // changed read's method to POST (from GET) so we get the parameters as form data (not in URL, for security reasons)
update: 'POST',
destroy: 'POST'
},
url: '/pvmsvr/uiapi?cmd=readXml',
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
Purchase Model:
Ext.define('Pvm.model.Purchase', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
fields: [{
name: 'item',
type: 'auto'
}, {
name: 'qty',
type: 'auto'
}, {
name: 'price',
type: 'auto'
}],
associations: {
type: 'belongsTo',
model: 'Pvm.model.Customer'
}
});
Controller Code:
onStoreLoaded: function(store, records, successful, eOpts) {
console.log(store); // works
console.log(records); // works
console.log(records[0].get('name')); // works
console.log(records[0].purchase(); // doesn't work; returns 'undefined'
}
I am idiot. I needed the child model's class name in the parent's requires...
When i call the Method,JSON response not assigning to the textfield ,Here i mentioned through the id. But its not assigning to the text field text.
JSON response
Method
function viewgiftdetails(itemid,p,t) {
Ext.Ajax.request({
url : 'http://192.168.1.155:8181/WishList/ShowItemsByItemID/userID=3/itemID=19',
method: "GET",
useDefaultXhrHeader: false,
withCredentials: true,
success: function (response) {
var respObj = Ext.JSON.decode(response.responseText);
Ext.Msg.alert("Success", respObj[0].itemName);
Ext.getCmp('myitemname').setData(respObj[0].itemName)
Ext.getCmp('myitemdesc').setData(respObj[0].describe)
Ext.getCmp('myitemprice').setData(respObj[0].price)
},
failure: function (response) {
alert(response.responseText);
}
});
}
PANEL
var viewitemspnl = Ext.create('Ext.Panel', {
id: 'viewitemspnl',
scrollable:'vertical',
height: '100%',
width: '100%',
items: [{
xtype: 'toolbar',
ui:'light',
docked: 'top',
title: 'My items',
items: []
},
{
xtype: 'textfield',
name : 'itemName',
id:'myitemname',
label: 'Item Name',
useClearIcon: true
},
{
xtype: 'textfield',
name : 'itemdesc',
id:'myitemdesc',
label: 'Description',
useClearIcon: true
},
Whats wrong with my code?PLease help to solve this issue
I think it should not be
Ext.getCmp('myitemname').setData(respObj[0].itemName);
Because their is no any method setData() for the textfield.
Try this
Ext.getCmp('myitemname').setValue(respObj[0].itemName);
A very simple example, but it does not work. List of Working Groups looped. What am I doing wrong? How to correct write a model for this json. Docs
http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.data.reader.Reader
Below is a screenshot result.
https://ps.vk.me/c537518/u155966612/doc/2ee8ec3e7718/1234.png
JS code.
Ext.define('WorckGroup', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text', type: 'string', mapping: 'WorckGroup' },
],
hasMany: { name: 'children', model: 'UserReport', associationKey: 'UserReport' }
});
Ext.define('UserReport', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text', type: 'string', mapping: 'Specialist' },
],
belongsTo: 'WorckGroup'
});
var store = new Ext.data.TreeStore({
model: 'WorckGroup',
proxy: {
type: 'ajax',
url: '/omnireports/ajaxgrid'
},
autoLoad: true,
folderSort: true
});
Ext.define('basegrid', {
extend: 'Ext.tree.Panel',
xtype: 'tree-grid',
title: 'Core Team Projects',
height: 300,
useArrows: true,
rootVisible: false,
multiSelect: true,
singleExpand: false,
initComponent: function () {
this.width = 500;
Ext.apply(this, {
store: store,
columns: [{
xtype: 'treecolumn',
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'text'
},]
});
this.callParent();
}
});
json
[{"WorckGroup":"Группа поддержки 3D",
"UserReport":[
{"Specialist":"Вагин Александр Константинович","SCallCount":64,"AverageDuration":0.1136067,"leaf":true},
{"Specialist":"Кистерева Татьяна Алексеевна","SCallCount":171,"AverageDuration":0.1058641,"leaf":true},
{"Specialist":"Лысенко Алексей Валентинович","SCallCount":71,"AverageDuration":0.4269940,"leaf":true}]},
{"WorckGroup":"Группа поддержки сервиса КСУП",
"UserReport":[
{"Specialist":"Болгов Руслан Евгеньевич","SCallCount":62,"AverageDuration":0.1093749,"leaf":true},
{"Specialist":"Костин Алексей Алексеевич","SCallCount":17,"AverageDuration":0.1125816,"leaf":true},
{"Specialist":"Мироненко Анна Владимировна","SCallCount":172,"AverageDuration":0.0632347,"leaf":true},
{"Specialist":"Ползиков Мирослав Александрович","SCallCount":315,"AverageDuration":0.0945766,"leaf":true},
{"Specialist":"Тахтенков Николай Владимирович","SCallCount":7,"AverageDuration":0.2342261,"leaf":true}]}
My grid isnt showing data when put to tab. This grid, store, model, JSON are working when renderd to body or div, or as a part of a viewport. Only not showing when put in tab, that is also created using JSON and Tree! This is a (sometimes)working example. I cant figure it out, maybe scope bug ... Please help!
Ext.Loader.setConfig({ enabled: true });
Ext.require(['*']);
Ext.require('app.kontakt');
Ext.require('app.ponude');
Ext.require('app.gridStore');
Ext.onReady(function() {
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
collapsible: false,
split: true,
height: 60
},{
region: 'west',
collapsible: false,
title: 'IZBORNIK',
split: true,
width: 200,
layout: 'fit',
items:[
myTree
]
},{
region: 'center',
layout: 'fit',
border: false,
items: [{
xtype:'tabpanel',
id:'mainTabPanel'
}]
}]
});
});
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'app/myTree.json',
},
reader: {
type: 'ajax',
root: 'nodes',
record: 'leaf'
}
});
var myTree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
border: false,
listeners:{
itemclick: function(view,record,item,index,e){
if(record.isLeaf() && record.raw.tabCls){
var tabId=record.raw.tabId;
var mainPanel = Ext.getCmp('mainTabPanel');
var existingTab = Ext.getCmp(tabId);
if(existingTab){
mainPanel.setActiveTab(existingTab);
}else{
mainPanel.add(Ext.create(record.raw.tabCls,{id:tabId})).show();
}
}
}
}
});
Ext.define("app.kontakt",{
extend:"Ext.panel.Panel",
name:"kontakt",
title:"Kontakt",
layout:"border",
closable:true,
border: false,
items:[
{
region: 'north',
collapsible: false,
split:true,
layout:"fit",
height: 100,
border: false,
buttons: [{
text: 'Load1',
handler:function(){
myStore.load({
scope : this,
url : 'app/kontaktGrid.json'
});
}
},{
text: 'Load2',
handler:function(){
myStore.load({
scope : this,
url : 'app/kontaktGrid1.json'
});
}
}]
},{
region: "center",
xtype:"grid",
id:"kontaktGrid",
layout: "fit",
store: myStore,
border: false,
columns: [
{header: 'name', dataIndex: 'name',flex:1},
{header: 'email', dataIndex: 'email', flex:1},
{header: 'phone', dataIndex: 'phone', flex:1}
]
}
]
});
Ext.define('app.gridStore', {
extend: 'Ext.data.Model',
fields: [
'name', 'email', 'phone'
]
});
var myStore =Ext.create('Ext.data.Store', {
model: 'app.gridStore',
proxy: {
type: 'ajax',
url : '',
reader:{
type:'json',
root: 'items'
}
},
autoLoad:false
});
JSON for TREE
{
children: [
{ text:"KLIJENTI", expanded: true,
children: [{ text:"Kontakt", leaf: true , tabId : "tab1", tabCls: "app.kontakt"}]
}
]
}
JSON for GRID
{'items':[
{"name":"Lisa", "email":"lisa#simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart#simpsons.com", "phone":"555--222-1234"}
]}
ok... i have tes your code just by copy paste to my firebug (of course with edit the json urls),
and i got an error.... This is because the program flow...
if it was your script, and put them in a single file, you specify a grid before the store
here code works for me no error...
Ext.onReady(function () {
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
collapsible: false,
split: true,
height: 60
}, {
region: 'west',
collapsible: false,
title: 'IZBORNIK',
split: true,
width: 200,
layout: 'fit',
items: [myTree]
}, {
region: 'center',
layout: 'fit',
border: false,
items: [{
xtype: 'tabpanel',
id: 'mainTabPanel'
}]
}]
});
});
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'myTree.json',
},
reader: {
type: 'ajax',
root: 'nodes',
record: 'leaf'
}
});
var myTree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
border: false,
listeners: {
itemclick: function (view, record, item, index, e) {
if (record.isLeaf() && record.raw.tabCls) {
var tabId = record.raw.tabId;
var mainPanel = Ext.getCmp('mainTabPanel');
var existingTab = Ext.getCmp(tabId);
if (existingTab) {
mainPanel.setActiveTab(existingTab);
} else {
mainPanel.add(Ext.create(record.raw.tabCls, {
id: tabId
})).show();
}
}
}
}
});
Ext.define('app.gridStore', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'phone']
});
var myStore = Ext.create('Ext.data.Store', {
model: 'app.gridStore',
proxy: {
type: 'ajax',
url: '',
reader: {
type: 'json',
root: 'items'
}
},
autoLoad: false
});
Ext.define("app.kontakt", {
extend: "Ext.panel.Panel",
name: "kontakt",
title: "Kontakt",
layout: "border",
closable: true,
border: false,
items: [{
region: 'north',
collapsible: false,
split: true,
layout: "fit",
height: 100,
border: false,
buttons: [{
text: 'Load1',
handler: function () {
myStore.load({
scope: this,
url: 'grid.json'
});
}
}, {
text: 'Load2',
handler: function () {
myStore.load({
scope: this,
url: 'grid1.json'
});
}
}]
}, {
region: "center",
xtype: "grid",
id: "kontaktGrid",
layout: "fit",
store: myStore,
border: false,
columns: [{
header: 'name',
dataIndex: 'name',
flex: 1
}, {
header: 'email',
dataIndex: 'email',
flex: 1
}, {
header: 'phone',
dataIndex: 'phone',
flex: 1
}]
}]
});