jsonstr

sammyfun

浏览: 1163466 次
性别:
来自: 西安

最近访客更多访客>>

sdwangyang

this124

单v纯微笑

yeaijun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

sjon

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},给分你吧