extjs 学习小窍门

extjs 学习小窍门
标签： extjs学习窍门 杂谈 分类： extjs学习
一、从form中获取field的三个方法：
１、Ext.getCmp('id');
２、FormPanel.getForm().findField('id/name');
３、Ext.get('id/name');//前提是FormPanel在界面上显示出来了。

二、ExtJS如何给textfield赋值的三个方法：
var value="值";
１、 fs.form.findField(id/name).setValue(value);
２、 Ext.get(id/name).setValue(value);
３、 Ext.getCmp(id).setValue(value);

三、Ext grid中得到选择行的方法

在Ext grid中假设有一个名称为grid的对象。
(1)grid.getStore().getRange(0,store.getCount());//得到grid所有的行
(2)grid.getSelectionModel().getSelections()//得到选择所有行
(3)grid.selModel.selections.items;//得到选择所有行
(4)grid.getSelectionModel().getSelected();//得到选择行的第一行

四、formPanel组件load数据时combo的自动赋值
　　combo有个hiddenName这个属性，这个属性是真正提交的值，在加载的时候你 将这个属性的设置到reader中,就可以自动选择到指定的值了，比如说：hiddenName:'value',那么你的reader中就应该有一个 {name:'value'}.

五、ExtJS 重置表单的方法：
有三种方法能实现form表单的重置，假设var fs=new Ext.form.FormPanel({...});
(1)fs.form.reset();//重置form
(2)fs.getForm().getEl().dom.reset();//重置form
(3)Ext.getCmp('fs').form.reset();
// 添加页头工具栏
var gridHead = grid.getView().getHeaderPanel(true);
var tbHead = new Ext.Toolbar(gridHead);
// 在页头工具栏右侧添加按钮
Ext.get(Ext.get(tbHead.addSpacer().getEl()).dom.parentNode).setStyle('width','100%');
tbHead.addButton(...);
// 页头双工具栏
var tbar2container = Ext.DomHelper.append(tbHead.el,{tag:'div',id:Ext.id()},true);
var tbar2 = new Ext.Toolbar(tbar2container);
tbar2.add("Second row:",{text:"Button 3"},'-',{text:"button 4"});
Extjs中的两个小技巧
首先要说的是一个BUG，其实，严格来说不算是一个真正意义上的BUG。当我们在FormPanel里面添加items的元素的时候，多数人会直接new，比如这样。
                             items : [new Ext.form.TextField({
                                                fieldLabel : '姓名',
                                                anchor : '100%',
                                               name : 'student.name'
                                    })]
        有时候这个输入框或者下拉框在外面需要使用，我们就必须将它定义到外面来，items[cfg.owner.txtName]就是这样了，这个时候，我们 就会遇到这个BUG，如果你的这个FormPanel是放在window上，是通过点击按钮new出来一个window来实现，BUG就出现了，我关闭掉 这个window，然后再点击按钮的话，就不会出现window了。原因是txtName是定义在外面的，类似于一个全局的变量，当关闭window的时 候，就将这个全局的变量关掉了，再打开就不可以了，在items里面new的话，每次打开都会new一个全新的对象，也就不会碰到这样的问题了。如果输入 框或者下拉框在外面需要使用的话，可以给他们添加一个id属性，通过Ext.getCmp(‘id’)来获得这个控件。
       Extjs的combobox功能很强大，接下来，就是用它来模仿一个百度的功能。
             ExtJS小技巧（一） - adyhpq - adyhpq的个人主页
       百度能输入英文从而来获取中文提示，现在要做的就是用Extjs的combobox来做这个。在数据库中有这样一张表。
                ExtJS小技巧（一） - adyhpq - adyhpq的个人主页
      
       前台的Extjs没有什么特别要地方，要注意的就是combobox中的minChars属性，它指的是输入几个字符的时候combobox自动完成，从 上面的表中可以看出，我们可以设置为1，也可以设置为2。接下来就是后台的事情了，首先必须知道，combobox传送字符串的键（查Ext的API可以 知道是"query"），从而获得输入的值。
                      String pinyin = request.getParameter("query");
                      List gradeList;
                      if(null == pinyin || ("").equals(pinyin)){
                                gradeList = gradeService.selectAll();
                      }else{
                                gradeList = gradeService.selectByPinYin(pinyin);
                      }
                      request.setAttribute("gradeList", gradeList);
                      return mapping.findForward("gradeXml");
                ExtJS小技巧（一） - adyhpq - adyhpq的个人主页
        这样我们就实现了这个功能。还有一点要说的，如果数据库中有大量的中文，我们不可能给每条数据添加拼音缩写，这个时候就可以使用java的第三方包pinyin4j-2.5.0.jar来实现中文转成拼音。
extjs-grid
1)表格在进入下一层的时候无法高亮显示的解决办法
grid中,deferRowRender:false     //渲染行高亮显示

2)grid,checkbox
this.ssm = new Ext.grid.CheckboxSelectionModel();
this.ssm.handleMouseDown = Ext.emptyFn;//这个方法可以在点击行的时候不会选择checkbox,点击checkbox的时候不会选择行,然后再增加rowclick事件

3)grid,column,hide
隐藏:grid.getColumnModel().setHidden( 列索引, true);
显示: grid.getColumnModel().setHidden( 列索引, false);