Code:
<script type="text/javascript">
var m_BodyStyle = 'padding:5px 5px 0';
Ext.require(['Ext.tree.*', 'Ext.grid.*', 'Ext.data.*']);Ext.onReady(function(){
Ext.QuickTips.init();
var emplStore = Ext.create('Ext.data.TreeStore', {proxy:{type:'ajax', url:'jsonEmpl'}, folderSort:true,
fields:[{name:'deptID', type:'int'}, 'deptName', 'nodeText', {name:'emplID', type:'int'}, 'emplName']
});
var deptTree = Ext.create('Ext.tree.Panel', {id:'deptTree', loadMask:'Loading...',
width:240, height:400, useArrows:true, rootVisible:false, store:emplStore, // renderTo:'tdAlert',
multiSelect:true, singleExpand:false,
columns:[{xtype:'treecolumn', text:'Company Structure', flex:2, sortable:true, dataIndex:'nodeText'}]
});
alerCols = [
{text:'ID', sortable:true, width:40, dataIndex:'alertID'},
{text:'Note', sortable:true, width:200, dataIndex:'note'},
{text:'Created By', sortable:true, width:100, dataIndex:'birthDate'},
{text:'Start Date', sortable:true, width:70, dataIndex:'startDate', renderer:Ext.util.Format.dateRenderer('m/d/Y')},
{text:'End Date', sortable:true, width:70, dataIndex:'endDate', renderer:Ext.util.Format.dateRenderer('m/d/Y')}
];
alertFlds = [{name:'alertID', type:'int'}, 'timeStamp', 'createdBy', 'startDate', 'endDate', 'note'];
var alertStore = new Ext.data.JsonStore({storeId:'alertStore', autoLoad:true, fields:alertFlds, //model:'assocModel',
proxy:{type:'ajax', url:'jsonmine', reader:{type:'json', root:'myList'}}
});
var gridAlert = Ext.create('Ext.grid.Panel', {id:'gridAlert', columns:alerCols, store:alertStore,
width:520, height:400, bodyStyle:m_BodyStyle, title:'Alerts', frame:true
});
var panAlert = Ext.create('Ext.panel.Panel', {id:'panAlert', layout:'table', items:[deptTree, gridAlert],
width:780, renderTo:'tdAlert', title:'List of Associates', frame:true,
buttons:[{id:'bntNewAlert', text:'New Associate', handler:function(){Alert(null);}}]
});
//---------------------------------------
function Alert(alertID)
{
alert('Under Construction');
}
//---------------------------------------
});
//------------------------------------------------------------------------------
</script>
<div align="center">
<table><tr><td id="tdAlert"></td></tr></table>
</div>