Create navigation panel using treepanel

Question

I want to create one navigation panel using treepanel, need help how can i get data from table and greate parent and child root in tree store like as given image example

my code is like :

 {

            id: 'SystemAppNavigation',
            height: 500,
            width: 200,
            layout: 'anchor',
            bodyStyle: {
                background: '#E6E6E6 !important',
                top: '-2px !important'
                // border:'1px solid #000'
            },
            border: false,
            region: 'west',
            items: [
                {
                    xtype: 'treepanel',
                    id: 'mytreepanel',
                    border: 0,
                    autoDestroy: false,
                    animate: false,
                    enableDrag: false,
                    enableDD:false,
                    bodyStyle: {
                        background: '#E6E6E6'
                    },
                    cls: '',
                    anchor: '100% 100%',
                    //store: 'SystemNavigationData',
                    store: Ext.create('Ext.data.TreeStore', {
                        root: {
                            expanded: true,
                            scroll: false,
                            enableColumnHide: false,
                            lines: false,
                            children: [
                                {
                                    text: 'Operations', id: 'MnuOperations', expanded: true, children: [
                                        { text: 'Tickets', id: 'SubMnuTickets', leaf: true },
                                        { text: 'Customers', id: 'SubMnuCustomers', leaf: true },
                                        { text: 'Choices', id: 'SubMnuChoices', leaf: true }
                                    ]
                                },
                                {
                                    text: 'Business', id: 'MnuBusiness', expanded: true, children: [
                                        { text: 'Credit', id: 'SubMnuCredit', leaf: true },
                                        { text: 'Gift Cards', id: 'SubMnuGiftCards', leaf: true },
                                        { text: 'Reporting', id: 'SubMnuReporting', leaf: true }
                                    ]
                                },
                                {
                                    text: 'Administrative', id: 'MnuAdministrative', expanded: true, children: [
                                        { text: 'Labor', id: 'SubMnuLabor', leaf: true },
                                        { text: 'Time', id: 'SubMnuTime', leaf: true },
                                    ]
                                },
                                {
                                    text: 'User Interface Behavior', id: 'MnuUsrInterfBehav', expanded: true, children: [
                                        { text: 'User Interface', id: 'SubMnuUsrInterf', leaf: true },
                                        { text: 'International', id: 'SubMnuInternational', leaf: true }
                                    ]
                                },
                                {
                                    text: 'Security', id: 'MnuSecurity', expanded: true, children: [
                                        { text: 'Security', id: 'SubMnuSecurity', leaf: true },
                                    ]
                                }
                            ]
                        }
                    }),
                    rootVisible: false,

                },

I want generate this tree nodes dynamically.

Thanks & Regards, Sandy

Answer 1

I have done this through custom styling. For selected Row and unselected row :

    #SystemAppNavigation .x-grid-row-focused .x-grid-td {
      border-bottom: 1px solid #B6B6B6 !important;
    } 
    #SystemAppNavigation tr.x-grid-row-selected .x-grid-cell {
      background-color: #fff !important;
      border-right: 0px;
    }

Parent Row styling :

#SystemAppNavigation tr.x-grid-tree-node-expanded .x-grid-cell {
  background-color: #333031 !important;
  border-right: 1px;
}
#SystemAppNavigation .x-grid-tree-node-expanded td {
  background-color: #333031;
  border-color: #333031 !important;
  cursor: default;
}