extjs技巧

extjs Ext.form.ComboBox 的设置默认值的问题

Ext.onReady(function(){ 
var dbConnectionRecord = Ext.data.Record.create([ 
    {name: 'dbConnectionKey',type:"string",mapping:"dbConnectionKey"}, 
    {name: 'name',type:"string",mapping:"name"} 
]); 
var dataProxy=new Ext.data.HttpProxy({url:"<%=basePath%>getDBConnection.action"}); 
var theReader=new Ext.data.JsonReader({totalProperty: 'totalProperty',root:'root',id:"ecname"},dbConnectionRecord); 
var dbstore=new Ext.data.Store({proxy:dataProxy,reader:theReader}); 
dbstore.load(); 
var dbcombo = new Ext.form.ComboBox({ 
id:'dbCombo', 
renderTo:Ext.getBody(), 
    store: dbstore, 
    valueField:'dbConnectionKey', 
   displayField:'name', 
    typeAhead: true, 
    emptyText:'请选择', 
    readOnly : true, 
    mode: 'local', 
    name:"dbkey", 
    hiddenName:'dbkey', 
    editable: false, 
    triggerAction: 'all', 
    selectOnFocus:true 
}); 
dbcombo.setValue("4"); 肯定不行，参见后面的代码

});

实现：
写在store load的callback里

dbstore.load({ 
    callback : function(records) { 
    dbcombo.setValue("4"); 
    } 
    });
//在分页组件前面添加组件 
var page = new Ext.PagingToolbar({ 
store: store, 
displayInfo: true, 
pageSize: 10 
}); 
page.insert(0, '-'); 
page.insert(0, { //添加一个日期组件 
xtype: 'datefield', 
name: 'chatdate', 
format: 'Y-m-d', 
value: new Date() 
}); 
//树节点(TreeNode)图标动态修改 2009-11-22 15:36:52 
var ui = node.getUI(); 
ui.removeClass('x-tree-node-leaf'); //去掉之前的根节点样式 
ui.addClass('x-tree-node-expanded'); //设定已展开文件夹样式 
//ui.addClass('x-tree-node-collapsed');//设定合并的文件夹样式

使用Ext.Ajaxt对象完成异步请求的交互，Ext.Ajax是单实例对象（非常重要，全局单一Ext.Ajax实例！）。
注册Ext.Ajax的requestcomplete事件，每个ajax请求成功后首先响应该事件。在该事件的回调函数里面判断
访问请求是否超时。使用Ext.Ajax对象的好处是，只需要引入一个包含了几行超时处理代码的js文件，就可以
为当前应用增加超时处理功能，原有代码不需要做任何修改。

使用Ext.Ajaxt对象完成异步请求交互，假如checkUserSessionStatus是你的回调方法，每个页面引用：

Js代码
Ext.Ajax.on(‘requestcomplete’,checkUserSessionStatus, this);
function checkUserSessionStatus(conn,response,options){
//Ext重新封装了response对象
if(typeof response.getResponseHeader.sessionstatus != ‘undefined’){
//发现请求超时，退出处理代码…
}
}
Ext.Ajax.on(‘requestcomplete’,checkUserSessionStatus, this);
function checkUserSessionStatus(conn,response,options){
//Ext重新封装了response对象 if(typeof response.getResponseHeader.sessionstatus != ‘undefined’){
//发现请求超时，退出处理代码…
}
}

可以利用的几个特性：
a）所有的ajax请求均带有x-requested-with:XMLHttpRequest头信息
b）Ext.Ajax是单实例对象（非常重要，全局单一Ext.Ajax实例！）
c）注册Ext.Ajax的requestcomplete事件，每个ajax请求成功后首先响应该事件（概念类似spring的aop拦截）。

对于其他的ajax框架，解决用户访问请求超时这个问题的思路是类似的。

二、如何设置DateField的默认值。

设置DateField的默认值，可以直接给value属性赋值，如：value: ‘01/01/2009’，如果要设置默认值为当天的日期，可以如下设置：value: new Date

new Ext.form.DateField({
    id: 'df',
    fieldLabel: '日期',
    format: 'Y年m月d日',
    width: 150,
    //value: '01/01/2009'
    value: new Date
})

如何禁用或者启用某个菜单
有的时候，有时会根据需要，启用或者禁用某个菜单项，在ExtJS中，可以通过如下的操作进行。

Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
    Ext.QuickTips.init();
    var tb = new Ext.Toolbar({
        applyTo: 'tb',
        width: 400
    });
    var styleMenu = new Ext.menu.Menu({
        items: [{
            text: '主题选择',
            id: 'style',
            menu: new Ext.menu.Menu({
                items: [{
                    text: '红色主题',
                    checked: true,
                    group: 'theme'
                }, {
                    text: '蓝色主题',
                    checked: false,
                    group: 'theme'
                }, {
                    text: '黑色主题',
                    checked: false,
                    group: 'theme'
                }]
            })
        }, {
            text: '启用主题',
            checked: true,
            checkHandler: function() { Ext.getCmp('style').setDisabled(!this.checked) }
        }]
    });
    tb.add({ text: '主题', menu: styleMenu });
});

一、从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();