ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇) 用vs2005实现

Question

我现在在用asp.net mvc+extjs.不过如果用vs 2005的话,有下面的方法   http://www.cnblogs.com/cmsoft/archive/2007/11.html http://www.cnblogs.com/xiaozhuang/category/115236.html其中有可能用到一些3.x的技术,不过也都是可以替代的.

Answer 1

楼上的。可以告诉我asp.net+mvc+Nhibernate+Extjs的分页吗。？

Answer 2

StoreAddress.load({params:{start:0, limit:18,category:0,firstchar:'',searchstr:''},
//生成Grid分页条
var pagingBar = new Ext.PagingToolbar({
    id:"MenuGridPanelPagingBar",
    pageSize:18,
    store: StoreAddress,
    displayInfo: true,
    displayMsg: '显示从{0}到{1}条数据，共{2}数据',
    emptyMsg: "没有数据显示"
});        statr：其实参数 limit:每页条数，我以前做的一部分东东

Answer 3

Ext.namespace('AntuYZT.DM.RightConfig');
AntuYZT.DM.RightConfig.MenuRightConfig = function() {    function showEditWindow(selNode, loadData) {
        var editPanel = new Ext.form.FormPanel({
            api: {
                load: Account.GetRoles
            },
            layout: 'form',
            labelWidth: 80,
            defaultType: 'textfield',
            defaults: {
                width: 250             
            },
            paramOrder: 'id',
            paramsAsHash: true,
            labelAlign: 'right',
            items: [{ name: 'Id', xtype: 'hidden' }, { name: 'Name', fieldLabel: '名称', allowBlank: false, maxLength: 100 }, { name: 'DESCRIPTION', fieldLabel: '角色权限' },
            { hiddenName: 'GetRoles', fieldLabel: '默认角色', xtype: 'combo', valueField: 'Key', displayField: 'Value',
                triggerAction: 'all', editable: false, mode: 'remote',
                store: new Ext.data.DirectStore({
                    reader: new Ext.data.JsonReader({
                        successProperty: 'success',
                        idProperty: 'Key',
                        root: 'data',  
                        fields: ['Key', 'Value']
                    }),
                    api: { read: Account.GetRoles }
                })
            }, { id: 'ID', fieldLabel: '编号', xtype: "textarea" },
            { name: 'NAME', fieldLabel: '姓名', xtype: "textarea" },
            { name: 'DESCRIPTION', fieldLabel: '角色', xtype: "textarea" }
            ],
            buttonAlign: 'center',            
            });
            
            
                
            //定义显示窗体
            var win = new Ext.Window({
                title: '菜单应用',
                width: 400,
                resizable: false,
                constrain: true,
                autoHeight: true,
                modal: true,
                plain: true,
                items: [editPanel]
            });
            win.show();
            if (loadData) {
                editPanel.getForm().load({ params: { id: selNode.data.Id} });
            }
        };
     
            //stroe
            var store = new Ext.data.DirectStore({
                directFn: Account.GetRoles,
                paramsAsHash: false,
                paramOrder: 'start|limit',
                root: 'data',
                idProperty: 'Id',
                totalProperty: 'total',
                fields: [
                { name: 'Id', type: 'string' },
                { name: 'Name', type: 'string' },
                { name: 'Description', type: 'string' }            ]
            });
            
                    
           
            
            //列表
            var tg = new Ext.grid.GridPanel({
                title:'角色',
                region : "west",
width : 300,
                store: store,   
               // bbar:bbar,
                sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                cm: new Ext.grid.ColumnModel({
                    align: 'center',
                    columns: [
        new Ext.grid.RowNumberer(),
            {
                id: 'Id',
                header: '编号',
                dataIndex: 'Id',
                hidden: true
            }, {
                header: '名称',
                dataIndex: 'Name',
                width: 120
            }, {
                header: '描述',
                dataIndex: 'Description',
                width: 130
            }
        ]
                }),
                frame: true,
                autoFill: true
            });        
        //创建TreeGrid
        var treeg = new Ext.ux.tree.TreeGrid({
        title: '菜单',
        region : "center",
        loader: new Ext.tree.TreeLoader({
            directFn: Home.GetMenu,
            directFn: Menu.GetMenu
        }),
        enableDD: true,
        columns: [{
            header: '名称',
            dataIndex: 'name',
            width: 200
        }, {
            header: 'URL地址',
            width: 200,
            dataIndex: 'url',
            align: 'left'
        }, {
            header: '排序',
            width: 30,
            dataIndex: 'sort',
            align: 'center'
        }],
        root: new Ext.tree.AsyncTreeNode({ id: '0', text: 'Root' })
    });
      //grid
      store.load({ params: {start:0,limit:10 } });
      
     //分页工具栏
            var pagingToolbar = new Ext.PagingToolbar({ 
                store: store, 
                displayInfo: true, 
                displayMsg: '一共 {2}用户', 
                emptyMsg: "没有数据" ,
                prevText:"上一页",
                nextText:"下一页",
                lastText:"最后页",
                firstText:"第一页"
               });      
    //创建Panel
    var main = new Ext.Panel({
                border:false,
                bbar: pagingToolbar,
                layout:'border',
                items:[treeg,tg] 
    });
            //加载
            JsHelper.ExtTabDoLayout(main);
            return {
                Grid: tg
            };
        } ();
        
        
        上面的是我的代码。。可以指导下 分页吗。？

Answer 4

自己解决了。。但是又出现新的问题了。。就是我start设置为0 limit设置为10 我总记录数为40 我运行起来的话只显示共2页。点击下一页的话还是出现11-20的数据。还点一次的话就出现1-40全部出来了。我调试了下。就是我的程序加载了2次。而且第2次的话我的start是从20开始limit的话也是20.这是怎么啦。。高手指导下