学extjs笔记 -- David Chen
2008-06-24 14:31
393 查看
以下是学习过程中记下来的一些小技巧,一定会有错,不保证全对,因为我也刚接触,只是将我的经验列一下.
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 });
相关文章推荐
- EXTJS学习笔记:更换皮肤
- ExtJS 学习笔记 示例2-在组件中添加子组件,并操作子组件
- extjs 学习笔记(一) 一些基础知识
- extJs 2.1学习笔记(Ext.Updater篇二)
- ExtJS学习笔记:复杂页面布局实现
- EXTJS学习笔记:grid之gridview
- extjs学习笔记(二) Ext.Element类
- extjs 学习笔记(三) 最基本的grid
- ExtJs 学习笔记 一 初体验
- ExtJs4 笔记(1) ExtJs大比拼JQuery:Dom文档操作
- ExtJS 开发笔记
- ExtJS学习笔记2:响应事件、使用AJAX加载数据
- ExtJS学习笔记3:加载、提交和验证表单
- ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)
- ExtJs学习笔记(8)_TabPanel的用法
- ExtJs学习笔记(10)_Window窗口的Border布局
- ExtJs学习笔记(15)_fit布局
- ExtJs学习笔记(11)_Absolute布局和Accordion布局
- 【Extjs学习笔记01】使用Sencha Cmd构建项目
- 10、ExtJS入门教程【学习笔记】