PDA

View Full Version : Problem with Ext.tree.Panel.



vvorobeychik
7 Feb 2013, 7:31 AM
I created Ext.panel.Panel and wanted to include two items: Ext.tree.Panel and Ext.grid.Panel. Message: IE stoped to work!
If I include two Ext.grid.Panels then all works. Code is below. Can anyone help me please.



<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' (http://www.sencha.com/forum/'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' (http://www.sencha.com/forum/'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>

sword-it
7 Feb 2013, 8:57 AM
HI!

Check this sample:-


Ext.create('Ext.data.Store', { storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


var mygrid=Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400
});




var treestore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});


var mytree=Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: treestore,
rootVisible: false
});




Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 400,
html: '<p>World!</p>',
renderTo: Ext.getBody(),
items:[mytree,mygrid]
});



Output:-
41713

vvorobeychik
7 Feb 2013, 11:44 AM
Thank you, I'll work on it.