extjs grid搜索分页实例

extjs grid搜索分页实例

最近要做一个extjs.grid的搜索，差点就要自己遍历data数据了，幸好，多看了看资料！知道只要在ds.load()之内做一些小的配置就能简单的实现查询！！！

以后做东西之前，不要茫茫然的拿过来就做，先上网查查，在做！站在巨人的肩膀上么，才能看得远。

谢谢一下这篇日志的发表人。

 

<script type="text/javascript">

Ext.onReady(function(){

var ds = new Ext.data.Store({//这是数据源

  proxy : new Ext.data.HttpProxy({url:'index.php?model=user&action=list&'}),

        reader: new Ext.data.JsonReader({

   root: 'topics',

            totalProperty: 'totalCount',

            id: 'user_id'

   },[

   'user_id','username','real_name','telephone','station_status','headship'

       ])

    });

var colModel = new Ext.grid.ColumnModel([//定义列

   {header:'ID',width:50,sortable:true,dataIndex:'user_id'},

   {id:'title',header:'用户名', width:100,sortable:true,dataIndex:'username'},

   {header:'真实姓名',width:100,sortable:true,dataIndex:'real_name'},

   {header:'电话',width:100,sortable:true,dataIndex:'telephone'},

   {header:'岗位状态',width:100,sortable:true,dataIndex:'station_status'},

   {header:'职务',width:100,sortable:true,dataIndex:'headship'}

  ]);

var tb = new Ext.Toolbar('north-div');//创建一个工具条



tb.add({

  text: '添加',

        handler: newUser

  },{

        text: '编辑',

        handler: editUser

  },{

        text: '删除',

        handler: delUser

});

  

var grid = new Ext.grid.GridPanel({//列表

    border:false,

    region:'south',

    height:500,

    loadMask: true,

    el:'center',

    title:'条目列表',

    store: ds,

    cm: colModel,

    autoScroll: true,

    bbar: new Ext.PagingToolbar({

     pageSize: 20,

     store: ds,

     displayInfo: true,

     displayMsg: '第{0} 到 {1} 条数据 共{2}条',

     emptyMsg: "没有数据"

          })

            });

var top = new Ext.FormPanel({//这里是搜索表单

        buttonAlign:'right',

  labelWidth:70,

  region:'center',

        frame:true,

        title: '搜索',

        items: [{

             layout:'column',

             items:[{

                 columnWidth:.33,

                 layout: 'form',

                 items: [{

                     xtype:'textfield',

                     fieldLabel: '用户名',

                     id: 'username',

      name: 'username',

                     anchor:'90%'

                 }]

             },{

                 columnWidth:.33,

                 layout: 'form',

                 items: [{

                     xtype:'textfield',

                     fieldLabel: '姓名',

                     name: 'real_name',

      id: 'real_name',

                     anchor:'90%'

                 }]

             },{

                 columnWidth:.33,

                 layout: 'form',

                 items: [{

                     xtype:'textfield',

                     fieldLabel: 'Email',

                     name: 'email',

      id: 'email',

                     vtype:'email',

                     anchor:'90%'

                 }]

             }]

         }

        ],

        buttons: [{

            text: '保存',

   handler:function(){

                                // 这里是关键，重新载入数据源，并把搜索表单值提交

    ds.load({params:{start:0, limit:20,

     username:Ext.get('username').dom.value,

     real_name:Ext.get('real_name').dom.value,

     email:Ext.get('email').dom.value}});

   }

        },{

         text: '重置',

   handler:function(){top.form.reset();}

        }]

    });

var viewport = new Ext.Viewport({

        layout:'border',

        items:[{

     border:false,

     region:'north',

     contentEl:'north-div',

     tbar:tb,

     height:26

   },top,

   grid

  ]}

);

ds.load({params:{start:0, limit:20}});

        // 这里很关键，如果不加，翻页后搜索条件就变没了，这里的意思是每次数据载入前先把搜索表单值加上去，这样就做到了翻页保留搜索条件了

ds.on('beforeload',function(){

  Ext.apply(

  this.baseParams,

  {

   username:Ext.get('username').dom.value,

   real_name:Ext.get('real_name').dom.value,

   email:Ext.get('email').dom.value

  });

});

function newUser() {

  parent.newTab('400012','添加用户','index.php?model=user&action=add');

}

function editUser() {

  var s = grid.getSelectionModel().getSelections();

  if (s.length==0) {

   Ext.Msg.alert('出错啦','你还没有选择要操作的记录！');

  }

  for (i=0;i<s.length;i++) {

   var id = s[i].id;

   parent.newTab('400012'+id,'编辑用户','index.php?model=user&action=add&user_id='+id);

  }

}

function delUser() {

  var ids = getId(grid);

  if (ids) {

   Ext.Msg.confirm('确认', '真的要删除吗？', function(btn){

    if (btn == 'yes'){

     Ext.Ajax.request({

        url: 'index.php?model=user&action=delete&ids='+ids,

        success: function(result){

       json = Ext.util.JSON.decode(result.responseText);

       ds.reload();

       }

     });

    }

   });  

  } else {

   Ext.Msg.alert('出错啦','你还没有选择要操作的记录！');

  }

}

loadend();

});

</script>

<div id="north-div"></div>

<div id="center"></div>[/i] 

 

 

来源：http://www.phpchina.com/bbs/redirect.php?tid=60381&goto=lastpost&sid=wHsSC8