extjs grid中 当单击某一单元格时,可以获得该行的数据记录,该怎么做

extjs grid中 当单击某一单元格时,可以获得该行的数据记录,该怎么做,第1张

楼上回答为加过selectModel的情况下并改过select

事件绑定后才适用

通用的方式是

在建GRID时,加listener

new

ExtgridEditorGridPanel({

,

listeners:

{

cellclick

:

function(

Grid,

rowIndex,

columnIndex,e

){//使用cellclick

事件

STOREgetAt(rowIndx);//STORE为你为GRID绑定的store

}

}

})

这样既可

1 使用form表单提交

使用表单提交是调用了表单的submit方法,其配置项包括url、method等。这种方式能够以JSON的形式提交参数信息。

var myform = Extcreate('ExtformPanel',{undefined

defaultType: 'textfield',

items:[{undefined

fieldLabel : 'Name',

name : 'name'

},{undefined

fieldLabel: 'Gender',

name : 'gender'

},{undefined

fieldLabel : 'Age',

name: 'age'

}],

buttons: [{undefined

text : 'load',

handler : function(){undefined

thisup('form')getForm()submit({undefined

url: '/request/userinfo',

method : 'POST',

success : function(form, action){undefined

consolelog(form);

ExtMsgalert('title', 'load success');

});

}]);

2 使用Ajax异步提交

将上述handler方法中的内容换成一下代码即可。在Ajax的request方法中是一个配置对象,其配置参数包括url,type,params。其中params表示要提交的参数,在此例中是从form表单中通过getValues()方法获得的。该种方式也能将参数一JSON的方式提交到后台,与一个对象匹配。

var values = thisup('form')getForm()getValues();

ExtAjaxrequest({undefined

url:'/request/userinfo',

headers : {undefined'userHeader': 'userMsg'},

type:'POST',

params:values,

success:function(response){undefined

var data = responseresponseText;

consolelog(data);

consolelog("success");

},

});

3 使用ExtdataStore

在项目中经常需要通过提交一些数据来从后台获取相应的信息。例如,在表单中输入某个人的id和name就可以查出它的相关信息并在前台显示。一个关于extjs的例子如下:

//data Model

Extdefine('User',{undefined

extend: 'ExtdataModel',

fields: [{name:'name',type:'string'},

{name:'gender',type:'string'},

{name:'age',type:'string'}

]

});

var userStore = Extcreate('ExtdataStore',{undefined

model: 'User',

pageSize: 20,

// autoLoad : true,

proxy: {undefined

type : 'ajax', //提交数据的方式

url : '/request/userinfo',

reader : { //以json的形式读取将要提交的数据

type : 'json',

root : 'resultList'

},

writer : {undefined

type : 'json'

},

actionMethods : {undefined

create : 'POST'

}

},

});

//grid Panel

Extcreate('ExtgridPanel',{undefined

store: userStore,

columns: [

{header : 'Name', dataIndex : 'name'},

{header : 'Gender', dataIndex : 'gender'},

{header : 'Age', dataIndex : 'age'}

],

height: 200,

width: 400,

renderTo: 'div2'

});

//form Panel

var myform = Extcreate('ExtformPanel',{undefined

defaultType: 'textfield',

items:[{undefined

fieldLabel: 'Name',

name: 'name'

},{undefined

fieldLabel: 'Gender',

name: 'gender'

},{undefined

fieldLabel : 'Age',

name : 'age'

}],

buttons: [{undefined

text: 'load',

handler: function(){undefined

var values = thisup('form')getForm()getValues();

consolelog(values);

userStoreproxyextraParams=values;

userStoreloadPage(1);

}

}

});

在handler方法中获取form表单的参数后,赋值给userStoreproxyextraParams,然后调用userStoreloadPage(1)。调用loadPage()方法时,会委托给proxy对象去后台获取数据。所以对proxy的配置是核心。使用这个方式从后台获取数据时,后台接口返回的对象应该包括一个List字段,list中包含所需要的具体信息。比如

@ReponseBody

public UserInfoResp getUserInfo(User user) {undefined

}

UserInfoResp应该像这样有一个List字段

class UserInfoResp {undefined

List<User> resulltList;

}

获取所有选中的节点代码如下所示:

TreePanelgetChecked();

遍历获取所有的选中节点数据:

var selNodes = TreePanel1getChecked();

var userList = new Array();

//遍历获取所有的节点数据

Exteach(selNodes, function (node) {

                //子节点 也就是用户节点

       if (nodedataleaf) {

                    var user = new Object();

                    username = nodedatatext;

                    userno = nodedataNodeID;

                    userListpush(user);

    }

});

gridaddListener("rowdblclick", function(grid, rowIndex, e){//添加行鼠标双击事件

var record = gridgetStore()getAt(rowIndex);//获取这一行的数据

var data = recordget('company');// 根据get('单元格ID') 来获取本行中 某个单元格数据

ExtMessageBoxalert("show",data);

});

var e = MainGrid.getSelectionModel().selection.record;e.set(&#39;depid&#39;, &#39;10000&#39;);e.set(&#39;depname&#39;, &#39;总部&#39;);var depid = e.get(&#39;depid&#39;);var depname = e.get(&#39;depname&#39;);这个record其实就是一个json对象

你可以把问题分开来看~~

你先把tab页正好填充整个页面,

然后让panel填充整个tab页面

再让grid填充整个panel,

关于高度和宽度~~

当前页面的高度和宽度和可以调的,我一般都是这么调的,参考一下吧

extgetbody()getviewsize()width;

extgetbody()getviewsize()height;

具体大小直接调调就ok了(+数字或这-数字)

以上就是关于extjs grid中 当单击某一单元格时,可以获得该行的数据记录,该怎么做全部的内容,包括:extjs grid中 当单击某一单元格时,可以获得该行的数据记录,该怎么做、extjs怎么获取后台的数据或者是变量。。。求大神速回、如何获取Ext treepanel树内所有选中的节点数据之getChecked等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/9632095.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-30
下一篇 2023-04-30

发表评论

登录后才能评论

评论列表(0条)

保存