Extjs 基础使用（一）

浏览数：35 / 时间：2015年06月09日

 1 //显示一个Ext样式的标题和内容。
 2     //Viewport对象简单认为就是浏览器的整个窗口[渲染于body元素]
 3     //Extjs中不建议使用new create()方法可以实现对象的动态加载
 4     /*Ext.create(‘Ext.Viewport‘, {
 5         layout: ‘fit‘, //表示撑满整个窗口
 6         items: [{
 7             title: ‘欢迎‘,
 8             html: ‘Hello! Welcome to Ext JS.‘
 9             }
10         ]
11     });

 1 //使用Application作为程序入口
 2 //可以使用MVC架构的Application对象作为程序入口。
 3 Ext.application({
 4         name: ‘HelloExt‘,
 5         launch: function() { //即运行的起始点
 6             Ext.create(‘Ext.container.Viewport‘, {
 7                 layout: ‘fit‘, //表示撑满整个窗口
 8                 items: [{
 9                     title: ‘欢迎‘,
10                     html: ‘Hello! Welcome to Ext JS.‘
11                     }
12                 ]
13             });  
15     }
16 })

读取数据的方法：

 1 var my_reader = Ext.create(‘Ext.data.reader.Json‘, {
 2         root: ‘rows_data‘
 3     });
 4     var my_proxy = Ext.create(‘Ext.data.proxy.Ajax‘,{
 5         url: ‘get_db_rows.php‘,
 6         reader: my_reader
 7     });
 8     var my_store = Ext.create(‘Ext.data.Store‘,{        
 9         proxy: my_proxy,
10         autoLoad: true,
11         fields: [‘id‘, ‘name‘, ‘email‘]
12     });*/
13     var my_store = Ext.create(‘Ext.data.Store‘,{
14         type: ‘json‘,
15         proxy: {
16             type: ‘ajax‘,
17             url: ‘get_db_rows.php‘,
18             reader: {
19                 type: ‘json‘,
20                 root: ‘rows_data‘
21             }
22         },
23         autoLoad: true,
24         fields: [‘id‘, ‘name‘, ‘email‘]
25     });

也可以使用模型：

 1 //使用数据模型
 2     Ext.define(‘User‘, {
 3         extend: ‘Ext.data.Model‘,
 4         fields: [‘id‘, ‘name‘, ‘email‘],
 5         proxy: {
 6             type: ‘ajax‘,
 7             url: ‘get_db_rows.php‘,
 8             reader: {
 9                 type: ‘json‘,
10                 root: ‘rows_data‘
11             }
12         }
13     });