ExtJs常用代码片段
ExtJs常用代码片段一、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();
}
});
二、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'//显示的字段
});
三、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'
}
]
}
四、grid添加单元格悬浮显示内容
{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;
}
}
五、树节点右键菜单
1、建立菜单Menu
var materialMenu = new Ext.menu.Menu({
items : [
{text : "增加",
id : 'add',
handler : function() {}
},
{ text : "修改",
id : 'update',
handler : function() {}
},
{text : "删除",
id : 'delete',
handler : function() {}
}]
});
2、为树添加监听器
listeners : {
'contextmenu' : function(node, event) {
materialMenu.showAt(event.getPoint());
}
}
六、grid隔行变色
1、自定义一个CSS <style type="text/css"> .my_row_Red table{ background:Red}.my_row_Green table{ background:Green} </style>
2、然后在GridPanel里这样写
viewConfig : {
getRowClass : function(record,rowIndex,rowParams,store){
if(rowIndex%2==0){
return 'my_row_Red';
}else{
return 'my_row_Blue';
}
}
}
七、extjs中grid显示Date类型数据
在定义store的render里增加一行配置,除了设置name以外,还设置了type和dataFormat两个属性。其中type属性会告诉reader在解析原始数据时把对应的列作为日期类型处理,dataFormat属性把得到的字符串转换成相对应的日期格式。按照EXT的约定,Y是年,m是月,d是日,H是小时,i是分钟,s是秒。
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
标签: