Extjs小结

以下是学习过程中记下来的一些小技巧,一定会有错,不保证全对,因为我也刚接触,只是将我的经验列一下.
<wbr>1)</wbr><wbr> 如果组件之间嵌套比较多的话，外面的Contaner 应尽量不要使用的 renderTo的属性来加载到某个div的id中,<br> 应尽量在定义了Contaner后，用obj.render('id') 这个方面来加载组件，可以减少错误<br><br><span style="font-weight:bold"><wbr>2)</wbr></span><wbr> 最好在最外层的Contaner组件(不是页面html,是extjs组件)定义with,不用定义height, 然后里面的一些组件<br> 比如panel等可以定义autoWidth: true, autoHeight: true, 就可以使用整个显示自动适应了。<br><br><span style="font-weight:bold"><wbr>3)</wbr></span><wbr> 要用到鼠标移上后出现提示框的都要先执行这句 Ext.QuickTips.init();<br><br><span style="font-weight:bold"><wbr>4)</wbr></span><wbr> 注意 Ext.onReady 的使用<br><br><span style="font-weight:bold"><wbr>5)</wbr></span><wbr> 如果有全局函数或全局的属性，不要放到onReady里面，即使只有onReady里面的对象调用了某个function,不然会提示<br> 函数未定义，在onReady外定义全局函数，如果函数用到某个对象，可以用Ext.getCmp来取得ExtComponent,同样的，<br> 即使是全局变量也一样，如果有iframe要调用parent中的变量，那更加要注意，这个变量只能定义在onReady外面，而<br> 且该变量的赋值不能在onReady的结束处用getCmp等来赋值，要在某个具体的动作才赋值，比如按纽点击等。<br><br><span style="font-weight:bold"><wbr>6)</wbr></span><wbr> 如果TabPanel有tab是用html: '&lt;iframe src=' 来载入页面，但是要在iframe的页面中关闭TabPanel中<br> 的某一个tab,可以使用如下的方法实现<br> TabPanel所以页面,定义一个全局变量 var tabPanel = null; 然后在 Ext.onReady 中给这个 变量赋<br> 值,那么在iframe页面就可以通过 parent.tabPanel来取得这个变量了,然后再调用 tabPanel.remove('')<br> 就可以删除TabPanel中的某一个tab<br><br><span style="font-weight:bold"><wbr>7)</wbr></span><wbr><br> Ext.get( 'htmlId' ); // 和document.getElementById('');不一样，返回的是Element<br> Ext.get( 'htmlId' ).dom; // 和document.getElementById('');一样，返回的是HTMLElement<br> Ext.getCmp( 'cmpId' ); // 返回的是 Ext.Component<br> Ext.isEmpty( Mixed value ); // 判断是否是空，包括空字符串<br> Ext.num( Mixed value, Number defaultValue ); // 判断是否是数字,不是就返回defaultValue<br> Ext.id( [Mixed el], [String prefix] ); // 生成一个唯一的id,<br> // 包 Ext.util.Format , 包括多种的格式化函数<br><br><span style="font-weight:bold"><wbr>8)</wbr></span><wbr><br> render();<br> // 空参数，可以使组件的子组件，或包含的panel等复位，不包括孙组件<br> // 比如viewport中的panel拖放后，调用后,panel会回到原来的地方<br><br><span style="font-weight:bold"><wbr>9)</wbr></span><wbr><br> bodyStyle: 'width:100%',<br> viewConfig: { forceFit: true }, // 如果grid的column指定了width的值,最好使用这个强制宽度<br> layout: 'fit',<br> iconCls: '', //用这个可以控制panel的title与左边框的距离<br><br><span style="font-weight:bold"><wbr>10)</wbr></span><wbr><br> 用layout:'table'时记住要指明一下<br> layoutConfig: {<br> // The total column count must be specified here<br> columns: 3<br> },<br><br><span style="font-weight:bold"><wbr>11)</wbr></span><wbr><br> 使panel自动适应面板的方法<br> 首先定义一个 viewPort( {layout: 'border', items: []} ), 然后在items中添加一个<br> panel( {region: 'center', layout: 'fit', items:[]} ), 然后再在panel的items中添加<br> 一个gridPanel( {autoHeight: true, layout: 'fit'} ), 这样就可以了<br> 以下这个代码是非ViewPort使Panel自适应代码:<br> var panel = new Ext.Panel({<br> id: 'subpanel',<br> layout: 'column',<br> frame: true,<br> layoutConfig: { columns: 2 },<br> items: [<br> { columnWidth: .5, layout: 'fit', items: [ tabpanel ] },<br> //tabpanel中不要指定width,但可以autoHeight: true, 但不能autoWidth: true,<br> { columnWidth: .5, layout: 'fit', html:'&lt;img id="imgpic" src="" style="width: 160px; height: 80px;" /&gt;' }<br> ]<br> });<br><br><span style="font-weight:bold"><wbr>12)</wbr></span><wbr><br> {contentEl:'tab1', title:'Tab 1'},<br> // contentEl 一般是页面中有一个div,id为tab1, 那么当前的panel会自动将该div做为子元素纳入管理<span style="font-size:24px; color:#6f2e2a; line-height:1.3em"> </span></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>