- 浏览: 37904 次
- 性别:
最新评论
-
dragon2268:
楼主您好,最近在做一个项目,用NODE.JS写的聊天室,业务逻 ...
Nodejs express4 socket.io 共享session
Extjs很强大,但也很庞大,还有一些地方不满足一些需求,变态需求就另说了。
在4中Tree不带有分页,为了满足需求,只能扩展Ext的组件。
仔细看TreeStore中源码,可以对比着Store中的源码,其实TreeStore中只是缺少了分页参数,以及对这些参数的逻辑和封装。我们只需要传入参数,加入分页逻辑,并封装起来。
思路有了,就按着需求写。
/**
* Extjs4.1 TreeStore 分页
*
* @作者:徐盛
* @日期:2012-10-23
* @用法:
* Ext.create('APP.plugin.TreeStore', {
* model: 'myModel',
* storeId: 'MyTreeModel',
* proxy: {
* type: 'ajax',
* url: 'url.do',
* reader: {
* type: 'json',
* root: 'myTree',
* totalProperty: 'totalProperty' // 一定需要这个参数接受后台返回的总条数
* }
* },
* root: {
* id: 0,
* text: 'root',
* expanded: true
* }
* })
*
* 其余都一样,主要是totalProperty,这个返回总条数
*
* @说明:
* 目前只能实现root节点下的分页。
* 在原Extjs4.1 TreeStore中加入的分页所需参数。
* 如不满足需求,需自行调试加入方法。
* 联系QQ:78264486
*
*/
Ext.define('APP.plugin.TreeStore', {
extend: 'Ext.data.TreeStore',
alias: 'store.MyTreeStore',
/**
* 每页显示条数
*
*/
pageSize: undefined,
/**
* 当前页 默认为第一页
*
*/
currentPage: 1,
purgePageCount: 5,
defaultPageSize: 25,
/**
* 构造函数
*
*/
constructor: function(config) {
var me = this,
root,
fields,
defaultRoot,
data,
proxy;
config = Ext.apply({}, config);
/**
* @event prefetch
* Fires whenever records have been prefetched
* @param {Ext.data.Store} this
* @param {Ext.data.Model[]} records An array of records.
* @param {Boolean} successful True if the operation was successful.
* @param {Ext.data.Operation} operation The associated operation
*/
data = config.data || me.data;
/**
* @property {Ext.util.MixedCollection} data
* The MixedCollection that holds this store's local cache of records.
*/
me.data = new Ext.util.MixedCollection(false, Ext.data.Store.recordIdFn);
if (data) {
me.inlineData = data;
delete config.data;
}
/**
* If we have no fields declare for the store, add some defaults.
* These will be ignored if a model is explicitly specified.
*/
fields = config.fields || me.fields;
if (!fields) {
config.fields = [
{name: 'text', type: 'string'}
];
defaultRoot = config.defaultRootProperty || me.defaultRootProperty;
if (defaultRoot !== me.defaultRootProperty) {
config.fields.push({
name: defaultRoot,
type: 'auto',
defaultValue: null,
persist: false
});
}
}
me.callParent([config]);
/**
* @property {Ext.data.Store.PageMap} pageMap
* Internal PageMap instance.
* @private
*/
me.pageMap = new me.PageMap({
pageSize: me.pageSize,
maxSize: me.purgePageCount,
listeners: {
// Whenever PageMap gets cleared, it means we re no longer interested in
// any outstanding page prefetches, so cancel tham all
clear: me.cancelAllPrefetches,
scope: me
}
});
me.pageRequests = {};
me.sortOnLoad = false;
me.filterOnLoad = false;
proxy = me.proxy;
data = me.inlineData;
if (data) {
if (proxy instanceof Ext.data.proxy.Memory) {
proxy.data = data;
me.read();
} else {
me.add.apply(me, [data]);
}
me.sort();
delete me.inlineData;
} else if (me.autoLoad) {
Ext.defer(me.load, 10, me, [ typeof me.autoLoad === 'object' ? me.autoLoad : undefined ]);
// Remove the defer call, we may need reinstate this at some point, but currently it's not obvious why it's here.
// this.load(typeof this.autoLoad == 'object' ? this.autoLoad : undefined);
}
// We create our data tree.
me.tree = new Ext.data.Tree();
me.relayEvents(me.tree, [
/**
* @event append
* @inheritdoc Ext.data.Tree#append
*/
"append",
/**
* @event remove
* @inheritdoc Ext.data.Tree#remove
*/
"remove",
/**
* @event move
* @inheritdoc Ext.data.Tree#move
*/
"move",
/**
* @event insert
* @inheritdoc Ext.data.Tree#insert
*/
"insert",
/**
* @event beforeappend
* @inheritdoc Ext.data.Tree#beforeappend
*/
"beforeappend",
/**
* @event beforeremove
* @inheritdoc Ext.data.Tree#beforeremove
*/
"beforeremove",
/**
* @event beforemove
* @inheritdoc Ext.data.Tree#beforemove
*/
"beforemove",
/**
* @event beforeinsert
* @inheritdoc Ext.data.Tree#beforeinsert
*/
"beforeinsert",
/**
* @event expand
* @inheritdoc Ext.data.Tree#expand
*/
"expand",
/**
* @event collapse
* @inheritdoc Ext.data.Tree#collapse
*/
"collapse",
/**
* @event beforeexpand
* @inheritdoc Ext.data.Tree#beforeexpand
*/
"beforeexpand",
/**
* @event beforecollapse
* @inheritdoc Ext.data.Tree#beforecollapse
*/
"beforecollapse",
/**
* @event sort
* @inheritdoc Ext.data.Tree#sort
*/
"sort",
/**
* @event rootchange
* @inheritdoc Ext.data.Tree#rootchange
*/
"rootchange"
]);
me.tree.on({
scope: me,
remove: me.onNodeRemove,
// this event must follow the relay to beforeitemexpand to allow users to
// cancel the expand:
beforeexpand: me.onBeforeNodeExpand,
beforecollapse: me.onBeforeNodeCollapse,
append: me.onNodeAdded,
insert: me.onNodeAdded,
sort: me.onNodeSort
});
me.onBeforeSort();
root = me.root;
if (root) {
delete me.root;
me.setRootNode(root);
}
//<deprecated since=0.99>
if (Ext.isDefined(me.nodeParameter)) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn('Ext.data.TreeStore: nodeParameter has been deprecated. Please use nodeParam instead.');
}
me.nodeParam = me.nodeParameter;
delete me.nodeParameter;
}
//</deprecated>
},
/**
* Loads the Store using its configured {@link #proxy}.
* @param {Object} options (Optional) config object. This is passed into the {@link Ext.data.Operation Operation}
* object that is created and then sent to the proxy's {@link Ext.data.proxy.Proxy#read} function.
* The options can also contain a node, which indicates which node is to be loaded. If not specified, it will
* default to the root node.
*/
load: function(options) {
options = options || {};
options.params = options.params || {};
var me = this,
node = options.node || me.tree.getRootNode();
options.page = options.page || me.currentPage;
options.start = (options.start !== undefined) ? options.start : (options.page - 1) * me.pageSize;
options.limit = options.limit || me.pageSize;
// If there is not a node it means the user hasnt defined a rootnode yet. In this case lets just
// create one for them.
if (!node) {
node = me.setRootNode({
expanded: true
}, true);
}
// Assign the ID of the Operation so that a REST proxy can create the correct URL
options.id = node.getId();
if (me.clearOnLoad) {
if(me.clearRemovedOnLoad) {
// clear from the removed array any nodes that were descendants of the node being reloaded so that they do not get saved on next sync.
me.clearRemoved(node);
}
// temporarily remove the onNodeRemove event listener so that when removeAll is called, the removed nodes do not get added to the removed array
me.tree.un('remove', me.onNodeRemove, me);
// remove all the nodes
node.removeAll(false);
// reattach the onNodeRemove listener
me.tree.on('remove', me.onNodeRemove, me);
}
Ext.applyIf(options, {
node: node
});
options.params[me.nodeParam] = node ? node.getId() : 'root';
if (node) {
node.set('loading', true);
}
return me.callParent([options]);
},
// inherit docs
onProxyLoad: function(operation) {
var me = this,
successful = operation.wasSuccessful(),
records = operation.getRecords(),
node = operation.node,
resultSet = operation.getResultSet();
if (resultSet) {
me.totalCount = resultSet.total;
}
me.mycount = resultSet.count;
me.loading = false;
node.set('loading', false);
if (successful) {
if (!me.clearOnLoad) {
records = me.cleanRecords(node, records);
}
records = me.fillNode(node, records);
}
// The load event has an extra node parameter
// (differing from the load event described in AbstractStore)
/**
* @event load
* Fires whenever the store reads data from a remote data source.
* @param {Ext.data.TreeStore} this
* @param {Ext.data.NodeInterface} node The node that was loaded.
* @param {Ext.data.Model[]} records An array of records.
* @param {Boolean} successful True if the operation was successful.
*/
// deprecate read?
me.fireEvent('read', me, operation.node, records, successful);
me.fireEvent('load', me, operation.node, records, successful);
//this is a callback that would have been passed to the 'read' function and is optional
Ext.callback(operation.callback, operation.scope || me, [records, operation, successful]);
},
/**
* 获取总条数
*
*/
getTotalCount: function() {
return this.totalCount || 0;
},
/**
* 获取当前data中条目数
*
*/
getCount: function () {
return this.mycount || 0;
},
/**
* Loads a given 'page' of data by setting the start and limit values appropriately. Internally this just causes a normal
* load operation, passing in calculated 'start' and 'limit' params
* @param {Number} page The number of the page to load
* @param {Object} options See options for {@link #method-load}
*/
loadPage: function(page, options) {
var me = this;
me.currentPage = page;
// Copy options into a new object so as not to mutate passed in objects
options = Ext.apply({
page: page,
start: (page - 1) * me.pageSize,
limit: me.pageSize,
addRecords: !me.clearOnPageLoad
}, options);
if (me.buffered) {
return me.loadToPrefetch(options);
}
me.read(options);
},
/**
* Loads the next 'page' in the current data set
* @param {Object} options See options for {@link #method-load}
*/
nextPage: function(options) {
this.loadPage(this.currentPage + 1, options);
},
/**
* Loads the previous 'page' in the current data set
* @param {Object} options See options for {@link #method-load}
*/
previousPage: function(options) {
this.loadPage(this.currentPage - 1, options);
},
/**
* @private
* Cancels all pending prefetch requests.
*
* This is called when the page map is cleared.
*
* Any requests which still make it through will be for the previous page map generation
* (generation is incremented upon clear), and so will be rejected upon arrival.
*/
cancelAllPrefetches: function() {
var me = this,
reqs = me.pageRequests,
req,
page;
// If any requests return, we no longer respond to them.
if (me.pageMap.events.pageadded) {
me.pageMap.events.pageadded.clearListeners();
}
// Cancel all outstanding requests
for (page in reqs) {
if (reqs.hasOwnProperty(page)) {
req = reqs[page];
delete reqs[page];
delete req.callback;
}
}
},
/**
* 根据树JSON 中id 获取对应NODE
*
* 此方法会调用Ext.data.Tree中的getNodeById
*
*/
getNodeById: function (id) {
return this.tree.getNodeById(id);
}
}, function() {
var proto = this.prototype;
proto.indexSorter = new Ext.util.Sorter({
sorterFn: proto.sortByIndex
});
/**
* @class Ext.data.Store.PageMap
* @extends Ext.util.LruCache
* Private class for use by only Store when configured `buffered: true`.
* @private
*/
this.prototype.PageMap = new Ext.Class({
extend: 'Ext.util.LruCache',
// Maintain a generation counter, so that the Store can reject incoming pages destined for the previous generation
clear: function(initial) {
this.generation = (this.generation ||0) + 1;
this.callParent(arguments);
},
getPageFromRecordIndex: this.prototype.getPageFromRecordIndex,
addPage: function(page, records) {
this.add(page, records);
this.fireEvent('pageAdded', page, records);
},
getPage: function(page) {
return this.get(page);
},
hasRange: function(start, end) {
var page = this.getPageFromRecordIndex(start),
endPage = this.getPageFromRecordIndex(end);
for (; page <= endPage; page++) {
if (!this.hasPage(page)) {
return false;
}
}
return true;
},
hasPage: function(page) {
// We must use this.get to trigger an access so that the page which is checked for presence is not eligible for pruning
return !!this.get(page);
},
getRange: function(start, end) {
if (!this.hasRange(start, end)) {
Ext.Error.raise('PageMap asked for range which it does not have');
}
var me = this,
startPage = me.getPageFromRecordIndex(start),
endPage = me.getPageFromRecordIndex(end),
dataStart = (startPage - 1) * me.pageSize,
dataEnd = (endPage * me.pageSize) - 1,
page = startPage,
result = [],
sliceBegin, sliceEnd, doSlice,
i = 0, len;
for (; page <= endPage; page++) {
// First and last pages will need slicing to cut into the actual wanted records
if (page == startPage) {
sliceBegin = start - dataStart;
doSlice = true;
} else {
sliceBegin = 0;
doSlice = false;
}
if (page == endPage) {
sliceEnd = me.pageSize - (dataEnd - end);
doSlice = true;
}
// First and last pages will need slicing
if (doSlice) {
Ext.Array.push(result, Ext.Array.slice(me.getPage(page), sliceBegin, sliceEnd));
} else {
Ext.Array.push(result, me.getPage(page));
}
}
// Inject the dataset ordinal position into the record as the index
for (len = result.length; i < len; i++) {
result[i].index = start++;
}
return result;
}
});
});
- TreeStore.rar (4.8 KB)
- 下载次数: 101
相关推荐
dwr2+Extjs2+分页控件
ExtJS4.1+MVC4+Spring.NET1.3+EF5 整合项目数据库(pdm、sql及sqlite数据库) 原文地址:http://blog.csdn.net/xz2001/article/details/8723266
ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合项目用到的数据库 原文地址: http://blog.csdn.net/xz2001/article/details/8716541 注:该数据库是20130411日修改后的。
ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8完成的后台管理项目,觉得是值得参考的实用项目 下载链接
在EXTJS中,PagingToolbar 是一个非常实用的组件,用于在大数据集上实现分页显示,提升用户体验。然而,在实际使用过程中,我们可能会遇到一些问题,比如在点击“下一页”按钮时,加载的数据与预设的查询条件不符。...
总之,这个"extjs+php分页例子"是一个很好的学习资源,它展示了如何利用ExtJS的GridPanel组件和PHP配合,实现高效且用户友好的分页功能。通过深入研究这个实例,开发者不仅可以掌握ExtJS和PHP的结合使用,还能了解到...
1.使用ExtJS6.5.0+SSM 2.实现Grid表格的增删改查和分页,数据库使用的是MySql, 3.项目代码和数据脚本齐全 4.Jar齐全,加载即可运行 5.VX:humingxing可随时交流
Extjs4.2+php5.4+mysql5.5 有数据库,一般不会轻易上传,2015年本人亲自开发,技术还是新的
本项目使用了`extjs4`作为前端框架,`structs2`作为MVC Web应用框架,`spring`处理业务逻辑和依赖注入,以及`hibernate`作为ORM(对象关系映射)工具,来搭建一个完整的后台系统。下面将详细介绍这四个技术及其在...
ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询 1.libs目录缺少hibernate核心jar包 2.libs目录缺少struts jar 3.WebRoot目录缺少ExtJs4.2核心类库 以上信息我都在项目里面注明了,因为这些内容的文件太大了,CSDN不...
基于SpringBoot+ExtJs4.0+Echarts实现的出租房屋管理系统源代码+数据库+项目文档 软件技术栈 前端:ExtJs4.0(JavaScript的一个框架),大数据展示用到Echarts 后端:SpringBoot, JPA 数据库:Mysql5.7 开发环境:...
ExtJs+WCF+LINQ实现分页Grid
ExtJS4是一个强大的JavaScript框架,用于构建富客户端Web应用程序。这个实例结合了多个技术,包括Accordion布局、Servlet、Struts2以及JSON数据交互,以及Ext.tree.Panel组件,以创建一个功能丰富的用户界面。 ...
在这个"SSH+ExtJs分页小例子"中,我们将探讨如何将这两种技术结合实现数据分页显示。 首先,我们来看NewsDAO.java文件。这个文件包含了两个关键方法:`findPageAll`和`totalRecord`。`findPageAll`方法实现了分页...
《基于Extjs、SpringMVC和MyBatis的财务管控系统构建详解》 在现代企业信息化建设中,财务管控系统的构建至关重要,它能够帮助企业高效管理财务数据,提高运营效率,确保财务安全。本文将深入探讨如何利用Extjs、...
基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架
ExtJS4 + ASP.NET MVC Demo是一个结合了前端ExtJS4框架和后端ASP.NET MVC架构的应用示例,展示了如何在Web开发中实现数据操作的增删改查功能,并且利用了ExtJS4的MVC模式来提高代码的组织性和可维护性。这个Demo还...
本项目“Extjs+Spring+Hibernate实现分页”结合了三种强大的技术,以构建一个高效、灵活的数据分页系统。下面将详细介绍这三个技术以及它们在分页中的应用。 1. **ExtJS**:ExtJS是一个JavaScript库,专门用于构建...
Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例