PDA

View Full Version : How to attach the json data to the detailPanel on a button click.



amchenini
18 Jun 2012, 4:19 PM
Hi,

I am trying to render the template with the data into the detailPanel when a button is clicked. There are many buttons. Each button will display a specific data comming from the data/books.json (the data array is hown below).

How to attach the json data to the detailPanel on a button click.
The piece of code that is not working is:

var myBtnHandler = function(btn) {
var detailPanel = Ext.getCmp('bookDetail');
bookTpl.overwrite(detailPanel.body, store.data);
},

store.data is not getting the data from 'data/books.json
The complete code is:



<html>
<head>
<title>Dashboard Test with accordion Layout</title>
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script>

Ext.require([
'Ext.button.*',
'Ext.grid.*',
'Ext.panel.*',
'Ext.MessageBox.*',
'Ext.layout.container.Border'
]);
Ext.onReady(function(){

Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
'id',
'title',
'pages',
'numChapters',
'topic',
'publisher',
'isbn',
'isbn13'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Book',
proxy: {
type: 'ajax',
url: 'data/books.json'
}
});

var bookTplMarkup = [
'<b>Title:</b> {title}<br/>',
'<b>Pages:</b> {pages}<br/>',
'<b>No Chapters:</b> {numChapters}<br/>',
'<b>Topic:</b> {topic}<br/>',
'<b>Publisher:</b> {publisher}<br/>',
'<b>ISBN:</b> {isbn}<br/>',
'<b>ISBN 13:</b> {isbn13}<br/>'
];

var bookTpl = Ext.create('Ext.Template', bookTplMarkup);
bookTpl.compile(); // 2

var Mylogo = Ext.create('Ext.panel.Panel',{
id: 'logo',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
title: 'IBU SALES DASHBOARD',
height: 100,
split: true,
region: 'north'
});

var myBtnHandler = function(btn) { // 1
//Ext.MessageBox.alert('You Clicked', btn.text);

var detailPanel = Ext.getCmp('bookDetail');
bookTpl.overwrite(detailPanel.body, store.data);
},
dev1 = Ext.create('Ext.button.Button', {
width: 200,
text : 'Dev1',
handler : myBtnHandler
}),
dev2 = Ext.create('Ext.button.Button', {
width: 200,
text : 'Dev2',
handler : myBtnHandler
}),
dev3 = Ext.create('Ext.button.Button', {
width: 200,
text : 'Dev3',
handler : myBtnHandler
}),
dev4 = Ext.create('Ext.button.Button', {
width: 200,
text : 'Dev4',
handler : myBtnHandler
}),
dev5 = Ext.create('Ext.button.Button', {
width: 200,
text : 'Dev5',
handler : myBtnHandler
}),
dev6 = Ext.create('Ext.button.Button', {
width: 200,
text : 'Dev6',
handler : myBtnHandler
});


var envs = Ext.create('Ext.panel.Panel',{
id: 'environment',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
//html: 'Please select an env to see additional details.',
height: 600,
width: 200,
layout:'accordion',
split: true,
region: 'west',
items: [{
layout:'vbox',
title: 'asnap',
//html: 'Panel 0 content',
items: [dev1,dev2,dev3,dev4,dev5,dev6]
}, {
title: 'isnap'
//html: 'Panel 2 content'
}, {
title: 'Enigma'
//html: 'Panel 3 content'
}]

});
var details = Ext.create('Ext.panel.Panel',{
store: store,
id: 'bookDetail',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
title: 'environment',
height: 300,
split: true,
region: 'center'
});

var grid = Ext.create('Ext.grid.Panel', {
store: store,
title: 'Books',
columns: [
{text: "Title", width: 120, dataIndex: 'title', sortable: true},
{text: "Pages", flex: 1, dataIndex: 'pages', sortable: true},
{text: "Topic", width: 115, dataIndex: 'topic', sortable: true},
{text: "Publisher", width: 100, dataIndex: 'publisher', sortable: true}
],
viewConfig: {
forceFit: true
},
split: true,
bodyPadding: 7,
height: 300,
width: 600,
region: 'south'
});

var center = Ext.create('Ext.panel.Panel',{
id: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'center & south',
region: 'center',
layout: 'border',
width: 700,
height: 600,
items: [details,grid]
});


Ext.create('Ext.container.Viewport', {
frame: true,
layout: 'border',
items: [Mylogo,envs,center]
});
store.load();
});
</script>
</head>
<body>
</body>
</html>

the data is:

[
{
"id": dev1,
"title": 'Learning Ext JS 3.2',
"pages": 432,
"numChapters": 17,
"topic": 'Ext JS',
"publisher": 'Packt',
"isbn": '1849511209',
"isbn13": '978-1-849511-20-9'
},
{
"id": dev2,
"title": 'Learning Ext JS',
"pages": 324,
"numChapters": 14,
"topic":'Ext JS',
"publisher":'Packt',
"isbn": '1847195148',
"isbn13": '978-1-847195-14-2'
},
{
"id": dev3,
"title": 'Ext JS 3.0 Cookbook',
"pages": 376,
"numChapters": 10,
"topic":'Ext JS',
"publisher":'Packt',
"isbn": '1847198708',
"isbn13": '978-1-847198-70-9'
},
{
"id": dev4,
"title": 'Learning Ext JS 4',
"pages": 432,
"numChapters": 17,
"topic": 'Ext JS',
"publisher": 'Packt',
"isbn": '1849511209',
"isbn13": '978-1-849511-20-9'
},
{
"id": dev5,
"title": 'Learning Ext JS4.1',
"pages": 324,
"numChapters": 14,
"topic":'Ext JS',
"publisher":'Packt',
"isbn": '1847195148',
"isbn13": '978-1-847195-14-2'
},
{
"id": dev6,
"title": 'Ext JS 4.0 Cookbook',
"pages": 376,
"numChapters": 10,
"topic":'Ext JS',
"publisher":'Packt',
"isbn": '1847198708',
"isbn13": '978-1-847198-70-9'
}


]


( shown below)

scottmartin
23 Jun 2012, 3:33 PM
You can load json data directly into a form:



form.getForm().load({
url: 'data.json', // { data: { ... } }
failure: function() {
alert('LOAD FAILURE');
}
});


Scott.

amchenini
26 Jun 2012, 6:51 AM
Hi,

Thanks for replying, but I don't see why you are proposing a form. I am not using a form.
I have a series buttons rendered vertically on a vbox o the west panel (Border layout), and on the center panel where I want to display the contents of one record of data/books.json based on the which button was clicked.
I am using the following DatavVew with a listeners config but I know the syntax is not correct.



var details = Ext.create('Ext.panel.Panel',{
//store: store,
id: 'bookDetail',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
title: 'environment',
height: 300,
split: true,
region: 'center',
items: Ext.create('Ext.DataView', {
store: store,
tpl: bookTpl,
autoLoad : false,
singleSelect : true,
itemSelector : 'div.bookWrap',
listeners : {
click: myBtnHandler = function(btn) { // 1
//Ext.MessageBox.alert('You Clicked', btn.text);

var detailPanel = Ext.getCmp('bookDetail');

bookTpl.overwrite(detailPanel.body, store.data.getById(btn.id));
},
},
}),
}),


The rest of the code can be found in a previous email.

Thanks in advance for proposing a solution.
This is really stopping from advancing in this project.

Thanks,
Mohamed