PDA

View Full Version : bind tree panel and data grid in extjs 4



ravi9999
12 Dec 2012, 6:01 AM
Ext.require([ 'Ext.tree.*',
'Ext.data.*',
'Ext.tip.*'
]);


Ext.onReady(function() {
Ext.QuickTips.init();



var store = Ext.create('Ext.data.TreeStore', {
autoLoad: true,
proxy: {
type:'ajax',
url:'get-nodes.php',
extraParams: {

},
actionMethods: 'POST'
},
root: {
value:'Base Name',
id:'root_node',
expanded: true
},
folderSort: true,
sorters: [{
property:'text',
direction:'ASC'
}]
});


var tree = Ext.create('Ext.tree.Panel', {
store: store,

renderTo: 'tree_el',
height: '300',
width: '250',
title: 'Products Display'
});
tree.getSelectionModel().on('node', function(selModel, record) {
if (record.get('leaf')) {
Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
if (!detailEl) {
var bd = Ext.getCmp('details-panel').body;
bd.update('').setStyle('background','#fff');
detailEl = bd.createChild(); //create default empty div
}
detailEl.hide().update(Ext.getDom(record.getId() + '-details').innerHTML).slideIn('l', {stopAnimation:true,duration: 200});
}
});
});

in above code is extjs tree panel

Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('dataroutes', '../ux/');


Ext.require([
'Ext.tab.*',
'Ext.ux.TabReorderer'
]);


Ext.onReady(function() {
var tabCount = 4;


var tabPanel = Ext.create('Ext.tab.Panel', {
renderTo: 'grid-example1',
width: 600,
height: 450,
//plain: true,
bodyStyle: 'padding:5px',
plugins: Ext.create('Ext.ux.TabReorderer'),
items: [{
xtype: 'panel',
title: 'Insights',
loader: {
url: 'http://stratageeks.com/dataroutes/extjs/json1/cheditor.php',scripts:true,
scripts:true,
contentType: 'php',
loadMask: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
},{
xtype: 'panel',
title: 'IP Radar',
html : "I can't be moved",
reorderable: false,
closable: false

} , {
xtype: 'panel',
title: 'Compeitor Radar',
html : 'Test 3',
closable: false
}, {
xtype: 'panel',
title: 'Technology Radar',
loader: {
url: 'http://stratageeks.com/dataroutes/extjs/array-grid.php',scripts:true,
scripts:true,
contentType: 'php',
loadMask: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
}, {
xtype: 'panel',
title: 'Customize Views',
html : "I can't be moved",
reorderable: false,
closable: false

}],



});
});
in the above code is tabpanel code ,in tab panel third tab display grid panel from using ajax url a
and below code is grid panel

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Reorderable Tabs Example</title>
<!-- Ext includes -->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>


<!-- Example includes -->
<link rel="stylesheet" type="text/css" href="shared/example.css" />


<!-- GC -->



<script type="text/javascript">
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*'
]);
Ext.onReady(function(){
Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: ['Name', 'Tech1', 'Tech2','Prob1','Prob2']
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'ImageModel',
proxy: {
type: 'ajax',
url: 'http://stratageeks.com/dataroutes/extjs/json/json.php',
reader: {
type: 'json',
root: 'results'
}
}
});
store.load();


var listView = Ext.create('Ext.grid.Panel', {
width:587,
height:363,
collapsible:true,
title:'Friuts ',
renderTo: 'grid-example',


store: store,
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},


columns: [{
text: 'Tagging',
flex: 50,
dataIndex: 'Name'
},{
text: 'Patent-ID',
flex: 50,
dataIndex: 'Tech1'
},{
text: 'TITLE',
flex: 50,
dataIndex: 'Tech2'
},{
text: 'Assignee',
flex: 50,
dataIndex: 'Prob1'
},{
text : 'Filling Year',
width : 75,
sortable : true,
dataIndex: 'Prob2'
}]
});


// little bit of feedback
listView.on('selectionchange', function(view, nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
listView.setTitle('Simple ListView <i>('+l+' $data'+s+' selected)</i>');
});
});
</script>
</head>
<body>
<div id="grid-example"> </div>
</body>
</html>



whn i am cichon lef od tat leaf node data displayed in tabpanel third tab in grid
so pleae help me, this belo image displayed tree and grid panel4076440764remove

mitchellsimoens
14 Dec 2012, 6:11 AM
So when you want to click on a tree node you want to set an extraParam on the proxy on the store for the grid and load the grid.