现在的位置: 首页 > 综合 > 正文

EXT JS 常见问题FAQ

2013年10月01日 ⁄ 综合 ⁄ 共 4317字 ⁄ 字号 评论关闭

1)

 

 如果组件之间嵌套比较多的话,外面的Contaner 应尽量不要使用的 renderTo的属性来加载到某个div的id中,

 

应尽量在定义了Contaner后,用obj.render('id') 这个方面来加载组件,可以减少错误

2)

 

 最好在最外层的Contaner组件(不是页面html,是extjs组件)定义with,不用定义height, 然后里面的一些组件

 

比如panel等可以定义autoWidth: true, autoHeight: true, 就可以使用整个显示自动适应了。

 

 

 

3)

 

 要用到鼠标移上后出现提示框的都要先执行这句 Ext.QuickTips.init();

 

 

 

4)

 

 注意 Ext.onReady 的使用

 

 

 

5)

 

 如果有全局函数或全局的属性,不要放到onReady里面,即使只有onReady里面的对象调用了某个function,不然会提示

 

函数未定义,在onReady外定义全局函数,如果函数用到某个对象,可以用Ext.getCmp来取得ExtComponent,同样的,

 

即使是全局变量也一样,如果有iframe要调用parent中的变量,那更加要注意,这个变量只能定义在onReady外面,而

 

且该变量的赋值不能在onReady的结束处用getCmp等来赋值,要在某个具体的动作才赋值,比如按纽点击等。

 

 

 

6)

 

 如果TabPanel有tab是用html: '<iframe src=' 来载入页面,但是要在iframe的页面中关闭TabPanel中

 

的某一个tab,可以使用如下的方法实现

 

TabPanel所以页面,定义一个全局变量 var tabPanel = null; 然后在 Ext.onReady 中给这个 变量赋

 

值,那么在iframe页面就可以通过 parent.tabPanel来取得这个变量了,然后再调用 tabPanel.remove('')

 

就可以删除TabPanel中的某一个tab

 

 

 

7)

 

 

 

Ext.get( 'htmlId' ); // 和document.getElementById('');不一样,返回的是Element

 

Ext.get( 'htmlId' ).dom; // 和document.getElementById('');一样,返回的是HTMLElement

 

Ext.getCmp( 'cmpId' ); // 返回的是 Ext.Component

 

Ext.isEmpty( Mixed value ); // 判断是否是空,包括空字符串

 

Ext.num( Mixed value, Number defaultValue ); // 判断是否是数字,不是就返回defaultValue

 

Ext.id( [Mixed el], [String prefix]  ); // 生成一个唯一的id,

 

// 包 Ext.util.Format , 包括多种的格式化函数

 

 

 

8)

 

 

 

render();

 

// 空参数,可以使组件的子组件,或包含的panel等复位,不包括孙组件

 

// 比如viewport中的panel拖放后,调用后,panel会回到原来的地方

 

 

 

9)

 

 

 

bodyStyle: 'width:100%', 定义组件宽度100%

 

viewConfig: { forceFit: true }, // 如果grid的column指定了width的值,最好使用这个强制宽度

 

layout: 'fit',

 

iconCls: '', //用这个可以控制panel的title与左边框的距离

 

 

 

10)

 

 

 

用layout:'table'时记住要指明一下

 

    layoutConfig: {

 

        // The total column count must be specified here

 

        columns: 3

 

    },

 

 

 

11)

 

 

 

使panel自动适应面板的方法

 

首先定义一个 viewPort( {layout: 'border', items: []} ), 然后在items中添加一个

 

panel( {region: 'center', layout: 'fit', items:[]} ), 然后再在panel的items中添加

 

一个gridPanel( {autoHeight: true, layout: 'fit'} ), 这样就可以了

 

以下这个代码是非ViewPort使Panel自适应代码:

 

    var panel = new Ext.Panel({

 

        id: 'subpanel',

 

                layout: 'column',

 

                frame: true,

 

                layoutConfig: { columns: 2 },

 

        items: [

 

            { columnWidth: .5, layout: 'fit', items: [ tabpanel ] },

 

            //tabpanel中不要指定width,但可以autoHeight: true, 但不能autoWidth: true,

 

            { columnWidth: .5, layout: 'fit', html:'<img id="imgpic" src="" style="width: 160px; height: 80px;" />' }

 

        ]

 

    });

 

 

 

12)

 

 

 

{contentEl:'tab1', title:'Tab 1'},

 

// contentEl 一般是页面中有一个div,id为tab1, 那么当前的panel会自动将该div做为子元素纳入管理

 

 

 

 

 

13)js动态组装json

 

 

 

 

 

 

 

var datacolumn= [];

 

for (var i = 0; i < colcount; i++) {

 

 datacolumn.push(['value'+i,'text'+i]);

 

}

 

var storecolumn = new Ext.data.SimpleStore({

 

 fields : ['value', 'text'],

 

 data : datacolumn

 

});

 

 

 

 

 

 

 

如何创建对象实例:
var app = function() { var privVar=11; return {p1:11, p2:22,init:function(){}};}();

js创建对象的原理:
实际上创建了一个匿名函数(没有名字的函数),经过解释之后让它立刻运行(注意函数后面的())。最后将函数返回的对象(注意此时是一个object变量)分配到变量o。

对象的访问控制

私有变量和私有函数直接定义在function和return这两个声明之间,由于这段代码的会在head中加载,因此不能访问页面中的html
return 中的函数如init,是由匿名函数返回的对象的一个方法而已。它会在文档全部加载后才运行。换言之整个DOM树已经是可用的了

实例环境
在new的cmp里指定scope:this; 把环境指向

Ext中的get、getDom、getCmp、getBody、getDoc的区别
get方法用来得到一个Ext元素,
getCmp方法-获得Ext组件,Ext.getCmp("h2").来得到id为h2的组件
getDom方法-获得DOM节点 Ext.getDom("div2"),得到id为div2的html DOM
getBody方法-得到文档的body节点元素 (Element)。
getDoc方法-获得与document对应的Ext元素(Element),实质上就是把当前html文档对象,也就是把document对象封装成ExtJS的Element对象返回,该方法不带任何参数。

如何重写公共变量
Ext.apply(app, { p1:33});

重写(Overriding)公共函数
Ext.apply(ns.app,
 {
  testfn: function()
   {
    alert('test');
   }
 }
);

指定onReady的scope有什么用
Ext.onReady(app.init, app);
用于公共函数中this调用其他公共函数
init : function(){
    this.checkCount();
}

如何向页面dom id渲染
var p = new MyPanel({
 renderTo:'hello',
 title : 'My Second Panel'
});

var p = new MyPanel({
 title : 'My Second Panel'
});
p.render("hello");

如保满屏全屏显示Ext组件 :
将组件放入ViewPort,前提是根布局一定要有一个 region:'center'
 var vp = new Ext.Viewport({
    layout : "fit",
    items : [{
     region:'center'
     ,border:true
     ,items: p
     ,layout:'fit'
     ,margins: '5 5 5 0'
     ,cmargins: '5 5 5 5'
    }]
 });

如何继承
// 构造器函数
var MyPanel = function(config) {
 Ext.apply(this, {
    width : 300,
    height : 300
   });
 MyPanel.superclass.constructor.apply(this, arguments);
};
// My Panel继承了Ext.Panel
Ext.extend(MyPanel, Ext.Panel, {});

关于ext与JQ冲突的解决方法
         ext与JQ冲突最致命在于$(this)在EXT传递上有问题,原因在于jQuery很多函数返回的是jQuery类型,其实就是数组,是经过一定封装的。
       螃哈哈同志已经给出了三个方案:
       1)通过jQuery中类似get()的方法,因为get()方法返回的是Element,那么就可以传入EXT.get()中了
       2)在jQuery回调函数function(e)(注:很多都可以带有e这个事件参数)中做文章,通过 EXT.get(e.arget)来达到目的。
       3)通过 $('p').lt(5).gt(3).parent().attr("id","myId") 强行设置id,再通过 EXT.get("myId") 来得到

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lizhao1226/archive/2010/01/15/5192741.aspx

抱歉!评论已关闭.