Home > Developer > JavaScript
After the modification, no store or model was created at the time of sending.
A feature is added based on the previous version. click the Button on the left to add a new tab on the right, add the page and grid to the tab, and review the previous learning items.
Check the Code:
Index.html and app. js are not modified. This should be the advantage of MVC. here only the modified Code is pasted:
Two buttons are added to the left navigation bar:
Accordion. js:
[Javascript]
Ext. define ('ht. view. Accordion ',{
Extend: 'ext. panel. Panel ',
Title: 'System settings ',
Alias: 'widget. accordion ',
Collapsible: true,
Split: true,
Width: 200,
Layout: 'accordion ',
Region: 'west ',
LayoutConfig :{
TitleCollapse: true, // you can click it to shrink the entire title bar.
Animate: true, // enable the default animation effect
ActiveOnTop: true // The expanded panel is always at the top layer.
},
Items :[
{
Title: 'homepage settings ',
Items :[
{
Xtype: 'button ',
Width: 150,
Id: 'homepageset ',
Text: 'homepage Management'
},{
Xtype: 'button ',
Width: 150,
Id: 'adminset ',
Text: 'administrator Management'
}
]
},{
Title: 'navigation bar settings ',
Html: 'navigation bar'
},{
Title: 'Article settings ',
Html: 'Article settings'
},{
Title: 'message settings ',
Html: 'login'
}
]
});
Create User. js on the model layer:
[Javascript]
Ext. define ('ht. model. user ',
{
// Do not forget to inherit
Extend: 'ext. data. model ',
Fields :[
{Name: 'id', mapping: 'id '},
{Name: 'name', mapping: 'name '},
{Name: 'sex', mapping: 'sex '},
{Name: 'age', mapping: 'age '},
{Name: 'birthdate', mapping: 'birthdate', type: 'date', dataFormat: 'Y-m-d '}
]
}
)
Create the store-layer Users. js:
Ext. define ('ht. store. users ',{
// Do not forget to inherit
Extend: 'ext. data. store ',
// Remember to set the model
Model: 'ht. model. user ',
// Set automatic loading to true
AutoLoad: true,
Proxy :{
Type: 'ajax ',
Url: 'users ',
Reader :{
// The data format is json.
Type: 'json ',
Root: 'users'
}
}
});
Then, a Grid is added to the view:
Grid. js:
[Javascript]
Ext. define ('ht. view. grid ',{
Extend: 'ext. grid. Panel ',
Title: 'personnel list ',
InitComponent: function (){
Ext. apply (this ,{
// Width: 400,
// Height: 170,
Layout: 'fit ',
// Frame: true,
Store: 'users ',
Columns: [// configure the table "G"
New Ext. grid. RowNumberer (), // table row number component
{Header: "No.", width: 80, dataIndex: 'id', sortable: true },
{Header: "name", width: 80, dataIndex: 'name', sortable: true },
{Header: "age", width: 80, dataIndex: 'age', sortable: true },
{Header: "gender", width: 80, dataIndex: 'sex', sortable: true },
{Header: "Birthday", width: 80, dataIndex: 'birthdate', sortable: true}
]
}),
This. callParent (arguments );
}
});
A common page is introduced in the tab of "homepage Settings:
[Html]
<! DOCTYPE html>
<Html>
<Head>
<Title> setHomePage.html </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<! -- <Link rel = "stylesheet" type = "text/css" href = "./styles.css"> -->
</Head>
<Body>
<Form action = "" method = "get">
<Table>
<Tr>
<Td> title </td>
<Td> <input type = "text" name = "title"> </td>
</Tr>
<Tr>
<Td> domain name </td>
<Td> <input type = "text" name = "yuming"> </td>
</Tr>
<Tr>
<Td> copyright information </td>
<Td> <input type = "text" name = "copyright"> </td>
</Tr>
<Tr>
<Td> introduction </td>
<Td> <input type = "text" name = "description"> </td>
</Tr>
<Tr>
<Td>
<Input type = "submit" ">
</Td>
<Td> </td>
</Tr>
</Table>
</Form>
</Body>
</Html>
:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
