var gridConfig = {};
var gridId = "statisticsGrid";
var xwidth = 290;
var fwidth = 160;
var treeNoid = "";
var _json= 1;
Ext.onReady(function(){
gridConfig.pagesize = pagesize;
gridConfig.gridId = gridId;
gridConfig.gridCmReaderConfig = [
{show:'uid',tag:'ROWNUM_',hidden:true},
{show:'板块Id',tag:'COLUMN_ID',hidden:true},
{show:'文章名称',tag:'CONTENT_TITEL'},
{show:'所属板块',tag:'COLUMN_NAME'},
{show:'发布时间',tag:'PUBLISH_DATE',renderer:dateFormat},
{show:'浏览量',tag:'VIEWS'}
];
gridConfig.sm = false;
gridConfig.storeURL = basepath+"/admin/statistics/statistic";
gridConfig.baseParams = {_json:_json};
var startTime = {xtype:'datefield',emptyText:'==起始日期==',format :'Y-m-d',id:'startTime' };
var endTime = {xtype:'datefield',emptyText:'==起始日期==',format :'Y-m-d',id:'endTime' };
var contentTitle = {xtype:'textfield',emptyText:'==文章名称==',id:'contentTitle'};
/**********************************************************************************/
//////////////内容栏目树//////////
var loader = new Ext.tree.TreeLoader({
dataUrl:basepath+"/admin/statistics/columntree",
listeners :{
'beforeload':{
fn : function(loader) {
loader.baseParams._json = _json;
},
scope : this
}
}
});
loader.processResponse = function(response, node, callback){
var json = response.responseText;
try {
var json = eval("("+json+")");
var amenu = json["data"];
node.beginUpdate();
var o = makeTreeNode (amenu);
for(var i = 0, len = o.length; i < len; i++){
var n = this.createNode(o[i]);
if(n){
node.appendChild(n);
}
}
node.endUpdate();
if(typeof callback == "function"){
callback(this, node);
}
}catch(e){
this.handleFailure(response);
}
};
var root = new Ext.tree.AsyncTreeNode({expanded:true,id:'0',text:'全部'});
var tree = new Ext.tree.TreePanel({
loader: loader,
id:'tree',
border :false,
editable:true,
rootVisible:true,
root:root,
listeners :{
'click':function(node,e)
{
var title = node.attributes.text;
treeNoid = node.attributes.id;
}
}
});
var treeCombo = new ComboBoxTree({
id:'treeCombo',
allowBlank : true,
width:200,
allowUnLeafClick:true,//只允许选择叶子
treeHeight:200,
emptyText:'请选择栏目',
fieldLabel:'栏目',
tree:tree
});
/********************************************************************************/
gridConfig.tbar=['-',"起始日期:",startTime,'截止日期:',endTime,'文章名称',contentTitle,'-',treeCombo,'-',
{text:'查询',handler:searchFn,iconCls:'searchBtn'},'-',
{text:'重置',handler:reSetFn,iconCls:'reSetBtn'},'-','->'
];
gridConfig.viewConfig = {
forceFit: true,
enableRowBody:true,
showPreview:false
};
var agrid = new basePagingGrid(gridConfig);
var viewport = new Ext.Viewport({
layout:'fit',
listeners:{'afterrender':function(){
}},
items:[agrid]
});
})
/********************************************************************************************/
function makeTreeNode (menus)
{
var mapdata = {};
//第一次组织树节点内容
for(var i=0;i<menus.length;i++)
{
var node = menus[i];
var menuname = node['name'];
var parentNo = node['parentId'];
var aid = node['id'];
mapdata["id_"+aid]= {id:aid,text:menuname,parentNo:parentNo};
}
var ret = [];
for(var key in mapdata)
{
var node = mapdata[key];
var pid = mapdata[key]['parentNo'];
if(mapdata["id_"+pid])
{
if(typeof mapdata["id_"+pid]['children'] == 'undefined')
{
mapdata["id_"+pid]['children'] = [];
}
mapdata["id_"+pid]['children'].push(mapdata[key]);
}else
{
ret.push(mapdata[key]);
}
}
//设置叶子节点,两部分
for(var key in mapdata)
{
var node = mapdata[key];
if (typeof mapdata[key]['children'] == 'undefined')
{
mapdata[key]['leaf'] = true;
}
}
return ret;
}
function searchFn()
{
var startTime = Ext.getCmp("startTime");
var endTime = Ext.getCmp('endTime');
var contentTitle = Ext.getCmp('contentTitle');
var startvalue = "";
var endvalue = "";
if(startTime.getValue().length!=0 &&startTime.validate() )
{
startvalue = startTime.getValue().format('Y-m-d');
}
if(endTime.getValue().length!=0 && endTime.validate())
{
endvalue = endTime.getValue().format('Y-m-d');
}
var grid = Ext.getCmp(gridId);
var obj = grid.store.baseParams?grid.store.baseParams:{};
obj.startTime=startvalue;
obj.endTime = endvalue;
obj.contentTitle =contentTitle.getValue();
obj.columnId = treeNoid;
grid.store.baseParams = obj;
grid.store.load({params : {start : 0,limit : pagesize }});
}
function dateFormat(v, cellmeta, record, rowIndex, columnIndex, store)
{
if(!v)return "";
else
{
return new Date(v).format("Y-m-d")
}
}
function reSetFn()
{
Ext.getCmp('startTime').reset();
Ext.getCmp('endTime').reset();
Ext.getCmp('contentTitle').reset();
Ext.getCmp('treeCombo').reset();
treeNoid='0';
}
- 大小: 27 KB
分享到:
相关推荐
在Ext JS这个强大的JavaScript框架中,GridPanel是一个非常重要的组件,用于展示数据表格。然而,在实际应用中,可能会遇到一个常见的问题:当GridPanel需要进行第二次加载时,数据或者功能可能会丢失。这个问题主要...
在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...
### Ext GridPanel 中实现加链接操作 在前端开发领域中,Ext JS 是一款非常流行的 JavaScript 框架,用于构建企业级的 Web 应用程序。Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍...
GridPanel 是 ExtJS(Ext.NET 的基础)中的一个重要组件,用于展示数据表格。在这个场景中,我们将深入探讨如何使用Ext.NET代码动态创建GridPanel,并在各种窗口中灵活展示。 1. **动态创建GridPanel**: 在Ext...
在EXTJS中,GridPanel是一种常用的组件,用于展示表格数据。在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加...
这个实例"EXTJSEXT实例GridPanel"旨在教授如何在EXTJS中创建并使用GridPanel。 GridPanel是EXTJS中的一个核心组件,它允许开发者以网格形式展示数据,支持多种功能,如排序、分页、筛选、编辑等。在EXTJS中,...
在EXTJS框架中,Gridpanel是用于展示数据的常用组件,它提供了丰富的功能,如排序、分页、筛选等。当我们需要对数据进行更复杂的展示,例如按类别或层级分类时,多表头(Multi-Level Headers)就显得尤为重要。标题...
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
"GridPanel中的单元格不能选中复制的解决方法" Ext.grid.GridPanel 是一个功能强大且广泛使用的Grid控件,但是它存在一个很大的缺陷:单元格的内容不能选中,没法选中就没法复制,这给用户带来了很多不便。这个...
在集成TreePanel和GridPanel时,可能涉及到的概念有:将TreePanel的节点与GridPanel的数据关联,实现点击树节点时动态加载或更新GridPanel的数据,以及可能的父子数据联动操作。 在实际应用中,你可能会学习到以下...
### 改变GridPanel的行颜色 在使用GridPanel组件进行数据展示时,为了提高可读性和用户体验,我们经常需要对表格中的某些行或单元格进行颜色上的区分。本文将详细介绍如何通过不同的方法来实现这一功能,包括在加载...
### Ext.grid.GridPanel属性详析 #### 一、Ext.grid.GridPanel概述 `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。...
后来公司让改变一个Gridpanel的展现方式,要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久,也没有找到框架的相应控制方法,然后在网上找了很久,也没有找到有人给去示例,无奈就只能自己写JS来控制...
ExtJS表格面板(GridPanel)是Sencha Ext JS框架中的一个核心组件,它用于展示大量结构化数据。在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们...
在本文中,我们将深入探讨`GridPanel`在Extnet框架中的常见操作,包括选择行、前后台方法调用、增删行以及弹出窗体的实现方式。这些操作是开发Web应用程序时处理数据表单和数据展示的关键部分。 首先,我们来看如何...
ExtJS的GridPanel导出excel文件,方便快捷易懂!
在本文中,我们将深入探讨如何使用ExtJS库中的RowExpander插件来实现在GridPanel中内嵌行内的表格。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。RowExpander插件是...
EXTJS的GridPanel是其组件库中的核心组件之一,用于展示数据网格,广泛应用于Web应用的数据展示。在EXTJS中,ColumnModel是用来定义GridPanel列结构和行为的关键部分。这篇博客"EXTJS_GridPanel_ColumnModel_列的...
在IT行业中,尤其是在Web开发领域,`gridPanel`通常指的是数据网格组件,它用于展示和管理大量的结构化数据。在本话题中,我们讨论的是如何在`gridPanel`中添加按钮,这涉及到前端用户界面的设计和交互。`gridPanel`...
Ext.grid.GridPanel 删除线 放到example文件夹下运行