`
JACKY&HUA
  • 浏览: 35420 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext 分页总结

EXT 
阅读更多


Ext.onReady(function(){

//var sm = new Ext.grid.CheckboxSelectionModel();

//加载表格数据
var store = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({ 
url:'log!listLog',
method:'post'
}),
reader: new Ext.data.JsonReader({
root:'logPage.logs',
totalProperty:'logPage.totalProperty',

id:'id'
},
[
{name:'logId'},
{name:'logType'},
{name:'username'},
{name:'isAdmin'},
{name:'moduleName'},
{name:'url'},
{name:'actionName'},  
{name:'note'},
{name:'time'}
])
});


//表格列对象
var logColumn = new Ext.grid.ColumnModel([
//sm,
{ header:'编号',
dataIndex:'logId'
},
{
header:'日志类型',
dataIndex:'logType'
},
{
header:'操作人',
dataIndex:'username'
},
{
header:'用户组',
dataIndex:'isAdmin'
},
{
header:'模块名',
dataIndex:'moduleName'
},
{
header:'请求路径',
dataIndex:'url'
},
{
header:'操作',
dataIndex:'actionName'
},
{
header:'备注',
dataIndex:'note'
},
{
header:'时间',
dataIndex:'time'
}
]);
//表格对象
var grid = new Ext.grid.GridPanel({  
                el : 'showLogs',  
                width : 850,  
                height : 300,  
                title : '日志列表',  
                store : store,
                cm : logColumn,
                trackMouseOver : false,
                autoScroll : true,
                loadMask : {msg:'正在加载数据,请稍侯……'},  
                bbar : new Ext.PagingToolbar({  
                    pageSize : 25,  
                    store : store,
                    displayInfo : true,
                    displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
                    emptyMsg : '没有记录'
                })
            });
        
         grid.render();
        
        
         //部门下拉
         var departmentCombo = new Ext.form.ComboBox({
         id : 'departmentCombo',
xtype : 'combo',
hiddenName : 'departId',
width : 100,
readOnly : true,
//装载日志类型数据
store : new Ext.data.JsonStore({
url : "department!listAllDepartment",
method : "post",
fields : ['id','name'],
root : 'departments'
}),
valueField :'id',
    displayField :'name',
    typeAhead : true,
    mode : 'remote',
    triggerAction : 'all',
    selectOnFocus : true,
    allowBlank : true
         });
        
         var userStore = new Ext.data.JsonStore({
         url : "user!listUserByDepartment",
method : "post",
fields : ['id','username'],
root : 'users'
         });
        
         departmentCombo.on(
         'select',function(combo,record,index){
         userStore.load({
         params:{departmentId:record.data.id}
         });
         });
        
       
        var userCombo = new Ext.form.ComboBox({
         id : 'userCombo',
xtype : 'combo',
hiddenName : 'userId',
width : 100,
readOnly : true,
store : userStore,
valueField :'id',
    displayField :'username',
    typeAhead : true,
    mode : 'local',
    triggerAction : 'all',
    selectOnFocus : true,
    allowBlank : true
         });
        
         //第一行搜索栏
var searchToolbar1 = new Ext.Toolbar({
id : 'searchToolbar1',
width : 850,
defaultType : 'textfield',
autoHight : true,
items : [
'部门:',departmentCombo,
'用户名:',userCombo,
'日志类型:',
{
id : 'logType',
xtype : 'combo',
hiddenName : 'typeId',
width : 100,
readOnly : true,
emptyText : '请选择...',
//装载日志类型数据
store : new Ext.data.JsonStore({
url : "log!listLogType",
method : "post",
fields : ['logTypeId','typeCode','typeName'],
root : 'logTypes'
}),
valueField : 'logTypeId',
    displayField : 'typeName',
    typeAhead : true,
    mode: 'remote',
    triggerAction : 'all',
    selectOnFocus : true,
    allowBlank : true
},
'模块',
{
fieldLabel:'模块',
name:'module',
xtype:'textfield',
width:100
},
'操作',
{
id:'actionComob',
xtype:'combo',
hiddenName:'actionId',
width:100,
readOnly : true,
emptyText:'请选择...',
//装载日志类型数据
store:new Ext.data.JsonStore({
url:"log!listActions",
method:"post",
fields:['id','code','name'],
root:'logUserActions'
}),
valueField:'id',
    displayField:'name',
    typeAhead: true,
    mode: 'remote',
    triggerAction: 'all',
    selectOnFocus:true,
    allowBlank:true
}
]
});

var searchBtn = new Ext.Button({
text: '查询',
handler:onclickSearchLogBtn
});

var resetBtn = new Ext.Button({
text : '重置条件',
handler:onclickResetBtn
});

var isAdminCombo = new Ext.form.ComboBox({
id:'isAdmin',
xtype:'combo',
hiddenName:'adminId',
readOnly : true,
width:100,
store:new Ext.data.SimpleStore({
fields: ['id', 'text'],
       data : [['1','是'],['2','否']]
}),
valueField:'id',
    displayField:'text',
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all',
    selectOnFocus:true,
    allowBlank:true
})
//切换是否为管理员时绑定监听
isAdminCombo.on('select',function(combo,record,index){
var userCombo = Ext.getCmp('userCombo');
if(record.data.id == 1){
//userCombo.clear();
userStore.load({
         params:{departmentId:record.data.id,isAdmin:1}
         });
         var departCombo = Ext.getCmp('departmentCombo');
         departCombo.setValue('');
         departCombo.disabled = true;
}else{
var departCombo = Ext.getCmp('departmentCombo');
userStore.removeAll();
departCombo.disabled = false;
}
})

//
var searchToolbar2 = new Ext.Toolbar({
id : 'searchToolbar2',
width:850,
defaultType: 'textfield',
autoHight:true,
items:[
'是否为管理员:',isAdminCombo,
'起始日期:',
{
xtype: 'datefield',
name:'beginDate',
width:100,
format:'Y-m-d'
},
'终止日期:',
{
xtype: 'datefield',
name:'endDate',
width:100,
format:'Y-m-d'
},
searchBtn,

resetBtn
]
});

var searchPanel = new Ext.Panel({
renderTo : 'search-pl',
border:false,
tbar : searchToolbar1,
listeners : {
'render': function(){
searchToolbar2.render(this.tbar);
}
}
});

function onclickSearchLogBtn(){
store.reload(
{params:{start:0,limit:25}}
);
}

function buildParams(){
var username = Ext.fly('userCombo').dom.value;
var logType = Ext.fly('typeId').dom.value;
var module = Ext.fly('module').dom.value;
var action = Ext.fly('actionId').dom.value;
var isAdmin = Ext.fly('adminId').dom.value;
var beginDate = Ext.fly('beginDate').dom.value;
var endDate = Ext.fly('endDate').dom.value;
var departmentId = Ext.fly('departId').dom.value;

var vparams = {
params:{
'logQuery.module' : module,
'logQuery.departmentId' : departmentId,
'logQuery.username' : username,
'logQuery.logTypeId' : logType,
'logQuery.actionId' : action,
'logQuery.isAdmin' : isAdmin,
'logQuery.beginDate' : beginDate,
'logQuery.endDate' : endDate
}
};
return vparams;
}

//清空查询条件
function onclickResetBtn(){
Ext.getCmp('userCombo').setValue('');
Ext.getCmp('logType').setValue('');
Ext.getCmp('departmentCombo').setValue('');
Ext.getCmp('actionComob').setValue('');
Ext.getCmp('isAdmin').setValue('');

Ext.fly('typeId').dom.value = '';
Ext.fly('module').dom.value = '';
Ext.fly('actionId').dom.value = '';
Ext.fly('adminId').dom.value = '';
Ext.fly('beginDate').dom.value = '';
Ext.fly('endDate').dom.value = '';
}

store.on('beforeLoad',function(){
var username = Ext.fly('userCombo').dom.value;
var logType = Ext.fly('typeId').dom.value;
var module = Ext.fly('module').dom.value;
var action = Ext.fly('actionId').dom.value;
var isAdmin = Ext.fly('adminId').dom.value;
var beginDate = Ext.fly('beginDate').dom.value;
var endDate = Ext.fly('endDate').dom.value;
var departmentId = Ext.fly('departId').dom.value;

Ext.apply(store.baseParams,
{'logQuery.module' : module,
'logQuery.departmentId' : departmentId,
'logQuery.username' : username,
'logQuery.logTypeId' : logType,
'logQuery.actionId' : action,
'logQuery.isAdmin' : isAdmin,
'logQuery.beginDate' : beginDate,
'logQuery.endDate' : endDate}
);
})
store.load({params:{start:0,limit:25}});
})
分享到:
评论

相关推荐

    Ext分页排序 Ext分页排序

    总结,Ext分页排序是提高Web应用数据管理效率的关键特性。正确配置`Store`、`proxy`和分页工具栏,可以为用户提供流畅的数据浏览和排序体验,同时优化服务器资源的利用。在实际项目中,根据数据量和性能需求,选择...

    EXT 分页,树形结构案列

    EXT分页主要是为了处理大数据集,提高网页加载速度和用户体验。它通过与服务器进行交互,每次只请求和显示一部分数据,而不是一次性加载所有数据。这降低了对服务器资源的需求,并减少了网络传输的数据量。 1. 分页...

    Ext 分页核心代码

    总结,Ext分页的核心在于`Store`的配置、`pagingToolbar`的使用以及数据请求和解析。理解这些关键概念后,你可以根据项目需求定制分页功能,提供流畅的用户体验。在实践中,不断调试和优化,将使你的分页功能更加...

    ext grid json分页显示

    总结来说,"ext grid json分页显示"是通过EXT.js的Grid组件结合DWR的Ajax能力,实现前端数据的分页加载和显示。这种方式既提高了用户界面的响应速度,又有效管理了大数据量的显示,是现代Web应用中常用的数据展示...

    简单的小例子Ext+servlet 分页

    总结来说,本示例通过Ext JS的Grid组件实现了前端的分页展示,同时利用Servlet在后台处理数据分页逻辑,两者配合实现了完整的前后端分页功能。这种分页方式在实际项目中非常常见,有效提高了用户体验,减轻了服务器...

    Ext实现分页查询,前台

    总结来说,这个示例展示了如何使用Ext.js实现前端的分页查询功能。核心步骤包括: 1. 创建`Store`对象,定义数据源、字段映射和数据读取器。 2. 添加事件监听器,对数据进行预处理。 3. 使用`load`方法加载数据,...

    Ext_Js分页显示案例详解

    ### Ext_Js分页显示案例详解 #### 一、引言 在Web开发领域,Ext_Js(简称ExtJS)是一种强大的JavaScript库,用于构建复杂的客户端应用。它提供了一套丰富的UI组件,使得开发者能够轻松地创建美观且功能强大的用户...

    分页EXT分页EXT

    EXTJS中的分页组件称为`Ext.picker.Paging`或`Ext.toolbar.Paging`,它通常与`Ext.grid.Panel`(表格组件)一起使用,以处理大量数据。分页工具栏包含上一页、下一页、跳转到指定页和显示每页条目数量的选项。 3. ...

    Ext2.2.GridPanel分页处理+dwrproxy(js对象和json两种数据)

    总结一下,本话题介绍了如何在Ext2.2的GridPanel中实现分页处理,利用DWRProxy与后台进行数据交互。无论数据是以JS对象还是JSON格式传输,关键在于理解数据流的过程,并正确配置相关的Store、Reader和DWR方法。通过...

    Ext Grid +dwr 列表展示展示带分页

    总结,本示例展示了如何使用Ext Grid和DWR结合实现一个具有分页功能的列表展示。通过这种方式,我们可以在不依赖数据库的情况下,利用XML文件中的数据,为用户提供交互式的浏览体验。这种技术对于处理大量数据、优化...

    Ext + dwr 实现分页功能

    ### Ext + DWR 实现分页功能 #### 一、引言 在Web开发中,分页是一项常用的功能,尤其当数据量较大时,合理的分页处理不仅能提升用户体验,还能减轻服务器的压力。本文将详细介绍如何利用Ext框架结合DWR(Direct ...

    ExtJs分页

    总结来说,ExtJS分页是通过前端和后端的协同工作实现的,前端通过ExtJS的Grid和Store组件呈现和管理分页数据,而后端则使用如Spring MVC和SQL Server 2008这样的技术处理分页查询。理解并熟练掌握这些技术对于构建...

    Ext中对于多种store数据分页实现示例

    总结来说,EXT JS中的数据分页是一个灵活且功能强大的特性,可以根据项目需求选择合适的分页方式。无论是服务器端分页还是客户端分页,EXT JS都提供了完善的API和组件支持,使得开发者能够轻松地处理大量数据的展示...

    Ext-Js分页示例代码详解.pdf

    总结起来,EXT JS的分页功能涉及前端的Store、Grid Panel和Pager组件,以及后端的数据处理Action。前端通过HTTP请求与后端通信,后端依据请求参数生成并返回分页数据。在实际项目中,为了优化性能,通常会配合缓存...

    extJs之分页控件

    总结来说,ExtJS中的分页控件是一个强大的功能,它可以帮助我们有效地管理和展示大量数据。"ux.Andrie.pPageSize"这样的自定义插件则为分页功能增加了更多灵活性,使得用户可以根据自身需求调整每页的记录数。通过...

    Ext性能优化总结

    ### Ext性能优化总结 在多年的Ext项目开发过程中,积累了丰富的经验与技巧,下面将这些关键的知识点进行详细的阐述,希望能为同行提供有价值的参考。 #### 一、架构优化:One Page One Application模式 在传统的...

    Ext解决题目(内存分页+导出Excel).rar

    总结来说,这个压缩包文件提供的示例可能是一个全面的解决方案,涵盖了前端数据展示、分页以及与后端服务的交互,同时具备数据导出功能,对于学习和理解如何在实际项目中集成Ext.js和其他技术具有很高的参考价值。

    ext grid网格控件实例

    总结起来,EXT Grid网格控件提供了强大的数据展示和管理功能,支持多种数据源,结合JSP和其他J2EE框架,可以构建出高效、动态的Web应用。掌握EXT Grid的使用,对于提升Web应用的用户体验和开发效率有着显著的帮助。

    Ext-实现带查询以及分页的列表

    总结来说,EXTJS实现带查询和分页的列表主要涉及以下几个步骤: 1. 创建数据存储(Store),配置URL和Reader。 2. 定义网格面板(GridPanel),包括列配置和数据源。 3. 添加分页工具栏(PagingToolbar),与Store...

    ext UI效果模板

    总结来说,EXT UI效果模板是EXT 3.2.0版本的一个全面的前端界面解决方案,它包含了一系列预设的、易于定制的组件和布局,可以帮助开发者快速构建功能丰富、用户体验优良的Web应用。无论你是要创建一个新的项目,还是...

Global site tag (gtag.js) - Google Analytics