首页 > 代码库 > Extjs 基础使用(一)

Extjs 基础使用(一)

 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     });

 

Extjs 基础使用(一)