EXT综合布局
Ext.onReady(function(){
Ext.QuickTips.init();
//新建用户下拉列表。
var user_combobox = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
id: 'log_combobox',
//hiddenName: 'parent_group',
readOnly: true,
editable:false, //禁止手写及联想功能
fieldLabel: '请选择用户',
emptyText: '请选择要查询的用户',
blankText: '请选择要查询的用户',
allowBlank: true,
validateOnBlur: true,
mode: 'local',
triggerAction: 'all',
anchor: '90%',
tpl: '<div id="user_group_tree" style="height:200px"></div>',
resizable: true
});
//下拉列表树形结构
var user_tree = new Ext.tree.TreePanel({
border:false,
autoScroll:true,
animate:true,
autoWidth:true,
autoHeight:true,
enableDD:false,
containerScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl:'tree/tree_json.php',
baseAttrs: {uiProvider: Ext.tree.TreeCheckNodeUI } //加载继承组件 checkbox
})
});
user_combobox.on("expand",checkComboxAction,this);
function checkComboxAction(){
user_tree.root.reload();
}
user_tree.on("check",function(node,checked)
{
//alert(user_tree.getChecked('id'));
var selectedId = user_tree.getChecked('id');
Ext.get('selected_user').dom.value = user_tree.getChecked('id')
if(selectedId==''){
user_combobox.setValue('');
}else{
user_combobox.setValue('用户已选定'+user_tree.getChecked('id'));
}
});
var user_root = new Ext.tree.AsyncTreeNode({
text: 'XX软件公司', //节点名称
draggable:false,
icon:'images/icon/org.gif', //是否支持拖动
id:'asindata' //节点id
});
user_tree.setRootNode(user_root);
//展开option时生成树
user_combobox.on('expand',function(){
user_tree.render('user_group_tree');
user_tree.expandAll();//自动展开树
});
var event_store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'module/log/event_store.php'}),
reader: new Ext.data.ArrayReader({}, [
{name: 'value'},
{name: 'text'}
])
});
event_store.load();
var event_combobox = new Ext.form.ComboBox({
store: event_store,
id:'event_combobox',
fieldLabel:'请选择事件',
//emptyText: '请选择事件类型',
hiddenName: 'event',
mode: 'remote',
anchor: '90%',
triggerAction: 'all',
valueField: 'value',
displayField: 'text'
});
/*
event_combobox.on('blur',function(){
alert(this.el.dom.value);
this.setValue(this.el.dom.value);
alert(this.getValue());
});
event_combobox.on("expand",eventComboxAction,this);
function eventComboxAction(){
event_store.reload();
}*/
var startDate = new Ext.form.DateField({
id : 'start_date',
name:'start_date',
anchor: '90%',
fieldLabel:'开始时间',
readOnly : true,
format : 'Y-m-d',
allowBlank : true
});
var endDate = new Ext.form.DateField({
id : 'end_date',
fieldLabel:'结束时间',
anchor: '90%',
name:'end_date',
readOnly : true,
format : 'Y-m-d',
allowBlank : true
});
/**************** the form button ****************/
var submitButton = new Ext.Button({
type:'submit',
text:'查询',
iconCls:'search',
handler:function(){
/* Ext.MessageBox.show({title:'请稍等',msg:'正在提交数据...',
progressText: '',width:300,progress:true,closable:false,animEl:'loding'
});
var f = function(v){return function(){var i = v/11;
Ext.MessageBox.updateProgress(i, '');};
};
for(var i = 1; i < 13; i++){setTimeout(f(i), i*150);}*/
//获取数据给baseParams
var users = Ext.get('selected_user').dom.value;
var s_date = Ext.get('start_date').dom.value;
var e_date = Ext.get('end_date').dom.value;
var s_event = Ext.get('event_combobox').getValue();
var key = Ext.get('keywords').dom.value;
log_ds.baseParams = {selected_user:users,start_date:s_date,end_date:e_date,event:s_event,keywords:key};
log_ds.reload();
//Ext.MessageBox.hide();
}
});
var exportButton = new Ext.Button({
text:'导出',
iconCls:'export',
handler:function(){
var users = Ext.get('selected_user').dom.value;
var s_date = Ext.get('start_date').dom.value;
var e_date = Ext.get('end_date').dom.value;
var s_event = Ext.get('event_combobox').getValue();
var key = Ext.get('keywords').dom.value;
var param = '?selected_user='+users+'&start_date='+s_date+'&end_date='+e_date+'&keywords='+key+'&event='+s_event;
//alert(param);
window.parent.Ext.example.msg('成功导出','文件已经成功生成');
window.location ="module/log/export/export_excel.php"+param;
}
});
var pigeonholeButton = new Ext.Button({
text:'归档',
iconCls:'backup',
handler:function(){
alert('导出');
}
});
/********* 按钮栏 *********/
var toolBar = new Ext.Toolbar({
items:[
submitButton,exportButton,pigeonholeButton
]
});
//日志信息
var check_select = new Ext.grid.CheckboxSelectionModel();
//日志数据来源
var log_ds = new Ext.data.Store({
id: 'log_datasource',
baseParams: {selected_user:'',start_date:'',end_date:'',event:'',keywords:''},
proxy: new Ext.data.HttpProxy({url:'module/log/log_grid.php'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'ip_addr'},
{name: 'log_content'},
{name: 'log_date'},
{name: 'file_path'},
{name: 'event'}
])
});
//分页工具栏
var pageToolBar = new Ext.PagingToolbar({
//region:'south',
pageSize: 10,
store: log_ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
check_select,
{header:'ID',dataIndex:'id',width:40,sortable:true},
{header:'机器IP',dataIndex:'ip_addr',width:100,sortable:true},
{header:'日志内容',dataIndex:'log_content',width:150,sortable:true},
{header:'具体时间',dataIndex:'log_date',width:140,sortable:true},
{header:'文件路径',dataIndex:'file_path',width:250,sortable:true,renderer:function(value){
if(value==''){
return "<span style='color:red;text-align:center;'>未绑定</span>";
}else{
return "<span style='text-align:center;'>"+value+"</span>";
}
}},
{header:'事件类型',dataIndex:'event',width:60,sortable:true,renderer:function(value){
if(value=='fileoperate'){
return "文件XX";
}else if(value=='encrypt'){
return "文件XX";
}else if(value=='decrypt'){
return "文件XX";
}else if(value=='print'){
return "文档打印";
}else if(value=='audit'){
return "文件XX";
}else if(value=='policy'){
return "XXXX";
}else if(value=='system'){
return "系统日志";
}
}}
]);
var log_grid = new Ext.grid.GridPanel({
height: 205,
//autoHeight:true,
autoScroll:true,
ds: log_ds,
cm: cm,
sm: check_select
});
log_ds.load({params:{start:0,limit:10}});
var conditionPanel = new Ext.form.FormPanel({
height:550,
labelAlign: 'right',
labelWidth: 80,
title: '日志查询选项',
frame:true,
//width: 450,
url: 'module/log/log_grid.php',
items: [{
layout:'column',
items: [{
columnWidth:.5,
layout: 'form',
xtype: 'fieldset',
title: '人员/事件 选择',
autoHeight: true,
//defaultType: 'textfield',
items:[user_combobox,event_combobox,
new Ext.form.Hidden({ //hidden
id:'selected_user',
name:'selected_user'
})
]
},{
columnWidth:.5,
layout: 'form',
xtype: 'fieldset',
style: 'margin-left: 20px;',
title: '时间选择',
autoHeight: true,
items:[startDate,endDate]
}]
},{
layout:'column',
items: [{
columnWidth:.5,
layout: 'form',
xtype: 'fieldset',
title: '关键字',
autoHeight: true,
defaultType: 'textfield',
items:[
{
fieldLabel: '请输入关键字',
id:'keywords',
anchor: '90%',
name: 'keywords',
maxLength: 20,
maxLengthText: '最多输入20个字符'
}
]
},{
columnWidth:.5,
xtype: 'fieldset',
style: 'margin-left: 20px;',
title: '操作选项',
autoHeight: true,
items:[toolBar]
}]
},{
layout: 'form',
xtype:'fieldset',
title:'查询结果',
style:'padding:0px;margin-top:5px;',
autoHeight:true,
autoWidth:true,
items:[log_grid,pageToolBar]
}
]
});
var main_panel = new Ext.Viewport({
//title:'日志维护主面板',
renderTo:'log_manage_div',
layout:'border',
items:[
new Ext.Panel({
region:'center',
bodyStyle:'padding:10px;',
height:300,
layout:'fit',
items:[conditionPanel]
})
]
});
/****loading remove ******/
setTimeout(
function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250
);
});
布局效果如下：
