zoukankan      html  css  js  c++  java
  • 学extjs已经了解基本了,可以进行项目开发,把总结的一些小点列出来一下 转载

    学extjs已经了解基本了,可以进行项目开发,把总结的一些小点列出来一下 --转载

     
    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: '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=" 160px; height: 80px;" />' }
    ]
    });

    12)
    {contentEl:'tab1', title:'Tab 1'},
    // contentEl 一般是页面中有一个div,id为tab1, 那么当前的panel会自动将该div做为子元素纳入管理
  • 相关阅读:
    PHPStorm--美化
    Laravel5.1 模型--关联关系(复杂)
    HTML5 getUserMedia/AudioContext 打造音谱图形化
    如何在终端实时展现当前运行的git分支
    关于ionic的跨域问题
    ionic插件安装与卸载
    虚拟机调试ionic项目
    ionic双击退出键退出APP
    npm install 镜像
    对Date的扩展,将 Date 转化为指定格式的String
  • 原文地址:https://www.cnblogs.com/holyes/p/e1137b5cd55d59bab4f75186f821acf1.html
Copyright © 2011-2022 走看看