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的三个方法:
1、Ext.getCmp('id');
2、FormPanel.getForm().findField('id/name');
3、Ext.get('id/name');//前提是FormPanel在界面上显示出来了。
二、ExtJS如何给textfield赋值的三个方法:
var value="值";
1、 fs.form.findField(id/name).setValue(value);
2、 Ext.get(id/name).setValue(value);
3、 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();