ExtJS 表格 树结构
- 博客分类:
- ExtJS
Ext.require(['*']);
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
Ext.onReady(function(){
Ext.create('Ext.grid.Panel',{
renderTo:Ext.getBody(),
//selType:'cellmodel',//ѡ��ij����Ԫ��
store:userStore,
width:400,
height:200,
title:'Application Users',
columns:[
{
text:'Name',
width:100,
sortable:false,
hideable:false,
dataIndex:'name'
},{
text:'Email Address',
width:150,
dataIndex:'email',
//format the email address using a custom renderer
renderer:function(value){
return Ext.String.format('<a href="mailto:{0}">{1}</a>',value,value);
},
hidden:false
},{
text:'Phone Number',
flex:1,
dataIndex:'phone'
}
]
});
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name',field:'textfield' },
{ header: 'Email', dataIndex: 'email', flex: 1 ,
/**�ɱ༭��Ԫ��*/
field:{
xtype:'textfield',
allowBlank:false
}},
{ header: 'Phone', dataIndex: 'phone' }
],
// selType:'cellmodel',//����ѡ�е�Ԫ��
selType:'rowmodel',
plugins:[
Ext.create('Ext.grid.plugin.RowEditing',{
clickToEdit:1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
//Grouping
var store = Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['name', 'senority', 'department'],
groupField: 'department',
data: {'employees':[
{ "name": "Michael Scott", "senority": 7, "department": "Manangement" },
{ "name": "Dwight Schrute", "senority": 2, "department": "Sales" },
{ "name": "Jim Halpert", "senority": 3, "department": "Sales" },
{ "name": "Kevin Malone", "senority": 4, "department": "Accounting" },
{ "name": "Angela Martin", "senority": 5, "department": "Accounting" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'employees'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Senority', dataIndex: 'senority' }
],
features: [{ftype:'grouping'}],
width: 200,
height: 275,
renderTo: Ext.getBody()
});
//paging
var itemsPerPage=2;
var userStorePage = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad:true,
pageSize:itemsPerPage,
data: {
"success": true,
"total": 12,
'users':
[
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224'},
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234'},
{ name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244'},
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254'},
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224'}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users',
totalProperty:'total'
}
}
});
// specify segment of data you want to load using params
userStorePage.load({
params:{
start:0,
limit: itemsPerPage
}
});
/**�������userStorePage Ч��һ��
* var userStorePage = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: true,
pageSize: 4,
proxy: {
type: 'ajax',
url : 'MyData/users.json',
reader: {
type: 'json',
root: 'users',
totalProperty: 'total'
}
}
});
* */
Ext.create('Ext.grid.Panel',{
store:userStorePage,
columns:[
{
text:'Name',
width:100,
sortable:false,
hideable:false,
dataIndex:'name'
},{
text:'Email Address',
width:150,
dataIndex:'email',
//format the email address using a custom renderer
renderer:function(value){
return Ext.String.format('<a href="mailto:{0}">{1}</a>',value,value);
},
hidden:false
},{
text:'Phone Number',
flex:1,
dataIndex:'phone'
}
],
dockedItems:[{
xtype:'pagingtoolbar',
store:userStorePage,
dock:'bottom',
displayInfo:true
}],
renderTo: Ext.getBody()
});
//tree
Ext.create('Ext.tree.Panel',{
renderTo:Ext.getBody(),
title:'Simple Tree',
width:150,
root:{
text:'Root',
expanded:true,
children:[
{
text:'child 1',
leaf:true
},{
text:'child 2',
leaf:true
},{
text:'child 3',
expanded:true,
children:[
{
text:'Grandchild',
leaf:true
}
]
}
]
}
});
var treeStore=Ext.create('Ext.data.TreeStore',{
root:{
text:'Root treeStore',
expanded:true,
children:[
{
text:'child 1',
leaf:true
},{
text:'child 2',
leaf:true
},{
text:'child 3',
expanded:true,
children:[
{
text:'Grandchild',
leaf:true
}
]
}
]
}
});
Ext.create('Ext.tree.Panel',{
renderTo:Ext.getBody(),
title:'treeStore',
width:150,
store:treeStore,
useArrows:true//�Ӻš���> ��ͷ
});
//add nodes to the tree
var tree=Ext.create('Ext.tree.Panel', {renderTo:Ext.getBody(),useArrows:true});
tree.setRootNode({
text:'Root',
expanded:true,
children:[
{
text:'child 1',
leaf:true
},{
text:'child 2',
leaf:true
}
]
});
var root=tree.getRootNode();
var parent=root.appendChild({text:'Parent 1'});
parent.appendChild({
text:'child 3',
leaf:true
});
var child = parent.insertChild(0, {
text: 'Child 2.5',
leaf: true
});
parent.insertBefore({
text: 'Child 2.75',
leaf: true
}, child.nextSibling);
parent.expand();
//异步加载tree
var asyRoot=new Ext.tree.AsyncTreeNode({
expanded:true,
text:'系统菜单',
id:'',//
draggable:false,
iconCls:'b'
});
var asyTree=new Ext.tree.TreePanel({
title:'树形结构',
root:asyRoot,
border:false,
autoHeight:true,
renderTo:Ext.getBody(),
autoScroll:true,
animate:true,//允许使用动画展开 折叠
enableDD:true,//允许拖放
containerScroll:true,//登记本容器ScrollManager
listeners:{//在加载之前监听一个事件
'beforeload':function(data){
node.loader=new Ext.tree.TreeLoader({
url:'viewtree.do?id='+node.id,//请求路径
baseParams:{//请求参数
}
});
}
}
});
});
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
Ext.onReady(function(){
Ext.create('Ext.grid.Panel',{
renderTo:Ext.getBody(),
//selType:'cellmodel',//ѡ��ij����Ԫ��
store:userStore,
width:400,
height:200,
title:'Application Users',
columns:[
{
text:'Name',
width:100,
sortable:false,
hideable:false,
dataIndex:'name'
},{
text:'Email Address',
width:150,
dataIndex:'email',
//format the email address using a custom renderer
renderer:function(value){
return Ext.String.format('<a href="mailto:{0}">{1}</a>',value,value);
},
hidden:false
},{
text:'Phone Number',
flex:1,
dataIndex:'phone'
}
]
});
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name',field:'textfield' },
{ header: 'Email', dataIndex: 'email', flex: 1 ,
/**�ɱ༭��Ԫ��*/
field:{
xtype:'textfield',
allowBlank:false
}},
{ header: 'Phone', dataIndex: 'phone' }
],
// selType:'cellmodel',//����ѡ�е�Ԫ��
selType:'rowmodel',
plugins:[
Ext.create('Ext.grid.plugin.RowEditing',{
clickToEdit:1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
//Grouping
var store = Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['name', 'senority', 'department'],
groupField: 'department',
data: {'employees':[
{ "name": "Michael Scott", "senority": 7, "department": "Manangement" },
{ "name": "Dwight Schrute", "senority": 2, "department": "Sales" },
{ "name": "Jim Halpert", "senority": 3, "department": "Sales" },
{ "name": "Kevin Malone", "senority": 4, "department": "Accounting" },
{ "name": "Angela Martin", "senority": 5, "department": "Accounting" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'employees'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Senority', dataIndex: 'senority' }
],
features: [{ftype:'grouping'}],
width: 200,
height: 275,
renderTo: Ext.getBody()
});
//paging
var itemsPerPage=2;
var userStorePage = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad:true,
pageSize:itemsPerPage,
data: {
"success": true,
"total": 12,
'users':
[
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224'},
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234'},
{ name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244'},
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254'},
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224'}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users',
totalProperty:'total'
}
}
});
// specify segment of data you want to load using params
userStorePage.load({
params:{
start:0,
limit: itemsPerPage
}
});
/**�������userStorePage Ч��һ��
* var userStorePage = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: true,
pageSize: 4,
proxy: {
type: 'ajax',
url : 'MyData/users.json',
reader: {
type: 'json',
root: 'users',
totalProperty: 'total'
}
}
});
* */
Ext.create('Ext.grid.Panel',{
store:userStorePage,
columns:[
{
text:'Name',
width:100,
sortable:false,
hideable:false,
dataIndex:'name'
},{
text:'Email Address',
width:150,
dataIndex:'email',
//format the email address using a custom renderer
renderer:function(value){
return Ext.String.format('<a href="mailto:{0}">{1}</a>',value,value);
},
hidden:false
},{
text:'Phone Number',
flex:1,
dataIndex:'phone'
}
],
dockedItems:[{
xtype:'pagingtoolbar',
store:userStorePage,
dock:'bottom',
displayInfo:true
}],
renderTo: Ext.getBody()
});
//tree
Ext.create('Ext.tree.Panel',{
renderTo:Ext.getBody(),
title:'Simple Tree',
width:150,
root:{
text:'Root',
expanded:true,
children:[
{
text:'child 1',
leaf:true
},{
text:'child 2',
leaf:true
},{
text:'child 3',
expanded:true,
children:[
{
text:'Grandchild',
leaf:true
}
]
}
]
}
});
var treeStore=Ext.create('Ext.data.TreeStore',{
root:{
text:'Root treeStore',
expanded:true,
children:[
{
text:'child 1',
leaf:true
},{
text:'child 2',
leaf:true
},{
text:'child 3',
expanded:true,
children:[
{
text:'Grandchild',
leaf:true
}
]
}
]
}
});
Ext.create('Ext.tree.Panel',{
renderTo:Ext.getBody(),
title:'treeStore',
width:150,
store:treeStore,
useArrows:true//�Ӻš���> ��ͷ
});
//add nodes to the tree
var tree=Ext.create('Ext.tree.Panel', {renderTo:Ext.getBody(),useArrows:true});
tree.setRootNode({
text:'Root',
expanded:true,
children:[
{
text:'child 1',
leaf:true
},{
text:'child 2',
leaf:true
}
]
});
var root=tree.getRootNode();
var parent=root.appendChild({text:'Parent 1'});
parent.appendChild({
text:'child 3',
leaf:true
});
var child = parent.insertChild(0, {
text: 'Child 2.5',
leaf: true
});
parent.insertBefore({
text: 'Child 2.75',
leaf: true
}, child.nextSibling);
parent.expand();
//异步加载tree
var asyRoot=new Ext.tree.AsyncTreeNode({
expanded:true,
text:'系统菜单',
id:'',//
draggable:false,
iconCls:'b'
});
var asyTree=new Ext.tree.TreePanel({
title:'树形结构',
root:asyRoot,
border:false,
autoHeight:true,
renderTo:Ext.getBody(),
autoScroll:true,
animate:true,//允许使用动画展开 折叠
enableDD:true,//允许拖放
containerScroll:true,//登记本容器ScrollManager
listeners:{//在加载之前监听一个事件
'beforeload':function(data){
node.loader=new Ext.tree.TreeLoader({
url:'viewtree.do?id='+node.id,//请求路径
baseParams:{//请求参数
}
});
}
}
});
});
发表评论
-
ExtJs tree
2014-04-16 14:00 0一:简单的树面板实例 Ext.onready(function ... -
Extjs tree 异步加载 实例
2014-04-16 13:33 928一:jsp 页面 <%@ page contentTy ... -
ExtJS insertHtml() overwrite() Format提供常用的格式化方法
2013-09-22 10:35 1177var insertPanel=new Ext.Panel({ ... -
ExtJs Ext.KeyNav 为元素提供简单的按键事件,多线程
2013-09-22 10:27 922KeyNav 按键事件 /** Ext.KeyNa ... -
ExtJS 遍历集合
2013-09-22 10:12 1081<script type="text/java ... -
ExtJS 表单验证
2013-06-17 15:48 1011使用特定类型的表单组件 使用regex正则表达式对输入内容进行 ... -
ExtJS 中Label、Fieldset字段集、FieldContainer 容器字段
2013-06-17 14:12 4543Ext.form.Label:可以与表单中的一个字段进行关联, ... -
ExtJS 微调控件ComnoBox和Time、Date的使用
2013-06-08 16:23 1030微调组件是一个具有上下控制按钮的输入组件,该组件一般不直接使用 ... -
工具栏ToolBar和菜单栏Menu入门
2013-06-04 17:09 2686一:Ext.toolbar.ToolBar是工具栏的基础组件, ... -
ExtJS 4.0 基本功能
2013-06-04 09:51 1309一:ExtJS 组件配置方式 ... -
ExtJS form表单提交
2013-05-30 15:40 914简单的Form 表单提交: 一:普通方式提交: <%@ ... -
ExtJS 入门—我的第一个ExtJS程序
2013-05-27 11:33 919详情请看:http://dev.sencha.com/depl ...
相关推荐
自定义树结构实现以及动态表头实现,整个程序是完整的,包括后台数据读取,数据赋值,树结构的类定义,前后端函数映射实现等,前端运用Extjs搭建页面
目录: 一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、...EXTJS4自学手册——页面控件(树形控件) EXTJS4自学手册——页面控件(表单控件)
本例是用JSP+EXTJS+JSON+MYQL实现的树型结构,例子结构清晰,便于学习。
4.动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object输入参数,风格类似Extjs 10.树状结构可以选择出现在某一列...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
第5章 树形结构 第6章 拖放 第7章 弹出窗口 第8章 布局 第9章 工具栏和菜单 第10章 数据存储与传输 第11章 实用工具 第12章 一个完整的EXT应用 第13章 通过Ext Framework合理地应用EXT 附录A EXT常见问题 附录B EXT...
第5章 树形结构 第6章 拖放 第7章 弹出窗口 第8章 布局 第9章 工具栏和菜单 第10章 数据存储与传输 第11章 实用工具 第12章 一个完整的EXT应用 第13章 通过Ext Framework合理地应用EXT 附录A EXT常见问题 附录B EXT...
一、Extjs的组件结构远比我们想象的复杂 46 二、组件分类 47 三、组件的生命周期 48 四、组件渲染方法render 50 五、小结 52 第九章:按钮与日期选择器 53 一、开始组件学习之旅 53 二、被设计得面目全非的按钮 53 ...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
配置和表格控件使用 表单与输入控件 树形结构 拖放以及弹出窗口
动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object输入参数,风格类似Extjs 10.树状结构可以选择...
树是在ExtJS里面最多彩缤纷的组件之一,用于显示层次状明显的数据来说十分适合。树跟表格都是来自同一个基类的,可用于表格的扩展或者插件都可以用到树上。比如多列、尺寸控制、拖放、渲染和筛选这些功能
书中详细讲述了EXT的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具等内容,每个知识点都配有相应的示例,可操作性极强,同时补充了两个功能强大的实例,并加入...
全书由一个可以引领读者快速入门的“HelloWorld”示例开篇,紧接着对ExtJS的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后一个...
7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...
全书由一个可以引领读者快速入门的“Hello World”示例开篇,紧接着对Ext JS的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后一个...
jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件,也可以单独使用其中一个。 ...