API:http://10.20.138.27/ext-3.4.0/docs/

 

ExtJS API文档的使用方法详解：http://www.cnblogs.com/liberD/archive/2011/09/12/2173997.html

extjs中文站：http://ajaxjs.com/

 

Sample:http://10.20.138.27/ext-3.4.0/examples/

source download：http://www.sencha.com/products/extjs3/download/ext-js-3.4.0/203

画图：http://www.amcharts.com/

官网：http://extjs.org.cn/

ext扩展组件rowaction：http://rowactions.extjs.eu/

参考：《ExtJS实用开发指南》

1、function和Function区别

function:js的保留关键字

Function:ext的类

2、多个tab

 
  
  1. var tabs = new Ext.TabPanel({ 
  2.     renderTo: Ext.getBody(), 
  3.     activeTab: 0, 
  4.     items: [{ 
  5.         title: 'Tab 1', 
  6.         html: 'A simple tab' 
  7.     },{ 
  8.         title: 'Tab 2', 
  9.         html: 'Another one' 
  10.     }] 
  11. }); 
 
  
3、结构关系图
 
  
extjs
 
  
4、绘图，需要有绘图的工具charts.swf文件
 
  
 
  
  1. function generateData() { 
  2.         var data = []; 
  3.         for ( var i = 0; i < 12; ++i) { 
  4.             data.push([ Date.monthNames[i], 
  5.                     (Math.floor(Math.random() * 11) + 1) * 100 ]); 
  6.         } 
  7.         return data; 
  8.     } 
  9.  
  10.     Ext.onReady(function() { 
  11.         var store = new Ext.data.ArrayStore({ 
  12.             fields : [ 'month', 'hits' ], 
  13.             data : generateData() 
  14.         }); 
  15.  
  16.         new Ext.Panel({ 
  17.             width : 700, 
  18.             height : 400, 
  19.             renderTo : document.body, 
  20.             title : 'Column Chart with Reload - Hits per Month', 
  21.             tbar : [ { 
  22.                 text : 'Load new data set', 
  23.                 handler : function() { 
  24.                     store.loadData(generateData()); 
  25.                 } 
  26.             } ], 
  27.             items : { 
  28.                 xtype : 'columnchart', 
  29.                 store : store, 
  30.                 yField : 'hits', 
  31.                 url : 'charts.swf', 
  32.                 xField : 'month', 
  33.                 xAxis : new Ext.chart.CategoryAxis({ 
  34.                     title : 'Month' 
  35.                 }), 
  36.                 yAxis : new Ext.chart.NumericAxis({ 
  37.                     title : 'Hits' 
  38.                 }), 
  39.                 extraStyle : { 
  40.                     xAxis : { 
  41.                         labelRotation : -90 
  42.                     } 
  43.                 } 
  44.             } 
  45.         }); 
  46.     }); 
 
  
xtype:columnchart含义：表示整个item的别称，代表item，用于延迟加载。url属性：需要找columnchart的相关API,可以查看帮助文档中的Ext.Component，其中包含了大量的xtype别名。
 
  
5、Tree展示：
 
  
 
  
  1. new Ext.onReady(function() { 
  2.     var tree = new Ext.tree.TreePanel({ 
  3.                 title : "this is a tree", 
  4.                 width : 200, 
  5.                 height : 200, 
  6.                 loader : new Ext.tree.TreeLoader(), 
  7.                 root : new Ext.tree.AsyncTreeNode({ 
  8.                             text : "root", 
  9.                             children : [{ 
  10.                                         text : "leaf 1", 
  11.                                         leaf : true 
  12.                                     }, { 
  13.                                         text : "leaf 2", 
  14.                                         leaf : true 
  15.                                     }] 
  16.                         }) 
  17.             }) 
  18.     tree.render("main"); 
  19.  
  20.         /* 
  21.      * var config = { title : "this is title", width : 400, height : 300, 
  22.      * buttons : [{ text : "确定" }, { text : "取消" }] }; var win = new 
  23.      * Ext.Window(config); win.show(); 
  24.      */ 
  25.     }); 
 
  
html中使用：
 
  
 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <link rel="stylesheet" type="text/css" 
  4.     href="common/extlib/resources/css/ext-all.css" /> 
  5. <link rel="stylesheet" type="text/css" 
  6.     href="common/extlib/resources/css/ext-font-patch.css" /> 
  7. <link rel="stylesheet" type="text/css" href="common/css/common.css" /> 
  8.  
  9. <script type="text/javascript" 
  10.     src="common/extlib/adapter/ext/ext-base.js"></script> 
  11. <script type="text/javascript" src="common/extlib/ext-all.js"></script> 
  12. <script type="text/javascript" src="common/js/utils.js"></script> 
  13.  
  14. <head> 
  15. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  16. <title>Insert title here</title> 
  17. </head> 
  18. <body> 
  19.     <script type="text/javascript" src="sample.js"></script> 
  20.     <div id="main"></div> 
  21. </body> 
  22. </html> 
 
  
 6、网站管理后台
 
  
 
  
  1. Ext.onReady(function() { 
  2.             new Ext.Viewport({ 
  3.                         enableTabScroll : true, 
  4.                         layout : "border", 
  5.                         items : [{ 
  6.                                     title : "面板", 
  7.                                     region : "north", 
  8.                                     height : 100, 
  9.                                     html : "<h1>网站后台管理系统!</h1>" 
  10.                                 }, { 
  11.                                     title : "菜单", 
  12.                                     region : "west", 
  13.                                     width : 200, 
  14.                                     collapsible : true, 
  15.                                     html : "菜单栏" 
  16.                                 }, { 
  17.                                     xtype : "tabpanel", 
  18.                                     region : "center", 
  19.                                     items : [{ 
  20.                                                 title : "面板1" 
  21.                                             }, { 
  22.                                                 title : "面板2" 
  23.                                             }] 
  24.                                 }] 
  25.                     }); 
  26.         }); 
 
  
7、表格
 
  
 
  
  1. Ext.onReady(function() { 
  2.             var data = [[1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com'], 
  3.                     [2, 'jfox', 'huihoo', 'www.huihoo.org'], 
  4.                     [3, 'jdon', 'jdon', 'www.jdon.com'], 
  5.                     [4, 'springside', 'springside', 'www.springside.org.cn']]; 
  6.             var store = new Ext.data.SimpleStore({ 
  7.                         data : data, 
  8.                         fields : ["id", "name", "organization", "homepage"] 
  9.                     }); 
  10.             var colM = new Ext.grid.ColumnModel([{ 
  11.                         header : "项目名称", 
  12.                         dataIndex : "name", 
  13.                         sortable : true 
  14.                     }, { 
  15.                         header : "开发团队", 
  16.                         dataIndex : "organization", 
  17.                         sortable : true 
  18.                     }, { 
  19.                         header : "网址", 
  20.                         dataIndex : "homepage" 
  21.                     }]); 
  22.             var grid = new Ext.grid.GridPanel({ 
  23.                         renderTo : "hello", 
  24.                         title : "中国Java开源产品及团队", 
  25.                         height : 200, 
  26.                         width : 600, 
  27.                         cm : colM, 
  28.                         store : store, 
  29.                         autoExpandColumn : 2 
  30.                     }); 
  31.         }); 
 
  
8、数据的返回：fields 
 
  
 
  
  1. this.store = new Ext.data.JsonStore({ 
  2.                             url : '../../hummockWhiteList/searchWhiteList.do', 
  3.                             totalProperty : 'total', 
  4.                             idProperty : 'id', 
  5.                             root : 'data', 
  6.                             remoteSort : true, 
  7.                             fields : ['id', 'appId', 'listKey', 'listValue', 
  8.                                     'validationTime', 'accessNum', 
  9.                                     'discription'] 
  10.                         }); 
 
  
9、ext核心组件
 
  
 
 
  
事件监听：Ext.util.Observable
 
  
组件：Ext.Component
 
  
方形的组件：Ext.BoxComponent
 
  
  autoHeight : Boolean,自动适应屏幕的高度
 
  
  autoScroll : Boolean，出现滚动条
 
  
容器：Ext.Container
 
  
   activeItem ：设置某一个为活动状态
 
  
   defaultType: button
 
  
   items :[{ text("按钮1")},text("按钮2")} 放东西
 
  
   layout : 
 
  
 
 
  
.on：添加事件
 
  
listeners : { click :btnClick() }
 
  
10、点击按钮“mybutton”，显示window
 
  
 
  
  1. new Ext.onReady(function() { 
  2.             var window = new Ext.Window({ 
  3.                         width : 400, 
  4.                         height : 300, 
  5.                         title : 'alibaba' 
  6.                     }); 
  7.             Ext.get("mybutton").on("click", function() { 
  8.                         //Ext.Msg.alert('Status', 'Changes saved successfully.'); 
  9.                 window.show(); 
  10.                     }); 
  11.         });