i am trying to display extjs grid and tree in layout-browser u, tree responce data is displayed in extjs grid and grid refresh dynanimicle , , my aim is when i am click on tree leaf that leaf data is displayed in extjs grid and then grid refresh auto maticle
this is layout-browser.js code
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.tip.QuickTipManager',
'Ext.container.Viewport',
'Ext.layout.*',
'Ext.form.Panel',
'Ext.form.Label',
'Ext.grid.*',
'Ext.data.*',
'Ext.tree.*',
'Ext.selection.*',
'Ext.tab.Panel',
'Ext.ux.layout.Center'
]);
//
// This is the main layout definition.
//
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
// This is an inner body element within the Details panel created to provide a "slide in" effect
// on the panel body without affecting the body's box itself. This element is created on
// initial use and cached in this var for subsequent access.
var detailEl;
// Gets all layouts examples
var layoutExamples = [];
Ext.Object.each(getBasicLayouts(), function(name, example) {
layoutExamples.push(example);
});
Ext.Object.each(getCombinationLayouts(), function(name, example){
layoutExamples.push(example);
});
Ext.Object.each(getCustomLayouts(), function(name, example){
layoutExamples.push(example);
});
// This is the main content center region that will contain each example layout panel.
// It will be implemented as a CardLayout since it will contain multiple panels with
// only one being visible at any given time.
Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: ['patent_id', 'Patent_number', 'Title','Abstract','Filing_Year','Assignee']
});
var store1 = Ext.create('Ext.data.JsonStore', {
model: 'ImageModel',
actionMethods:{read:'GET'},
proxy: {
type: 'ajax',
url: 'json.php',
reader: {
type: 'json',
root: 'results'
}
}
});
store1.load();
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true
},
proxy: {
type: 'ajax',
url:'get-nodes.php',
actionMethods: 'POST'
}
});
// Go ahead and create the TreePanel now so that we can use it below
var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Sample Layouts',
region:'north',
split: true,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: store
});
// Assign the changeLayout function to be called on tree node click.
treePanel.getSelectionModel().on('select', function(selModel, node) {
var selectedNode = treePanel.getSelectionModel().getSelection();
if (node.get('leaf')) {
// Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
//var bd = Ext.getCmp('details-panel').body;
// detailsPanel.update(Ext.getDom(node.getId() ).innerPHP).slideIn('l', {stopAnimation:true,duration: 200});
Ext.Ajax.request({
url: 'http://localhost/Ext.ux/examples/layout-browser/json.php',
method:'GET',
params: {
id : selectedNode[0].data.id
},
success: function(response){
//var store1 = getCustomerDataStoreStore;
store1.loadData(response);
detailsPanel.getView().refresh();
},
// jsonData : Ext.JSON.encode(queryform.getValues())
// success: function(response){
// var id = response.responseText;
//detailsPanel.getView().refresh();
// //selectedNode[0].expand();
// }
});
}
});
// This is the Details panel that contains the description for each example layout.
var detailsPanel = Ext.create('Ext.grid.Panel', {
width:587,
height:363,
collapsible:true,
id: 'details-panel',
title: 'Details',
region: 'center',
bodyStyle: 'padding-bottom:15px;background:#eee;',
autoScroll: true,
store: store1,
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},
columns: [{
text: 'Patent ID',
flex: 50,
dataIndex: 'patent_id'
},{
text: 'Patent Number',
flex: 50,
dataIndex: 'Patent_number'
},{
text: 'TITLE',
flex: 50,
dataIndex: 'Title'
},{
text: 'Abstract',
flex: 50,
dataIndex: 'Abstract'
},{
text : 'Filing Year',
width : 75,
sortable : true,
dataIndex: 'Filing_Year'
},{
text: 'Assignee',
flex: 50,
dataIndex: 'Assignee'
}]
});
// Finally, build the main layout once all the pieces are ready. This is also a good
// example of putting together a full-screen BorderLayout within a Viewport.
Ext.create('Ext.Viewport', {
layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
id: 'header',
region: 'north',
html: '<h1> Ext.Layout.Browser</h1>',
height: 30
},{
layout: 'border',
id: 'layout-browser',
region:'west',
border: false,
split:true,
margins: '2 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
items: [treePanel]
},
detailsPanel
],
renderTo: Ext.getBody()
});
});
this is php code
<?php
//if(isset($_GET['id']))
//{
//$node_number = $_GET['id'];
//}
//else{
//$node_number='6';
//}
$node_number = $_GET['id'];
//echo $node_number;
$conn = mysql_connect("localhost", "root", "") or die (mysql_error ());
$db = mysql_select_db ("zan") or die (mysql_error ());
//echo $var = "SELECT * FROM patent_table where patent_id= $node_number";
$result=mysql_query ("SELECT * FROM patent_table where patent_id in(SELECT patent_id FROM grid_mapping WHERE node_id='" .$node_number. "')") or die (mysql_error ());
//$result=mysql_query ("SELECT * FROM patent_table where patent_id in(SELECT patent_id FROM grid_mapping WHERE node_id='6')") or die (mysql_error ());
//$result=mysql_query ("SELECT * FROM patent_table ") or die (mysql_error ());
$num_rows = mysql_num_rows($result);
$list_items = array();
while ($row = mysql_fetch_array($result))
{
$item = array(
'patent_id' => $row['patent_id'],
'Patent_number' => $row['patent_num'],
'Title' => $row['title'],
'Abstract' => $row['abstract'],
'Filing_Year' => $row['filing_year'],
'Assignee' => $row['assignee']
);
$list_items[] = $item;
}
//echo json_encode($data);
echo '{total:' . $num_rows . ' , results: ' . json_encode($list_items) . '}';
// $conn = mysql_connect("localhost", "root", "") or die (mysql_error ());
// $db = mysql_select_db ("zan") or die (mysql_error ());
// $iid = isset( $_GET['id'] ) ? $_GET['id'] : '';
// //$result=mysql_query ("SELECT * FROM grid") or die (mysql_error ());
// $result=mysql_query ("SELECT id,name,parent FROM node_table WHERE id = '".$iid."'") or die (mysql_error ());
// $num_rows = mysql_num_rows($result);
// $list_items = array();
// while ($row = mysql_fetch_array($result))
// {
// $item = array(
// 'Id' => $row['id'],
// 'Name' => $row['name'],
// 'Parent' => $row['parent']
// );
// $list_items[] = $item;
// }
// echo $list_items;
// //echo json_encode($data);
// // echo '{total:' . $num_rows . ' , results: ' . json_encode($list_items) . '}';
?>
in the .php code “id” is tree post id
plse help me
this below code is .js file
this code is
json.php
this is answer of above code