Extjs学习汇总-CSDN博客

本文链接：https://blog.csdn.net/xuan195/article/details/84059261

一、入门--百度知道
     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 ）