1.布局组合
var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [
Ext.create('Ext.Component', {
region: 'north',
height: 60, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<p><img src="../image/north.png"></img></p>'
}
}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible:true,
collapsed: true,
title: 'South',
margins: '0 0 0 0'
},tabs]
}]
2.创建可增加的tabs
//中间部分
var tabs= Ext.create('Ext.tab.Panel', {
id:'centerpanel',
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
contentEl: 'center1',
title: '传感中心',
closable: true,
autoScroll: true
}, {
contentEl: 'center2',
title: '公司简介',
autoScroll: true
}]
});
3.在tabs上增加子项
function addTab (closable,s) {
var flags="#Tab"+index;//注意#号部分
var user = tabs.child(flags);
if(user){//去除重复加载
user.tab.show();
tabs.setActiveTab(user);
}
else if(index==32){//天气灾害预警
tabs.add({
title: s,
iconCls: 'tabs',
itemId:'#Tab' + index,
html:'<iframe src="http://www.baidu.com/" width="100%" height="100%"></iframe>',
closable: !!closable
}).show();
});
4.数据加载
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: new Ext.data.HttpProxy({
type: 'jsonp',
url:'order/exceptionAction',
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
}),
sorters: [{
property: 'deviceno',
direction: 'DESC'
}]
});
先写到这里 慢慢完善
分享到:
相关推荐
### ExtJs 4 Grid 与 jqGrid 对比分析 #### 一、数据展示对比 在数据展示方面,ExtJs 4 Grid 和 jqGrid 都采用了 JSON 格式的数据交互方式,但两者在实现机制上存在一定的差异。 1. **ExtJs 4 Grid**: - **耦合...
在Extjs中使用`pagingtoolbar`组件进行分页操作时,通常情况下,当我们点击“下一页”,`store`会自动加载数据。但是,默认情况下`store`只传递了`start`和`limit`两个参数,这意味着如果之前进行了某种查询(例如...
ExtJS表格Grid是一款强大的JavaScript组件,它在Web应用中用于展示和操作数据,尤其是在复杂的业务逻辑和大量数据处理中表现出色。这篇博客文章主要探讨了ExtJS Grid的全面功能,结合源码分析和实用工具,帮助开发者...
EXTJS的Grid组件是一种强大的数据展示工具,可以轻松地处理大量数据,并提供灵活的排序、筛选和分页功能。 首先,我们需要理解PHP在其中的角色。PHP是一种广泛使用的服务器端脚本语言,特别适合于处理动态内容和与...
这个"ExtJS_grid.rar"压缩包包含了关于学习ExtJS Grid的教程资源,特别是"第三节_ExtJS表格控件和树控件.pdf",它可能详细讲解了如何使用Grid以及与树形控件的结合。 1. **ExtJS Grid基本概念**: - **Grid Panel*...
4. **渲染和刷新**:拖放操作完成后,Grid需要更新视图以反映新的数据状态。这通常通过调用store的`loadData()`或`sync()`方法以及Grid的`refresh()`方法来实现。 5. **事件处理**:在实现拖放功能时,你需要关注几...
在本文中,我们将深入探讨如何在ExtJS 4框架中实现Grid组件的修改和删除功能,同时结合Struts2和Hibernate技术,构建一个完整的CRUD(创建、读取、更新、删除)应用。ExtJS 4是一个强大的JavaScript UI库,提供了...
在Ext JS中,页面的自动刷新功能通常涉及到数据网格(Grid)的实时更新,这在处理动态数据流或者需要实时显示新数据的场景中非常常见。本教程集合将深入探讨如何在Ext JS中实现页面,特别是数据网格的自动刷新。 一...
在ExtJS 4 MVC中,可以使用路由来实现URL与视图间的映射。 - **Ajax通信**:通常通过Ext.Ajax或Ext.data.proxy.Ajax与服务器进行异步数据交换。设置请求参数、处理响应,以及异常处理都在此层完成。 - **测试与...
- **应用过滤器**:用户选择过滤条件后,Grid会自动更新,只显示符合条件的行。 ### 过滤类型 **3. 常见过滤类型** - **文本过滤**:允许用户输入文本,匹配列中的内容,常见的有“包含”、“不包含”、“等于”、...
本篇文章将深入探讨ExtJS中的Tree和Grid,特别是Buffer Grid与Progress Grid的实现。 **一、ExtJS Tree组件** 1. **Tree组件基本概念**:Tree组件用于展示层次结构的数据,类似于操作系统中的文件系统,具有可折叠/...
综上所述,"ExtJs DataGridView控件实例"涵盖了ExtJs的Grid组件使用,与AJAX、WCF服务和Linq的集成,以及各种功能的实现,包括分页、排序、提示、以及增删改查操作。这个实例为开发者提供了丰富的参考,帮助他们更好...
6. Grid组件:ExtJS的Grid组件是用于展示大量结构化数据的视图,它支持分页、排序、过滤等功能。在这个实例中,Grid会根据DWR返回的数据动态加载行,提供用户友好的数据浏览体验。 7. 整体架构:整个系统采用MVC...
文章可能通过一个实际项目或示例,详细解释了如何将ExtJS的Grid Panel与Struts 2通过JSON进行数据交互,帮助读者理解这两种技术的整合过程。学习这些内容有助于提升Web应用的用户体验,实现数据的实时更新和交互。
- **数据解析**:ExtJS的Store接收到JSON数据后,自动更新模型并刷新视图。 5. **安全与优化** - **数据验证**:Servlet端进行输入验证,防止SQL注入等安全问题。 - **缓存策略**:可以利用HTTP缓存机制,减少...
为了实现在数据刷新时滚动条位置不变的效果,我们需要对`Ext.grid.GridView`进行扩展或覆盖。具体做法是监听`beforerefresh`和`refresh`事件,在这些事件中记录并恢复滚动条的位置。 ##### 监听beforerefresh事件 ...
- ExtJS 应用通常使用AJAX(异步JavaScript和XML)技术与C#后端进行通信,实现页面无刷新的数据交换。这可以通过Ext.Ajax或者Ext.data.Proxy(如RESTful Proxy)实现。 4. **JSON 数据格式**: - C#后端返回的...
4. **远程排序和分页**:EXTJS的Store可以通过配置实现远程排序和分页,这样在处理大量数据时,服务器只需要返回当前页的JSON数据,减少了网络传输负担。 5. **远程过滤**:同样,通过Proxy,EXTJS支持远程过滤,...
8. 性能优化:利用ASP.NET的输出缓存、页面局部刷新等技术提升系统性能,EXTJS的异步加载和分页机制减少服务器压力。 这个经典项目不仅展示了ASP.NET的强大后端处理能力和EXTJS的出色前端表现力,也为开发者提供了...