Extjs学习汇总

一、入门--百度知道
     Extjs介绍、发展史
     地址：http://baike.baidu.com/view/1350145.html?wtp=tt

二、资料
     官网地址：http://www.sencha.com/ （最好注册一个用户、每次看都用谷歌翻译整个页面）
     中文网站：http://extjs.org.cn/  （不咋的，可以看作是官网介绍，翻译了部分官网文章。）
     官方源文件：Ext-3.1.0.rar
     其他教程：《Ext 3.0中文API.CHM》,《Ext Core 手册.PDF》,《EXT中文手册》,《ExtJS实用开发指南》、《掏钱学ExtJs完全版》、《ExtJS深入浅出》、《ExtJS_3.0_Cookbook》、《EXTJS源码分析》

三、问题汇总： 

     1.官方问题汇总（EXT FAQ）：（http://www.sencha.com/learn/Ext_FAQ_Grid）推荐
          官方收集的常见问题和解决方案。
     2.Ext grid 如何将两列的值显示到同一列中？（http://www.iteye.com/problems/1268）
         //将字段first_name与last_name合二为一，取得full_name。
//例子如下：
var reader = new Ext.data.ArrayReader({},[ 
        
       {name:'full_name',type:'string',mapping:'first_name+ " " + obj.last_name'}, 
       {name: 'age'} 
]); 

var grid = new Ext.grid.GridPanel({ 
       store: new Ext.data.Store({ 
             render: reader, 
             data: Ext.grid.dummyData 
       }), 
       columns:[ 
              {header: 'Full Name',dataIndex: 'full_name'}, 
              {header: 'Age',dataIndex:'age'} 
       ] 
})

     3.ExtJS Grid Tooltip实现方法总结（http://hi.baidu.com/gislovers/blog/item/4ef349974cf7ed47d0135ee7.html）
    
     4.Combobox属性详解（http://77321660.iteye.com/blog/407678）推荐

     5.ExtJS Grid 改变单元格颜色的方法（http://kbing001.iteye.com/blog/465510）推荐

     6.Extjs Themes Download（http://extjs.fudini.net/）

     7.ExtJS技巧笔记（http://yourgame.iteye.com/blog/464691）推荐

     8.ExtJS中radioGroup和checkboxGroup的取值和赋值（http://hi.baidu.com/zhangxuan1224/blog/item/f7597706cb1d8a7702088183.html）

     9.深入剖析ExtJS 2.2实现及应用连载：Ext.extend函数的扩展（http://www.iteye.com/topic/312866）
    
     10.ExtJS编程基础--类（http://hi.baidu.com/pigshome/blog/item/249559346b7ae24d251f149b.html）

     11.ExtJS Grid Drag Drap Grid拖动 （http://www.cnblogs.com/zhjp11/archive/2009/12/08/1619262.html）

     12.TextField 隐藏的时候fieldlaber怎么隐藏（http://www.iteye.com/problems/15296）
          隐藏fieldLabel的两种方法：hideLable:true和不给fieldLabel属性并设labelSeparator:""
    
     13.关于ext form上传文件的问题 （http://ext.group.iteye.com/group/topic/5950）

     14.如何把store里的所有数据转换成JSON传给后台（http://blog.csdn.net/yueue/article/details/4555089）
         var lstAddRecord=new Array();
store.each(function(record) {
      lstAddRecord.push(record.data);
});
Ext.Ajax.request({
    url: 'function/rivaldata/rivalDataAction.do?tag=add',
    params: {strJson:Ext.encode(lstAddRecord)}
});

     15.【Extjs学习一】Extjs2继承函数简单分析及疑问（http://www.iteye.com/topic/195409）推荐
    
     16.Ext3 chart 图标（http://www.iteye.com/topic/478806）

     17.Ext 3.X新增内容系列文章之三：DWR的替代品Ext.Direct（http://blog.csdn.net/zhangxin09/article/details/4740131）
     
     18.Ext formpanel submit 提交与ext.ajax.request提交的区别（http://wjt276.iteye.com/blog/806466）

     19.ext grid 没有数据时不显示横向滚动条的解决办法（http://waitingmyself.blog.163.com/blog/static/15721332009155261221/） 
          this.grid.getView().mainBody.dom.style.width = this.grid.getView().getTotalWidth();
          this.grid.getView().mainBody.dom.style.height = '1px';

          (this.grid为创建的grid)
    
     20.ext grid在panel中高度的问题（http://zhidao.baidu.com/question/99743477）
    
     21.ext panel iframe的问题 （http://topic.csdn.net/u/20090919/01/a7297f8b-5989-4155-8d3e-986d4d81ec14.html）推荐

     22.Ext 弹出窗体最大化（http://blog.csdn.net/lfp0202/article/details/4738684）

     22.Ext.extend 在EXT框架中实现类继承的机制（http://hi.baidu.com/520huan_byaxiom/blog/item/d803fb1360adf524dc5401d7.html）
    
     23.Ext.grid现ext.grid显示隐藏行（http://www.cnzzad.com/tut/57908.html）推荐
     通过行号在GridView通过调用 addRowClass(rowNumber,className),removeRowClass(rowNumber,className) 来设置目标行的css类，在这个css类里你可以设定display:none来达到你要的效果。

     24.Ext：设置 Ext panel的背景色和边界（http://hi.baidu.com/ccutshyhao/blog/item/8ac4c3422d8af31b72f05d7f.html）

     25.ext-grid常见问题 FAQ: Grid（http://www.iteye.com/topic/197071）推荐

     26.ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)（http://www.pin5i.com/showtopic-19617.html）推荐

     27.ExtJS Grid 滚动到指定Record+选择多行（http://atian25.iteye.com/blog/425760）推荐（此人博客写的不错）

     28.ExtJS Grid 选择文字以便复制 （http://atian25.iteye.com/blog/428946）推荐
    
     29.ExtJS Panel中放入iframe的三种方法(http://bamanzi.iteye.com/blog/459003)
          //way 1   //it works
        var frame1 = document.createElement("IFRAME");
        frame1.id = "frame1";
        frame1.frameBorder = 0;
        frame1.src = "reports/empty-report.html";
        frame1.height = "100%";
        frame1.width = "100%";
      
        var panel2 = new Ext.Panel( {
            id : "panel2",
            items: [ frame1 ]
            //contentEl: "frame1" //this won't work
            });
          
//way 2  //it works, too
        var panel2 = new Ext.Panel( {
                id:  "panel2",
                fitToFrame: true,              
                html: '<iframe id="frame1" src="../examples/layout/table.html" frameborder="0" width="100%" height="100%"></iframe>'
            });

//way 3  //it works
// first, we need to add a line in HTML
//<iframe id="frame1_rename" frameborder="0" height="100%" width="100%" src="reports/empty-report.html"/>          
        var panel2 = new Ext.Panel( {
                id:  "panel2",
                contentEl: "frame1"
            });

      // 后面将frame导航到其它URL
     document.getElementById("frame1").src = "/extjs3/examples/layout/vbox.html";

     30.ExtJS的xtype列表(http://www.blogjava.net/rain1102/archive/2009/11/20/303005.html)

• xtype                  Class            
• 基本组件：                                                                 
• box                    Ext.BoxComponent                      具有边框属性的组件
• button                Ext.Button                                      按钮
• colorpalette      Ext.ColorPalette                            调色板
• component       Ext.Component                            组件
• container          Ext.Container                                容器
• cycle                 Ext.CycleButton
• dataview          Ext.DataView                                数据显示视图
• datepicker       Ext.DatePicker                              日期选择面板
• editor                Ext.Editor                                       编辑器
• editorgrid         Ext.grid.EditorGridPanel              可编辑的表格
• grid                   Ext.grid.GridPanel                         表格
• paging              Ext.PagingToolbar                         工具栏中的间隔
• panel                Ext.Panel                                        面板
• progress          Ext.ProgressBar                            进度条
• splitbutton        Ext.SplitButton                               可分裂的按钮
• tabpanel           Ext.TabPanel                                 选项面板
• treepanel         Ext.tree.TreePanel                         树
• viewport           Ext.ViewPort                                  视图
• window             Ext.Window                                   窗口
• 工具栏组件：
• toolbar              Ext.Toolbar                                    工具栏
• tbbutton            Ext.Toolbar.Button                         按钮
• tbfill                   Ext.Toolbar.Fill                               文件
• tbitem               Ext.Toolbar.Item                            工具条项目
• tbseparator      Ext.Toolbar.Separator                  工具栏分隔符
• tbspacer          Ext.Toolbar.Spacer                       工具栏空白
• tbsplit               Ext.Toolbar.SplitButton                 工具栏分隔按钮
• tbtext                Ext.Toolbar.TextItem                     工具栏文本项
• 表单及字段组件：
• form                  Ext.FormPanel Form                     面板
• checkbox         Ext.form.Checkbox checkbox       录入框
• combo             Ext.form.ComboBox combo         选择项
• datefield          Ext.form.DateField                        日期选择项
• field                  Ext.form.Field                                 表单字段
• fieldset            Ext.form.FieldSet                           表单字段组
• hidden             Ext.form.Hidden                             表单隐藏域
• htmleditor        Ext.form.HtmlEditor html               编辑器
• numberfield     Ext.form.NumberField                   数字编辑器
• radio                Ext.form.Radio                               单选按钮
• textarea           Ext.form.TextArea                          区域文本框
• textfield            Ext.form.TextField                          表单文本框
• timefield           Ext.form.TimeField                         时间录入项
• trigger              Ext.form.TriggerField                      触发录入项

     31.Extjs中ComboBox选中默认值(http://easycode.iteye.com/blog/503090)

     32.浏览器宽高（http://topic.csdn.net/u/20080716/14/a78201a1-95ad-429e-94a6-27d057596c09.html）
      
alert("网页可见区域宽： document.body.clientWidth："+document.body.clientWidth);
alert("网页可见区域高： document.body.clientHeight："+document.body.clientHeight);
alert("网页可见区域宽： document.body.offsetWidth (包括边线的宽)："+document.body.offsetWidth);
alert("网页可见区域高： document.body.offsetHeight (包括边线的高)："+document.body.offsetHeight);
alert("网页正文全文宽： document.body.scrollWidth："+document.body.scrollWidth);
alert("网页正文全文高： document.body.scrollHeight："+document.body.scrollHeight);
alert("网页被卷去的高： document.body.scrollTop："+document.body.scrollTop);
alert("网页被卷去的左： document.body.scrollLeft："+document.body.scrollLeft);
alert("网页正文部分上： window.screenTop："+window.screenTop);
alert("网页正文部分左： window.screenLeft："+window.screenLeft);
alert("屏幕分辨率的高： window.screen.height："+window.screen.height);
alert("屏幕分辨率的宽： window.screen.width："+window.screen.width);
alert("屏幕可用工作区高度： window.screen.availHeight："+window.screen.availHeight);
alert("屏幕可用工作区宽度： window.screen.availWidth："+window.screen.availWidth);
       
     33.Ext异步加载与同步加载（http://1000.iteye.com/blog/446681）
    
     34.主题：ext性能探讨（http://www.vifir.com/bbs/html/20080529/589880.html）推荐

     35.ext中查询后传给callback函数的数据到底是什么类型（http://www.iteye.com/problems/13187）推荐

     36.tabPanel 如何动态改变ico（http://www.iteye.com/problems/15719）

     37.ExtJS模板使用：推荐
http://damoqiongqiu.iteye.com/blog/412435
http://www.iteye.com/topic/376555
http://www.cnblogs.com/zqmingok/articles/1698336.html
    
     38.extjs 怎么保存树数据(附代码)（http://www.iteye.com/problems/38906）

四、插件
     1.DatePickerPlus日期插件（ http://www.lubber.de/extjs/datepickerplus/?&extv=3.2.1&lang=EN）
     2.编辑树Grid（http://max-bazhenov.com/dev/ux.maximgb.tg/index.php ）