EXTJS6 (iii)--write a simple page with extjs6.0

This article is based on ext-6.0.0

First, about border layout

In the process of using EXT to do the project, the most commonly used layout is border layout, now to write this simple page is to use the border layout to do. Border layout will be divided into five parts of the page, respectively, North , south, west, east, center, corresponding to the upper, lower, left, right, middle, see below a simple example of border layout.

Ext.define (' Learning.view.treelearn.trees ', {extend:' Ext.panel.Panel ', Xtype:' Trees-main ',Referenceholder:true, layout:' Border ', defaults:{Collapsible:true, Split:true}, items: [{Region :' North ', bind: {html:On            }        },        {Region :' South ', bind: {html:Under}}, {reference:' Treesleft ',            //xtype: ' Treesleft ',Region: ' West ', Width:200, bind: {html:Left            }        },        {Region :' East ', Width:200, bind: {html:Right}}, {reference:' Treescenter ', Region:' Center ', bind: {html:In            }        },    ]});

Second, write North part (head)

The above section usually write system name, user name, can also add Logout button, search box, etc., here simply write a name.

1, in the above trees.js on the basis of change, join Treestop

       {            reference:' Treestop ',            xtype:' treestop ', Region            :' North ',                     false,false,            height:            

2, Treestop.js

Ext.define (' Learning.view.treelearn.region.treesTop ', {    ' Ext.toolbar.Toolbar ',    xtype: ' Treestop ',    style:' background-color: #35baf6; color: #fff; ' ,    items:[        {            xtype:' label ',            bind:{                text:' ExtJS learning '            },            style:' font-size:20px;font-weight:bold; '         },'--',        {            xtype:' label ',            bind:{                text:' Current User: ' + ' Wheat Cowpea ',            },        },    ]    });

Third, write West section (left navigation bar)

The first is the navigation bar to complete the effect, figure two is the directory structure (that is, I use the file where the files are placed)

1, in the above trees.js change, add Treesleft

     {            reference:' Treesleft ',            xtype:' Treesleft ', Region            :' West ',            width: $,            bind: {                ' left '            }        },

2, write treesleft.js, data from the store

Ext.define (' Learning.view.treelearn.region.treesLeft ', {    ' Ext.tree.Panel ',    xtype:' Treesleft ',    title:' navigation menu ',    false,    false,    Store:Ext.create (' Learning.store.treelearn.treesLeftStore ', {        "Treesleftstoreid"      }),});

3, Treesleftstore.js, simulate Ajax, load the data in the Data.json

Ext.define (' Learning.store.treelearn.treesLeftStore ', {    Extend:"Ext.data.TreeStore",     ' Store.treesleftstore ',    proxy: {          '          Ajax ', ' App/data/data.json '      },      Root: {          true      },      true});

4, Data.json, the general background is sent over the JSON data, where the content is not related to the backend, so the simulation of their own data. (There are few data here, that is to show the format)

[{text:' Panels ', ID:' Panels ', expanded:true, children: [{ID:' Basic-panels ', Text:' Basic Panel ', Leaf:true}, {ID:' Framed-panels ', Text:' Framed Panel ', Leaf:true      }    ]  },{text:' Trees ', ID:' Trees ', expanded:true, children: [{ID:' Basic-trees ', Text:' Basic Trees ', Leaf:true}, {ID:' Tree-reorder ', Text:' Tree Reorder ', Leaf:true      }    ]  },]

-----------------------here, the sidebar looks like this----------------------------------------

But just look at the goods, can not be used, the next write how to make it possible to jump page.

EXTJS6 (iii)--write a simple page with extjs6.0