- 浏览: 212210 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
henchong:
如果提示信息全是数字的话,是不会自动换行的,不知道这个该怎么解 ...
用ExtJs为表格单元格增加Tooltips浮动信息 -
李君寻:
自动换行,算是懂了
ColumnLayout的使用方法 -
icrwen:
楼主能解释下为啥要用air技术呢,是不是只用ext就可以了啊
extjs+air开发 -
wenniuwuren:
不能显示图片..
利用session实现一次性验证码 -
追风筝的孩子:
还是没有解决啊
com.ibatis.sqlmap.client.SqlMapException: There is no statement named 语句名 in thi
本实例将在带分页的表格基础上进行扩展,增加搜索功能。由于本实例采用fleaphp+ext制作,故本实例将只贴出核心的代码,不提供源码打包下载了(见谅)。部分参考自志凡的extjs grid搜索分页实例。下面先看下服务端的核心代码,这里采用PHP:
/**
* 留言列表
*/
function actionList() {
$modelBO = & FLEA::getSingleton('Model_board');
load_class('FLEA_Helper_Pager');
$page = isset($_REQUEST['start']) ? (int)$_REQUEST['start']-1 : 0;
//若搜索字段为空及表格初始化时,显示全部记录,否则根据title搜索
$str = null;
if ($_REQUEST['title']) {//接受传送过来的title值
$str = ' title like '%'. trim($_REQUEST['title']) .'%'';
}
$pager= new FLEA_Helper_Pager($modelBO,$page,20,$str,'board_id DESC');
$posts = $pager->findAll();
$post_arr = array('0'=>'未回复','1'=>'已回复');
foreach ($posts as $val2) {
$temp['board_id'] = $val2['board_id'];
$temp['title'] = $val2['title'];
$temp['comment'] = $val2['comment'];
$temp['is_post'] = $post_arr[$val2['is_post']];
$temp['post_comment'] = $val2['post_comment'];
$temp['add_time'] = $val2['add_time'];
$temp['add_user'] = $val2['add_user'];
$new_arr[] = $temp;
}
$result['topics'] = $new_arr;
$js=count($modelBO->findAll());
$result['totalCount'] = $js;
require('./common/Json.php');
$json = new Services_JSON();
echo $json->encode($result);
}
实际上就是服务端接受ext搜索表单传送的值,搜索相应记录返回即可,在看下客户端js代码:
Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url:'index.php?controller=board&action=list'}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'board_id'
},[
'board_id','title','is_post','add_time','add_user'
])
});
var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header:'ID',width:50,sortable:true,dataIndex:'board_id'},
{header:'标题', width:300,sortable:true,dataIndex:'title'},
{header:'作者', width:150,sortable:true,dataIndex:'add_user'},
{header:'是否回复',width:100,sortable:true,dataIndex:'is_post'},
{header:'发布时间',width:200,sortable:true,dataIndex:'add_time'}
]);
//设置搜索表单
var s_pannel = new Ext.FormPanel({
baseCls: 'x-plain',
defaults: {width: 150},
defaultType: 'textfield',
items: [{
fieldLabel: '标题',
id:'title',
name: 'title'
}]
});
var grid = new Ext.grid.GridPanel({
border:false,
buttonAlign :'left',
region:'center',
loadMask: true,
store: ds,
cm: colModel,
autoScroll: true,
tbar: [
s_pannel,//搜索表单
{
text: '搜索',
handler:function(){
// 这里是关键,重新载入数据源,并把搜索表单值提交
ds.load({
params:{start:0, limit:20,
title:Ext.get('title').dom.value//取得搜索表单文本域的值,发送到服务端
}
})
}
}
],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: ds,
displayInfo: true,
displayMsg: '第{0} 到 {1} 条数据 共{2}条',
emptyMsg: "没有数据"
})
});
var viewport = new Ext.Viewport({
layout:'border',
items:[grid]
});
ds.load({params:{start:0, limit:20, forumId: 4}});
// 这里很关键,如果不加,翻页后搜索条件就变没了,这里的意思是每次数据载入前先把搜索表单值加上去,
// 这样就做到了翻页保留搜索条件了
ds.on('beforeload',function(){
Ext.apply(
this.baseParams,
{
title:Ext.get('title').dom.value
});
});
//end loding
setTimeout(
function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250
);
});
发表评论
-
extjs+air开发
2009-06-24 21:41 2992一、准备工作 1、下载adobe air install和ad ... -
带复选框(checkbox)的树
2009-03-20 15:05 1834该例子可以满足我们的一般需求。很多时候我们需要用到带check ... -
ExtJs中解决IE的min-width问题
2009-02-27 22:14 752当使用了ExtJs后,脚本documentElement.cl ... -
Ext中的动画处理
2009-02-27 22:13 1153CartoonExt.js //图片宽 var WIDTH=3 ... -
Ext.Ajax
2009-02-27 22:12 1164其实Ext.Ajax的使用并不 ... -
使用百分比设置GridPannel宽度的方法
2009-01-14 15:03 1614使用过Ext的Gird(网格)功 ... -
巧妙运用NumberField
2009-01-14 15:02 4559巧妙运用NumberField: 只允许字段输入数字. v ... -
Ext.ux.TabCloseMenu插件的使用
2009-01-14 14:59 1544tab在ext里很常用,在点开N个tab后,是否能通过右键菜单 ... -
直接在页面上显示富文本编辑器
2009-01-14 14:58 3251<html> <head> ... -
带右键菜单的树
2009-01-14 14:58 1176ext树形菜单加上右键菜单是不是很酷,ext当然也能实现。 树 ... -
EXT 二级联动下拉列表
2009-01-14 14:57 2554page.html代码如下 <!DOCTYPE HTM ... -
带分页的表格
2009-01-09 13:43 1011主要介绍如何使用ext的表格控件实现ajax分页。 上一节讲了 ... -
树形下拉框
2009-01-09 13:43 2542<!DOCTYPE HTML PUBLIC " ... -
支持手写输入及联想功能的下拉框
2009-01-09 13:42 2854<!DOCTYPE HTML PUBLIC " ... -
让ext项目步入对象化编程
2009-01-09 13:39 808对于一些刚刚接触javascript的人来说大部分都在使用面向 ... -
grid的继承类,构建方便的grid操作
2009-01-09 13:13 1410在以往建立grid的时都要 ... -
ext异步加载树的子节点
2009-01-09 13:12 1944<script> Ext.o ... -
可拖拽的tree实际应用
2009-01-09 12:54 1780ext提供的树本身就有拖 ... -
可直接编辑节点的tree
2009-01-09 12:03 1681其实代码并不是很复杂,只是在原有的树形添加一个TreeEdit ... -
Checkbox与RadioGroup的使用方法
2009-01-09 12:03 7053Ext提供的Checkbox与Radio, ...
相关推荐
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
ext2.0 grid 分页实例(php)
一个用JSP后台读取数据放到 grid里显示的实例,网上找到的大部分不能运行,修改了很久。。。
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...
ext grid网格控件四个实例,包括从array、XML、JSON和动态从服务器提取数据,具有分页功能,是在j2ee框架上实现,测试前先下载ext文件
DataGrid实例「分页]源代码
带分页的jquery Grid 网上很多例子都 不完整这个是完整的实例有兴趣的下载看看http://www.dengwei1999.com
ASP.NET结合ExtJs+WCF+LINQ实现的分页Grid列表,一个很不错的学习ASP.NET/AJAX的参考实例,而且如果你的程序用了此分页代码,也会增色不少。
ExtJs Grid导出Excel实例源码,后台C#。有分页功能,却仍可实现导出后台所有记录的功能
这是本人在学习ExtJS 4.2 过程中做的一个小实例,包含了一些基础的功能: Tree/Grid/分页查询,滚动查询等. 与数据库的连接以及表结构在附件中的说明文档中有写.
学习ext, guice 的好程序 学习ext4 extjs4, guice 的好程序 mybatis的好程序,可以借鉴很多东西的好程序
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
这是一个extjs与.net结合开发的实例,主要实现了grid的分页显示,数据的添删改查,以及动态添加数据字段的功能,对于学习extjs的人有非常好的帮助
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合...
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...
本文实例讲述了Yii视图操作之自定义分页实现方法。分享给大家供大家参考,具体如下: 1. 视图文件调用cgridview,clistview时候调用自定义的分页方法 <?php $this->widget('zii.widgets.grid.CGridView', array( ...
分页采用直接带页码参数的方法来控制翻页。网页的名字为emp1.asp。源代码如下: 建立与employee.mdb数据库的连接。 Set conn = Server.CreateObject("ADODB.Connection") conn.Open "driver={Microsoft Access ...
ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4...