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

1 new Ext.form.DateField({
2 id: 'df',
3 fieldLabel: '日期',
4 format: 'Y年m月d日',
5 width: 150,
6 //value: '01/01/2009'
7 value: new Date
8 })
如何禁用或者启用某个菜单
有的时候，有时会根据需要，启用或者禁用某个菜单项，在ExtJS中，可以通过如下的操作进行。





1 Ext.onReady(function() {
2 Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
3 Ext.QuickTips.init();
4 var tb = new Ext.Toolbar({
5 applyTo: 'tb',
6 width: 400
7 });
8 var styleMenu = new Ext.menu.Menu({
9 items: [{
10 text: '主题选择',
11 id: 'style',
12 menu: new Ext.menu.Menu({
13 items: [{
14 text: '红色主题',
15 checked: true,
16 group: 'theme'
17 }, {
18 text: '蓝色主题',
19 checked: false,
20 group: 'theme'
21 }, {
22 text: '黑色主题',
23 checked: false,
24 group: 'theme'
25 }]
26 })
27 }, {
28 text: '启用主题',
29 checked: true,
30 checkHandler: function() { Ext.getCmp('style').setDisabled(!this.checked) }
31 }]
32 });
33 tb.add({ text: '主题', menu: styleMenu });
34 });
一、从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'}.

 

traceofsun 2010-07-26 14:08:33

8楼   

Grid 加入一个序号列

cm = new Ext.grid.ColumnModel([
////////////序号列
new　Ext.grid.RowNumberer({
header　:　"序号",
width　:　40,
renderer:function(value,metadata,record,rowIndex){
return　　1　+　rowIndex;
}
}),　
{
header: "货物编号",
dataIndex: 'CARGONO',
width: 100
},
{
header: "货物名称",
width: 150,
sortable: true,
dataIndex: 'CARGONAME'
},

traceofsun 2010-07-27 08:53:06

9楼   

Extjs Panel 上放子Panel实例
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/images/s.gif';
//Ext.chart.Chart.CHART_URL = '/js/extjs/3.0/resources/charts.swf';
Ext.QuickTips.init();
var p2 = new Ext.Panel({
autoShow: true, html:'zzz',title:'zzz',id:'zzz'
})
var p = new Ext.Panel({
title:'Test',
height:300,
width:600,
renderTo:Ext.getBody(),
layout:'accordion',
layoutConfig:{
animate:false,
activeOnTop: false,
fill:true
},
items:[
{xtype:'panel',html:'xxx',title:'xxx'},
{xtype:'panel',html:'yyy',title:'yyy'}
],
buttons:[
{
text:'add',
handler:function(){
p.add(p2);
p.doLayout();
}
},{
text:'remove',
handler:function(){
p.remove(p2,false);
p.doLayout();
}
}
]
})
});

traceofsun 2010-07-27 08:54:35

10楼   

Extjs Panel的使用：
var panel = new Ext.Panel({
title : "面板",
renderTo:"testPanel"//Panel的外层容器一般是DIV或SPAN的
id : "testPanel"
collapsible : true,// 可收缩
collapsed:false,//收缩的
width : 500,
height : 200,
autoScroll : true,// 自动卷轴
frame:true,//渲染框架
border : true,//边框
margins : '0 0 0 0',//边缘
split : true,// 分割条面板组合是经常用到
minHeight : 100,// 最小高度
autoHeight : true,//自动高度以下参数用于Panel的各个部位工具栏
tools : [{// 标题栏按钮
/*
* id常用参数表//已经定义好的按钮id * - toggle
* - close
* - minimize
* - maximize
* - refresh
* - minus
* - plus - help - search - save - print */
id : "refresh",
qtip : 'Refresh form Data',// 快速提示// hidden : true,
handler : function(event, toolEl, panel) {
// close logic }
}],// 标题栏按钮
tbar : [//工具条按钮
{
/* xtype参数用与匿名类创建(非常重要)
-tbfill填充空白
-tbseparator分割线
-tbtext文本说明
*/
xtype : 'tbtext',
text : '工具条'
},{//不指定xtype属性则默认为按钮(Button)
pressed : true,
text : '删除'
}],//工具条按钮
bbar : [//底部工具条
{
/* xtype常用参数
* -tbfill//填充空白
* -tbseparator//分割线
* -tbtext//文本说明
*/
xtype : 'tbtext',
text : '底部工具'
},{//不指定xtype属性是默认为按钮

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");
    }
    });

回帖列表

回帖(15) | 浏览(35)

traceofsun 2010-07-27 10:41:48

11楼   

1、确保[{
xtype:'textarea',
id:'steno_subText',
width:300 }的textarea被创建了


2、
在a之前
加上这句
Ext.ComponentMgr.all.each(function(r){alert(r.id)});


Ext.getCmp("控件ID").setValue('1');

traceofsun 2010-07-27 22:31:30

12楼   

Ext ContentPanel中javascript函数的执行问题2007-08-02 09:33方法1：
ContentPanel.setUrl({url: Rt+'/jsp/formAndResult/511Form.jsp', scripts: true, text: '正在加载...'});
contentPanel.refresh();
方法2：
ContentPanel.load({url: Rt+'/jsp/formAndResult/511Form.jsp', scripts: true, text: '正在加载...'});
没有认真看API的，找了半天才发现的。

----------------------------ContentPanel刷新--------------------------------------------------------------

traceofsun 2010-08-03 21:12:40

13楼   

Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox,{
editable : false,
displayField : 'theme',
valueField : 'css',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
selectOnFocus : true,
initComponent : function(){
//定义主题名和主题样式的对应关系
var themes = [
['默认','ext-all.css'],
['深蓝心情','xtheme-slate.css'],
['灰色回忆','xtheme-gray-extend.css'],
['银色勾红','xtheme-silverCherry.css'],
['黑色水晶','xtheme-slickness2.css'],
['靛蓝情怀','xtheme-indigo.css'],
['黑色物语','xtheme-black.css']
];
this.store = new Ext.data.SimpleStore({
fields : ['theme','css'],
data : themes
});
this.value = '默认';
},
initEvents : function(){
//初始化事件
this.on('collapse',function(){//绑定组合框下拉列表的收缩事件
Ext.util.CSS.swapStyleSheet('theme','extlib/resources/css/'+this.getValue());//切换样式表
});
}
});

在下拉列表中加入一个默认的字段，修改该列表的load事件：
listeners : {
beforeload : function(ds, option) {
var para = {
tableName : 'SD_ENUM',
queryColumns : 'ENUM_VALUE',
returnColumns : 'ENUM_KEY,ENUM_VALUE',
conds : 'ENUM_ATTR='' + ds.enumAttr + '''
};
Ext.apply(para, ds.baseParams);
Ext.apply(para, option.params);
option.params.para = "[" + Ext.encode(para) + "]";
},
load : function(ds, records, options) {
var rd = Ext.data.Record.create([{
name : 'id'
}, {
name : 'name'
}]);
var oo = new rd({
'id' : null,
'name' : '<--空-->'
});
ds.insert(ds.getCount(), oo);
records.push(oo);
}
},

store排序：加入属*，
sortInfo : {
field : "id",
direction : "ASC"
}

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