Problem with Ext.tree.Panel.

[vvorobeychik]

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'}, 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>

[sword-it]

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:-
tree+grid.PNG

[vvorobeychik]

Thank you, I'll work on it.