Ext grid中得到选择行的方法总结.

在Ext grid中假设有一个名称为grid的对象。

(1)grid.getStore().getRange(0,store.getCount());//得到grid所有的行

(2)grid.getSelectionModel().getSelections()//得到选择所有行

(3)grid.selModel.selections.items;//得到选择所有行

(4)grid.getSelectionModel().getSelected();//得到选择行的第一行


上面是从网上搜来的.下面讲讲自己的开发经验:

1.在开发中,有时候需要在首次导入的GRID STORE的时候把首行数据显示在一个Form中,这种操作分两步执行:
  首先,选择首行,其次就是把值赋过去了..在EXTJS中,它提供了一个非常有用的东东,,(最开始的时候我是手动赋值,每次都先取出然后在setvalue过去了..--菜鸟级的操作)
不说,直接上代码..注意SM中的rowselect就行了.

   var userStore = new Ext.data.Store({//主体要素列选择列表
    proxy:new Ext.data.HttpProxy({url:'./jsp/userManager.jsp?action=user'}),
    reader:new Ext.data.JsonReader({
            totalProperty:'totalProperty',
            root:'root'},
           [
               {name:'userno',mapping:'userno'},
               {name:'username',mapping:'username'},
               {name:'mail',mapping:'mail'},
               {name:'branch',mapping:'branch'},
               {name:'state',mapping:'state'},
               {name:'makedate',mapping:'makedate'}
            ]
         )
    });
    userStore.load();
   
    var cm = new Ext.grid.ColumnModel([
        {header: "用户编码", width: 120, sortable: true,dataIndex: 'userno'},
        {header: "用户名", width: 120, sortable: true, dataIndex: 'username'}
    ]);
var grid = new Ext.grid.GridPanel({
//renderTo:'grid',
//id:'user-form',
columnWidth: 0.25,
title:'用户信息',
store:userStore,
cm:cm,
height: 450,
width:245,
stripeRows: true,
sm: new Ext.grid.RowSelectionModel({
                    singleSelect: true,
                    listeners: {
                        rowselect: function(sm, row, rec) {
                            Ext.getCmp("user-form").getForm().loadRecord(rec);//注意这个东东,很有用的直接赋值语句,,,注意在FORM中的name一定在和GRID中SOTRE的索引列名相同..
                        }
                    }
                }),
deferowrender:false,
listeners:{
render: function(g) {
                g.getSelectionModel().selectRow(0);                     //定义在首次导入的时候记录第一次...
    },
            delay: 3,//延迟..保证数据在导入之后再执行..不然会找不到数据的哦~~~
'rowclick':function (grid, rowIndex, columnIndex, e)
{

var record = grid.getStore().getAt(rowIndex);   //Get the Record
userno = record.get('userno');
inUserSetStore.proxy = new Ext.data.HttpProxy({url:'./jsp/userManager.jsp?action=inuserset&userno='+userno+'&projectno='+projectno});
inUserSetStore.load();
outUserSetStore.proxy = new Ext.data.HttpProxy({url:'./jsp/userManager.jsp?action=outuserset&userno='+userno+'&projectno='+projectno});
outUserSetStore.load();


}
}
    });

//个人属性
    var userForm = new Ext.FormPanel({
    id:'user-form',
    //renderTo:'fm',
    labelWidth: 75, // label settings here cascade unless overridden
        frame:true,
        title: '个人属性',
        layout:"column",
        bodyStyle : 'padding:3px;',
items:[{
columnWidth:.45,
layout:"form",
items:[{
xtype:'textfield',
fieldLabel:'用户编码',
name:'userno',
id:'userno'
},{

fieldLabel:'部门',
xtype:'combo',
store: branchCombo,
valueField :'itemcode',
displayField: 'itemname',
mode: 'remote',
forceSelection: true,
disabledkeyfilter:false,
emptyText:'请选择',
editable: false,
triggerAction: 'all',
id:'branch'
},{
xtype:'textfield',
fieldLabel:'入机时间',
name:'makedate',
disabled:true,
id:'makedate' 
},{
xtype:'textfield',
fieldLabel:'邮箱' ,
name:'mail',
id:'mail'
}]
}, {
columnWidth:.45,
layout:'form',
baseCls:'x-plain',
items:[{
xtype:'textfield',
fieldLabel:'用户姓名' ,
name:'username',
id:'username'
},{
xtype : 'combo',
fieldLabel : '状态',
name : 'state',
store:stateCombo,
displayField : 'itemname',
valueField : 'itemcode',
mode : 'remote',
forceSelection: true,
disabledkeyfilter:false,
emptyText:'请选择',
editable: false,
triggerAction: 'all',
allowBlank: false
},{
xtype:'textfield',
fieldLabel:'操作者',
name:'operator',
disabled:true,
id:'operator'  
}]
}],
         buttons: [{
            text: '新建用户',
            id:'adduser',
            handler:function(e){
            //赋值给个人属性模块
userno = Ext.getDom('userno').value;
branch = Ext.getDom('branch').value;
mail = Ext.getDom('mail').value;
state = Ext.getDom('state').value;
username = Ext.getDom('username').value;

            Ext.Ajax.request({
        url : 'jsp/userManager.jsp',
        params : {
action : 'add',
userno : userno,
branch : branch,
mail : mail,
state : state,
operator:app.uno,
username : username
},
method : 'post',
        success : function(response, option) {
        var obj = Ext.util.JSON.decode(response.responseText);// 返回的信息
            userStore.reload();
    Ext.MessageBox.alert("操作信息", obj.flag);      
},
failue : function() {
Ext.Msg.alert("操作信息", "请检查网络环境");
}
});
            }
        },{
           text: '更新用户',
           id:'updateuser',
            handler:function(){
            //赋值给个人属性模块

branch = Ext.getDom('branch').value;
mail = Ext.getDom('mail').value;
state = Ext.getDom('state').value;
username = Ext.getDom('username').value;

            Ext.Ajax.request({
        url : './jsp/userManager.jsp',
        params : {
action : 'update',
userno : userno,//不能修改，
branch : branch,
mail : mail,
state : state,
operator:app.uno,
username : username
},
method : 'post',
        success : function(response, option) {
        var obj = Ext.util.JSON.decode(response.responseText);// 返回的信息
            userStore.reload();
    Ext.MessageBox.alert("操作信息", obj.flag);      
},
failue : function() {
Ext.Msg.alert("操作信息", "请检查网络环境");
}
});
            }
       },{
        text: '删除用户',
        id:'deluser',
            handler:function(){
            //赋值给个人属性模块
userno = Ext.getDom('userno').value;
branch = Ext.getDom('branch').value;
mail = Ext.getDom('mail').value;
state = Ext.getDom('state').value;
username = Ext.getDom('username').value;

            Ext.Ajax.request({
        url : './jsp/userManager.jsp',
        params : {
action : 'del',
userno : userno,
branch : branch,
mail : mail,
state : state,
operator:app.uno,
username : username
},
method : 'post',
        success : function(response, option) {
        var obj = Ext.util.JSON.decode(response.responseText);// 返回的信息
            userStore.reload();
    Ext.MessageBox.alert("操作信息", obj.flag);      
},
failue : function() {
Ext.Msg.alert("操作信息", "请检查网络环境");
}
});
            }
        }]

    });

上面的功能实现在首次导入GRID的时候,把第一行相应的数据显示在 个人属性的FORM中,同时在FORM中也实现了增加,修改及删除的操作功能...

评论

1 楼 hzxlb910 2013-06-20  

代码排的不好