What is the proper way to store data in a json file and read the data from the file

[koolaid1551]

So I am trying to import data from a json data file, but I am not exactly sure how to set up the file. I attempted to modify the nested list example(see below).

test.json

{
"text": "ChannelList",
"channels": [{
"name": "Channel 1",
"url": "www.test1.com",
"date": "07-14-2011"
},{
"name": "Channel 2",
"url": "www.test2.com",
"date": "07-14-2011"
},{
"name": "Channel 3",
"url": "www.test3.com",
"date": "07-14-2011"
}]
}

Here is the reader
Nestedlist.js


// wrap in closure to avoid global vars.
(function() {

Ext.regModel('channels', {
fields: [
{name:'name', type: 'string'},
{name:'url', type: 'string'},
{name:'date', type: 'string'}
]
});


var txtFld = new Ext.form.Text({
label: 'name'
});

var calculateDesiredWidth = function() {
var viewWidth = Ext.Element.getViewportWidth(),
desiredWidth = Math.min(viewWidth, 400) - 10;

return desiredWidth;
};


var editPnl = new Ext.Panel({
floating: true,
centered: true,
modal: true,
width: calculateDesiredWidth(),

dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Editing Item'
},{
dock: 'bottom',
xtype: 'toolbar',
items: [{
text: 'Cancel',
handler: function() {
editPnl.hide();
}
},{
xtype: 'spacer'
},{
text: 'Change',
ui: 'action',
handler: function() {
var activeList = demos.NestedList.getActiveItem(),
record = activeList.getSelectedRecords()[0];
record.set('name', txtFld.getValue());

// Workaround: selection *should* be maintained.
activeList.getSelectionModel().select(record);

editPnl.hide();
}
}]
}],
items: [{
xtype: 'form',
items: [{
xtype: 'fieldset',
items: [txtFld]
}]
}]
});

Ext.EventManager.onOrientationChange(function() {
editPnl.setWidth(calculateDesiredWidth());
});

var editBtn = new Ext.Button({
text: 'Edit',
disabled: true,
handler: function() {
editPnl.show();

var activeList = demos.NestedList.getActiveItem(),
record = activeList.getSelectedRecords()[0];

txtFld.setValue(record.get('text'));
}
});


var store = new Ext.data.TreeStore({
model: 'ChannelList',
proxy: {
type: 'ajax',
url: 'test.json',
reader: {
type: 'tree',
root: 'channels'
}
}
});

demos.NestedList = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'}, editBtn]
},
store: store
});

// leafselected event is provided by the LeafSelectedPlugin.js
demos.NestedList.on('leafselected', function(enabled) {
editBtn.setDisabled(!enabled);
});



})();



What I am eventually trying to do is read a json data file into a normal list of channels sorted by date. When you click on a channel it will trigger a panel to appear and the url will be used along with the channel name.

[koolaid1551]

can anyone help me?

[jrboddie]

It appears to me that the 'store' object has a model attribute that does not match the id of the model that you have defined.

In 'store' , change the model attribute to


model : 'channels',

[koolaid1551]

I updated the model and a few other things like my json data file structure. however it still is not working, below is the updated source code.



{
"channels": {
"name": "Channel 1",
"url": "www.test1.com",
"date": "07-14-2011",
"leaf": true
},{
"name": "Channel 2",
"url": "www.test2.com",
"date": "07-14-2011",
"leaf": true
},{
"name": "Channel 3",
"url": "www.test3.com",
"date": "07-14-2011",
"leaf": true
}]
}




// wrap in closure to avoid global vars.
(function() {

Ext.regModel('Channel', {
fields: [
{name:'name', type: 'string'},
{name:'url', type: 'string'},
{name:'date', type: 'string'},
{name: 'leaf', type: 'boolean'}
]
});


var txtFld = new Ext.form.Text({
label: 'Name'
});

var calculateDesiredWidth = function() {
var viewWidth = Ext.Element.getViewportWidth(),
desiredWidth = Math.min(viewWidth, 400) - 10;

return desiredWidth;
};


var editPnl = new Ext.Panel({
floating: true,
centered: true,
modal: true,
width: calculateDesiredWidth(),

dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Editing Item'
},{
dock: 'bottom',
xtype: 'toolbar',
items: [{
text: 'Cancel',
handler: function() {
editPnl.hide();
}
},{
xtype: 'spacer'
},{
text: 'Change',
ui: 'action',
handler: function() {
var activeList = demos.NestedList.getActiveItem(),
record = activeList.getSelectedRecords()[0];
record.set('name', txtFld.getValue());

// Workaround: selection *should* be maintained.
activeList.getSelectionModel().select(record);

editPnl.hide();
}
}]
}],
items: [{
xtype: 'form',
items: [{
xtype: 'fieldset',
items: [txtFld]
}]
}]
});

Ext.EventManager.onOrientationChange(function() {
editPnl.setWidth(calculateDesiredWidth());
});

var editBtn = new Ext.Button({
text: 'Edit',
disabled: true,
handler: function() {
editPnl.show();

var activeList = demos.NestedList.getActiveItem(),
record = activeList.getSelectedRecords()[0];

txtFld.setValue(record.get('name'));
}
});


var store = new Ext.data.TreeStore({
model: 'Channel',
proxy: {
type: 'ajax',
url: 'test.json',
reader: {
type: 'tree',
root: 'channels'
}
}
});

demos.NestedList = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'}, editBtn]
},
store: store
});

// leafselected event is provided by the LeafSelectedPlugin.js
demos.NestedList.on('leafselected', function(enabled) {
editBtn.setDisabled(!enabled);
});



})();


Heres a link of my edited kitchensink folder if you would like to test it(you can just upload this to the examples folder) http://www43.zippyshare.com/v/34555156/file.html

[bharatn]

Validate the json via json lint.

Check if you are getting any errors in Web inspector.

[koolaid1551]

okay i got it to work thanks for helping me out guys!!

My json file wasn't put together correctly so i fixed that.


{
"channels": [
{
"name": "Channel 1",
"url": "www.test1.com",
"date": "07-14-2011",
"leaf": true
},
{
"name": "Channel 2",
"url": "www.test2.com",
"date": "07-14-2011",
"leaf": true
},
{
"name": "Channel 3",
"url": "www.test3.com",
"date": "07-14-2011",
"leaf": true
}
]
}


Also I had to add " displayField: 'name' " to the nested list, to get the name to display


demos.NestedList = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'}, editBtn]
},
displayField: 'name',
store: store
});

[Sweta Patil]

Can any one help me in storing data or store uploaded image/file in json store?

Any help would be awesome.....

thanks.... :)