jsonstr

最新推荐文章于 2024-07-26 20:46:33 发布

sammyfunyupg

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量178

点赞数

分类专栏： sjon 文章标签： javascript 测试 json ViewUI

本文链接：https://blog.csdn.net/sammyfunyupg/article/details/84613173

版权

sjon 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

http://jiangzhengjun.iteye.com/blog/467246

http://www.cnblogs.com/mailingfeng/archive/2012/01/18/2325707.html
http://jiangzhengjun.iteye.com/blog/467276

http://jackyrong.iteye.com/blog/1662623

EXTjs 分页combox

2012-05-22 14:22:02| 分类： Extjs学习 |举报|字号订阅
<title>Combox</title>
<link href="../../ExtJs/ext-2.0.2/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="../../ExtJs/ext-2.0.2/examples/examples.css" rel="stylesheet" type="text/css" />

<script src="../../ExtJs/ext-2.0.2/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../../ExtJs/ext-2.0.2/ext-all.js" type="text/javascript"></script>
<script src="../../ExtJs/ext-2.0.2/build/locale/ext-lang-zh_CN.js" type="text/javascript"></script>

<%--Microsoft JScript 运行时错误: 对象不支持“createContextualFragment”属性或方法--%>
<script type="text/javascript">
if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment) {
Range.prototype.createContextualFragment = function (html) {
var frag = document.createDocumentFragment(),
div = document.createElement("div");
frag.appendChild(div);
div.outerHTML = html;
return frag;
};
}
</script>

<script type="text/javascript">
Ext.onReady(function () {

var proxy = new Ext.data.HttpProxy({
url: '/Fenye/GetCombox/'
});

var city = new Ext.data.Record.create([
{ name: 'ID', type: 'int', mapping: 'ID' },
{ name: 'Produce', type: 'string', mapping: 'Produce' }
]);

var reader = new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, city);

var store = new Ext.data.Store({
proxy: proxy,
reader: reader
});

var combo = new Ext.form.ComboBox({
store: store,
emptyText: '请选择',
mode: 'remote',
pageSize: 8, //设置每页显示的条数
triggerAction: 'all',
displayField: 'Produce',
valueField: 'ID',
renderTo: Ext.getBody(),
readOnly: true,
listWidth: 240 //设置下拉框的宽度
});
//combo 选中事件
combo.on('select', function () {
Ext.MessageBox.alert("提示:", "真实值:" + combo.getValue() + "; 显示值:" + combo.getRawValue());
//在这里，你可以根据选中的值，进行其他的操作。比如是级联。
});
});
</script>

</head>
<body>
<div>

</div>
</body>
</html>

后台分页代码：我用的是mvc框架

public string GetCombox()
{
int start =int.Parse(Request.Params["start"].ToString());//起始值
int limit = int.Parse(Request.Params["limit"].ToString());//页大小

int end = start + limit;//终止值
Maticsoft.BLL.shop vshop = new shop();

string sql = string.Format("ID in(select top {0} ID from shop ) and ID not in (select top {1} ID from shop)",end,start);
DataTable vTable = vshop.GetList(sql).Tables[0];

if (vTable != null && vTable.Rows.Count > 0)
{
StringBuilder vlist = new StringBuilder();
vlist.Append("{totalProperty:" + vshop.GetRecordCount("1=1"));
vlist.Append(",root:[");
foreach (DataRow vRow in vTable.Rows)
{
vlist.Append("{");
vlist.Append("ID:" + "'" + Convert.ToInt32(vRow["ID"].ToString()) + "'");
vlist.Append(",Produce:" + "'" + vRow["Produce"].ToString() + "'");
vlist.Append("},");
}
vlist.Remove(vlist.Length - 1, 1);
vlist.Append("]}");
return vlist.ToString();
}
return null;
}

-------------------------------------
xtjs4 表格的store是动态的，但分页工具栏的store始终是初始化的那个
2012-08-11 16:52 zhx3513537 | 分类：Windows | 浏览2624次

具体是这样的：我有一棵菜单树当我点击不同的菜单时右边的表格会有不同的内容，但是下面的分页工具栏只要我点击下一页表格显示的就是初始化的数据，
{
id:'toolbar',
xtype : 'pagingtoolbar',
store : gridstore,
displayInfo : true,
dock : 'bottom',
displayMsg : '显示第{0}到第{1}记录，一共{2}条',
emptyMsg : "没有记录"
}
gridstore有一个初始化的数据，点击菜单时我会加入新的参数，但工具条还是原来的那个gridstore

如何使得分页工具栏的store和grid的store保持一致

提问者采纳

亲第一个问题就是分页工具栏的Store就是Grid的Store，正确使用方式如下：
1.在Grid的Store定义
var store = Ext.create('Ext.data.Store', {
model: ‘Demo’,
pageSize: itemsPerpage,
proxy:{
waitTitle : '提醒：',
waitMsg : '数据加载中...',
type : 'ajax',
url : '自定义action路径',
reader:{
type : 'json',//传回的数据类型
root: 'items',//读取数据的节点名称
totalProperty :'total'//非常重要，数据总条目数，你要在后台算出后写在JSON中传回
}
}
});

2.Grid中定义bbar
bbar: Ext.create('Ext.PagingToolbar', {
store: store,//关键在此，下面的配置项可参看API配置
displayInfo: true,
xtype :'pagingtoolbar',
beforePageText :"第"
})。
3.store的加载方式
store.load(
{
params:{
start :0,
limit :20
}
});
为了保持通过limit和pageSize的数量要一致，start会在翻页时自动累加，后台取到start和limit参与查询即可。
若是store中需要带其他参数就要添加事件
store.on('beforeload',function(){ // =======翻页时查询条件
Ext.apply(
store.proxy.extraParams, {
flag : 1//自定义的
}
);

});

以上的这些讯息完全可以解决pagingBar的问题了

提问者评价

虽然不是我的解决方法，我是store.setProxy{//balabala},给分你吧

sammyfunyupg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonstr

http://jiangzhengjun.iteye.com/blog/467246http://www.cnblogs.com/mailingfeng/archive/2012/01/18/2325707.htmlhttp://jiangzhengjun.iteye.com/blog/467276http://jackyrong.iteye.com/blog/1662623...
复制链接

扫一扫

专栏目录