ExtJs 3.4：将所选项目从一个网格移动到另一个网格按钮上 [英] ExtJs 3.4 : Move selected items from one grid to another on a button click
本文介绍了ExtJs 3.4：将所选项目从一个网格移动到另一个网格按钮上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
var drop_pick_grid = new Ext.grid.GridPanel（ {
store：dropPickGridStore，
cm：new Ext.grid.ColumnModel（[selectModel，{
sortable：true，
header：Drop / Pick Loc，
dataIndex：'locationName'，
width：170，
renderer：function（value，metaData，record，rowIndex，
colIndex，store）{
var refColor = record.data .tourTypeColor;
//console.log(record）;
metaData.attr ='style =background-color：'+ refColor +';';
return record.get 'locationName'）;
}
}，{
header：Town / City，
sortable：true，
dataIndex：'city'，
width：120
}，{
header：Address，
sortable：true，
dataIndex：'addr'，
width：170
}，{
header：EST.Un / Load Time，
sortable：true，
dataIndex：'estimateTime'，
width：100
}]）
sm：new Ext.grid.CheckboxSelectionModel（），
// width：570，
// height：390，
autoHeight：true，
autoWidth：true，
frame：true，
iconCls：'icon-grid'，
renderTo：document .body
}）;
这是我的dropPickGridStore：
var dropPickGridStore = new Ext.data.JsonStore（{
fields：[{
name：'locationCode'
}，{
name：' locationName'
}，{
name：'city'
}，{
name：'addr'
}，{
name：'estimatedTime'
}，{
name：'tourTypeColor'
}]，
root：'dropPickLoc'，
idProperty：'locationCode'，
// autoDestroy ：true，
autoLoad：true，
proxy：new Ext.data.HttpProxy（{
url：http：//+ host +：+ port + /+ projectName +/
+PendingDropPicks
}），
reader：{
type：'json'，
root ：'dropPickLoc'
// idProperty：'locationName'，
}，
}）;
我的Json数据就是这样。
{'dropPickLoc'：[{'locationCode'：'10007'，'locationName'：'Gayan Hardware'，'city'：'Galle'，'addr'：'121，Wijaya Rd，Galle'，'estimatedTime'：'120'，'tourTypeColor'：'blue'}，{'locationCode'：'10004'，'locationName'：'Kandy Hardware'，'city'：'Kandy'，'addr '：'11，Kurunagala Road，Kandy'，'estimatedTime'：'40'，'tourTypeColor'：'blue'}，{'locationCode'：'10009'，'locationName'：'Mala Stores'，'city' '哥伦比亚'''''''''''''''''''''''''''''''''''''' ，'城市'：'Kurunagala'，'addr'：'12B，Lumbini Udyanaya，Kurinagala'，'estimatedTime'：'45'，'tourTypeColor'：'yellow' }，'locationCode'：'10000'，'locationName'：'Priya Ceramic'，'city'：'Nugegoda'，'addr'：'15，Nugegoda'，'estimatedTime'：'40'，'tourTypeColor' '''''''''''''''''''''''''''''''''' tour颜色'：'绿色'}，{'locationCode'：'10008'，'locationName'：'Saman Stores'，'city'：'Polgahawela'，'addr'：'111，Kurunagala Rd，Kurunagala' ：'120'，'tourTypeColor'：'blue'}，{'locationCode'：'10006'，'locationName'：'Sell-X Computors'，'city'：'Ratnapura'，'addr'：'12，Tiriwanakatiya ，估计时间：'120'，'tourTypeColor'：'绿色'}，{'locationCode'：'10001'，'locationName'：'超级商店'，'城市'：'康提' ：' 16，Kandy Road'，'estimatedTime'：'120'，'tourTypeColor'：'blue'}，{'locationCode'：'10005'，'locationName'：'Wijesingha Hardware'，'city'：'Galle'地址：'113A，Wackewella Road，Galle'，'estimateTime'：'120'，'tourTypeColor'：'green'}]}
用户可以从此网格中选择项目并将其移动到另一个网格中（按钮点击）。这是我的第二个格子窗格。
var gps_grid = new Ext.grid.GridPanel（{
store：estore ，
cm：new Ext.grid.ColumnModel（[selectModel，{
sortable：true，
header：Drop / Pick Loc，
dataIndex：'locationName'，
width：170
}，{
header：GPS，
sortable：true，
dataIndex：'gps'，
width：100
$ b标题：EST.Un / Load Time，
可排序：true，
dataIndex：'estimatedTime'，
width：100
} ，
$ b可分类：true，
dataIndex：'colorCode'，
width：30
}]，
sm：selectModel，
// width：435，
// height：400，
autoHeight：true，
autoWidth：true，
frame：true，
iconCls：'icon-grid'，
renderTo：document.body
}）;
这是我尝试将所选项目移动到第二个网格面板。
这是我的按钮的监听器。
监听器：{
click：function ）{
if（drop_pick_grid.getSelectionModel（）。hasSelection（））{
selectedItems = drop_pick_grid.getSelectionModel（）。getSelections（）;
console.log（selectedItems）;
var myReader = new Ext.data.ArrayReader（{}，[{
name：'locationName'，
dataIndex：'locationName'
}，{
name ：'estimatedTime'，
dataIndex：'estimatedTime'
}]）;
var gpsGridStore = new Ext.data.Store（{
data：selectedItems，
reader：myReader，
autoLoad：true
}）;
console.log（gpsGridStore）;
}
}
}
我试图创建一个新的存储我的第二个网格（gpsGridStore）与第一个网格面板中选定的项目。我把它在我的firebug控制台打印。但是gpsGridStore项目是空的。即locationName和estimatedTime取空值。
data
Object {locationName =，estimatedTime =}
估计时间
locationName
这是selectItems的控制台输出：
data
Object {locationCode = 10000，locationName =Priya Ceramic，city =Nugegoda，更多...}
addr
15，Nugegoda
city
Nugegoda
估计时间
40
locationCode
10000
locationName
Priya Ceramic
tourTypeColor
yellow
什么是我的代码错了？我会非常感谢任何人如果能够很好地解释我的代码中的错误，我该如何解决它。
Thanx很多
解决方案
不要创建另一个商店，只需从第一个网格的商店中删除所选的记录，并将其添加到您的第二个网格的商店。视图将自动更新，以下数据更改。
以下是按钮侦听器的代码应如下所示：
var records = dropPickGrid.selModel.getSelections（）;
dropPickGrid.getStore（）。remove（records）;
gpsGrid.getStore（）。add（records）;
如果您的第二个网格使用不同的模型（即不同的商店字段），则可以创建新记录选择而不是使用相同的选择。但是，您仍然不应该尝试改变电网的存储。使用记录。
对于像您这样的复杂示例，将所有内容放在正在运行的小提琴中将有助于快速和来自这里的质量答案;）
I have a check box model grid which is loaded from JsonStore.
var drop_pick_grid = new Ext.grid.GridPanel({
store : dropPickGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170,
renderer : function(value, metaData, record, rowIndex,
colIndex, store) {
var refColor = record.data.tourTypeColor;
//console.log(record);
metaData.attr = 'style="background-color:' + refColor + ';"';
return record.get('locationName');
}
}, {
header : "Town/City",
sortable : true,
dataIndex : 'city',
width : 120
}, {
header : "Address",
sortable : true,
dataIndex : 'addr',
width : 170
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
} ]),
sm : new Ext.grid.CheckboxSelectionModel(),
//width : 570,
//height : 390,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid',
renderTo : document.body
});
This is my dropPickGridStore:
var dropPickGridStore = new Ext.data.JsonStore({
fields : [ {
name : 'locationCode'
}, {
name : 'locationName'
}, {
name : 'city'
}, {
name : 'addr'
}, {
name : 'estimatedTime'
}, {
name : 'tourTypeColor'
} ],
root : 'dropPickLoc',
idProperty : 'locationCode',
//autoDestroy : true,
autoLoad : true,
proxy : new Ext.data.HttpProxy({
url : "http://" + host + ":" + port + "/" + projectName + "/"
+ "PendingDropPicks"
}),
reader : {
type : 'json',
root : 'dropPickLoc'
//idProperty : 'locationName',
},
});
My Json data is like this.
{'dropPickLoc':[{ 'locationCode' : '10007', 'locationName' : 'Gayan Hardware', 'city' : 'Galle', 'addr' : '121, Wijaya Rd, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10004', 'locationName' : 'Kandy Hardware', 'city' : 'Kandy', 'addr' : '11, Kurunagala Road, Kandy', 'estimatedTime' : '40', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10009', 'locationName' : 'Mala Stores', 'city' : 'Colombo', 'addr' : '11B, Thimbirigasyaya, Colombo', 'estimatedTime' : '45', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10003', 'locationName' : 'Namal Ceramic', 'city' : 'Kurunagala', 'addr' : '12B, Lumbini Udyanaya, Kurinagala', 'estimatedTime' : '45', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10000', 'locationName' : 'Priya Ceramic', 'city' : 'Nugegoda', 'addr' : '15, Nugegoda', 'estimatedTime' : '40', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10002', 'locationName' : 'Sam Stores', 'city' : 'Galle', 'addr' : '46A, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } , { 'locationCode' : '10008', 'locationName' : 'Saman Stores', 'city' : 'Polgahawela', 'addr' : '111, Kurunagala Rd, Kurunagala', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10006', 'locationName' : 'Sell-X Computors', 'city' : 'Ratnapura', 'addr' : '12, Tiriwanakatiya, Ratnapura', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } , { 'locationCode' : '10001', 'locationName' : 'Super Stores', 'city' : 'Kandy', 'addr' : '16, Kandy Road', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10005', 'locationName' : 'Wijesingha Hardware', 'city' : 'Galle', 'addr' : '113A, Wackewella Road, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } ]}
User can select items from this grid and move them into another grid(on button click). Here is my second grid pane;.
var gps_grid = new Ext.grid.GridPanel({
store : estore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170
}, {
header : "GPS",
sortable : true,
dataIndex : 'gps',
width : 100
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
}, {
header : "",
sortable : true,
dataIndex : 'colorCode',
width : 30
} ]),
sm : selectModel,
//width : 435,
//height : 400,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid',
renderTo : document.body
});
This is my attempt to move selected items to second grid panel.
This is a listener for my button.
listeners: {
click: function(){
if (drop_pick_grid.getSelectionModel().hasSelection()) {
selectedItems = drop_pick_grid.getSelectionModel().getSelections();
console.log(selectedItems);
var myReader = new Ext.data.ArrayReader({}, [{
name: 'locationName',
dataIndex: 'locationName'
}, {
name: 'estimatedTime',
dataIndex: 'estimatedTime'
} ]);
var gpsGridStore = new Ext.data.Store({
data : selectedItems,
reader : myReader,
autoLoad : true
});
console.log(gpsGridStore);
}
}
}
I tried to create a new store for my second grid (gpsGridStore) with selected items from the first grid panel. I lete it to print in my firebug console. But gpsGridStore items are empty. i.e. locationName and estimatedTime take empty values.
data
Object { locationName="", estimatedTime=""}
estimatedTime
""
locationName
""
And this the console output for selectedItems:
data
Object { locationCode="10000", locationName="Priya Ceramic", city="Nugegoda", more...}
addr
"15, Nugegoda"
city
"Nugegoda"
estimatedTime
"40"
locationCode
"10000"
locationName
"Priya Ceramic"
tourTypeColor
"yellow"
What's wrong with my codes ? I would be much appreciated if anyone please be so kind enough to explain whats the error in my codes and how can I fix it.
Thanx a lot
解决方案
Don't create another store, just remove the selected records from the store of the first grid, and add them to the store of your second grid. The view will be updated automatically, following data changes.
Here's what the code of your button listener should look like:
var records = dropPickGrid.selModel.getSelections();
dropPickGrid.getStore().remove(records);
gpsGrid.getStore().add(records);
If your second grid uses a different model (i.e. different store fields), you can create new records from the selection instead of using the same ones. But still, you should not try to change the store of the grid. Work with records.
For complex examples like yours, putting everything in a running fiddle will help get fast and quality answers from here ;)
这篇关于ExtJs 3.4：将所选项目从一个网格移动到另一个网格按钮上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
