1、grid加载时候选择一行或全选:
为stroe添加load事件,调用sm的selectAll方法
store.on("load",function(store) {sm.selectAll();});
选择一行或多行和以调用selectRow、selectRows或selectRecords等方法,在api中有详细介绍。
2、Extjs 中调用Ajax
Ext.Ajax.request({url:'xxx.action',
method:'post',
params:{equipmentId: equipmentId,agentIds: agentIds},
success:function(response,config){
var json = Ext.util.JSON.decode(response.responseText);
Ext.Msg.alert("提示信息",json.msg);
store.reload();
},
failure:function(){
Ext.MessageBox.alert("提示信息", "关联失败");
store.reload();
}
});
3、form中的下拉框
var tankType = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'remote',
applyTo :'tankType',
id:'tankType',
disabled:true,
msgTarget : 'side',
width:135,
editable:false,
store: new Ext.data.Store({ //下拉框的数据源
proxy: new Ext.data.HttpProxy({url:'${ctx}/tankfarm/getTankTypes.action'}),
reader: new Ext.data.JsonReader({},[
{name:'type_code'},
{name:'type_name'}
])
}),
valueField: 'type_code',//值字段
displayField: 'type_name'//显示的字段
});
4、form中的单选框
{
xtype: 'radiogroup',
layout: 'table',
width: 100,
id: 'is_main_line',
fieldLabel: '主侧线',
defaultType: 'radio',
border: false,
sFormField: true,
items: [{
name: 'is_main_line',
//这里加入name表示两个radio属于同一个组,形成单选模式,如果不加name或者两个name不一样,则会发生两个都会选择的情况
boxLabel: '是',
xtype: 'radio',
inputValue: '1',//单选框的实际值
checked: true
}, {
name: 'is_main_line',
boxLabel: '否',
xtype: 'radio',
inputValue: '2'
}
]
}
5、editgrid获取修改后的数据:
//得到修改过的Recored的集合
var modified = tankDataStore.modified.slice(0);
//将数据放到另外一个数组中
var jsonArray = [];
Ext.each(modified,function(m){
//m.data中保存的是当前Recored的所有字段的值json,不包含结构信息
jsonArray.push(m.data);
});
6、grid添加单元格悬浮显示内容,方法为在cm中header添加renderer事件,将value完整显示,代码如下:
{header:'名称',width:50,dataIndex:'name',menuDisabled:true,menuDisabled:true,renderer : function(value, metadata, record, rowIndex, columnIndex,store) {
value = value.replace(/</g,'<');
metadata.attr = 'ext:qtip="' + value + '<br/>"';
return value;
}
}
7、分页工具栏
new Ext.PagingToolbar({
pageSize: 25
store: store,
id:'pagger',
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "当前查询条件无数据,请重新查询"
})
8、树节点右键菜单
//首先建立菜单Menu,代码如下:
var materialMenu = new Ext.menu.Menu({
items : [
{text : "增加",
id : 'add',
handler : function() {}
},
{ text : "修改",
id : 'update',
handler : function() {}
},
{text : "删除",
id : 'delete',
handler : function() {}
}]
});
//然后为树添加监听器:
listeners : {
'contextmenu' : function(node, event) {
materialMenu.showAt(event.getPoint());
}
}
这样在树节点上右击就可以弹出菜单了,不过为了不和ie右键冲突,最好是禁用了ie的右键菜单,具体怎么禁用就不详细说明了。
9、grid单元格添加图片和超链接
第一种方法是使用Ext.grid.column.Action 动作列详细可见我的另一篇文章中有介绍
http://www.cnblogs.com/lslvxy/archive/2013/05/26/3099768.html
第二中方法是使用简单的列,并添加renderer函数,在renderer中可以返回一个html标签,类似
return "下载文档",这样表格中就可以显示一个超链接或者按钮等组件。
然后给grid添加单元格点击cellClick事件,
var value= e.getTarget().value;//获取renderer中返回的标签值
//e.getTarget().innerHTML 获取renderer中返回的标签内的文本
record = grid.getStore().getAt(rowIdx);
row = grid.getSelectionModel().getSelected(); //得到选择所有行
var fieldName = grid.getColumnModel().getDataIndex(colIdx); // 获取列名
var data = record.get(fieldName);//这个data就是点击的单元格的数据了,一定有用的
}
10、grid隔行变色(6.21添加)
先自定义一个CSS:
<style type="text/css">.my_row_Red table{ background:Red}
.my_row_Green table{ background:Green}
</style>
然后在GridPanel里这样写:
viewConfig : {
getRowClass : function(record,rowIndex,rowParams,store){
if(rowIndex%2==0){
return 'my_row_Red';
}else{
return 'my_row_Blue';
}
}
}
这样就可以使得表格隔行变色了,在加载的时候就显示不同的颜色了。
--先记录这么多,日后工作再逐渐添加--
宝剑锋从磨砺出,梅花香自苦寒来。