Ext js - 将网格值传递到下面的选项卡/网格面板
Posted
技术标签:
【中文标题】Ext js - 将网格值传递到下面的选项卡/网格面板【英文标题】：Ext js - passing grid value to tab/grid panel below 【发布时间】：2013-04-25 21:49:02 【问题描述】：我又遇到了另一个问题...我有一个页面，顶部有一个网格面板（带有单元格编辑），下面有一个选项卡式面板，每个选项卡内都调用了不同的网格面板...
我的问题是我试图让选项卡内的网格面板随着用户在顶部面板中逐行单击而更改...我知道这可能是侦听器/处理程序的事情，但我有很难找到一个有效的例子......
首先，这是顶部网格面板的代码（我认为侦听器/处理程序需要去的地方：
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel',
height: 350,
width: 700,
title: 'Manufacturer URL Listing with info',
store: store,
tools: [
type: 'save',
tooltip: 'Save Data',
// hidden:true,
handler: function (event, toolEl, panel)
// refresh logic
//rowEditing.cancelEdit();
var sm = grid.getSelectionModel();
Ext.Msg.show(
title: 'Update Data',
msg: 'Are you sure you want to update the item information?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function (btn)
if (btn === 'yes')
store.update();
//store.sync();
store.load();
//Ext.getCmp(grid).getView().refresh();
);
],
columns: [
dataIndex: 'id',
flex: 1,
text: 'ID',
hidden: true
,
dataIndex: 'part_no',
flex: 1,
text: 'Part Number',
editor: 'textfield'
,
dataIndex: 'tddb_retail',
flex: 1.3,
text: 'TD Retail',
editor: 'textfield'
,
dataIndex: 'tddb_jobber',
flex: 1.3,
text: 'TD Retail',
editor: 'textfield'
,
dataIndex: 'tddb_descr',
flex: 1,
text: 'Description',
editor: 'textfield'
,
dataIndex: 'tddb_category',
flex: 1,
text: 'Category',
editor: 'textfield'
,
dataIndex: 'tddb_subcategory',
flex: 1,
text: 'Sub Category',
editor: 'textfield'
, ],
forceFit: true,
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing',
clicksToEdit: 1
)],
//paging bar
bbar: Ext.create('Ext.PagingToolbar',
store: store,
pagesize: 15,
displayInfo: true,
displayMsg: 'Displaying items 0 - 1 of 2',
emptyMsg: "No items to display",
),
renderTo: Ext.getBody(),
);
完整代码（此处包括制表符/第二个网格）：
Ext.Loader.setConfig(
enabled: true
);
Ext.Loader.setPath('Ext.ux', '/include/extjs/examples/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.state.*']);
Ext.onReady(function ()
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
Ext.tip.QuickTipManager.init();
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
//added model inside onready
Ext.define('Manufacturer',
extend: 'Ext.data.Model',
fields: ['id', 'part_no', 'tddb_retail', 'tddb_jobber', 'tddb_descr', 'tddb_category', 'tddb_subcategory']
);
//separated store into unique var for guaranteeRange
var store = Ext.create('Ext.data.Store',
model: 'Manufacturer',
autoLoad: true,
pageSize: 15,
loadMask: true,
proxy:
type: 'direct',
// extraParams: codes_id: 410 ,
api:
// create: inventory.readManu,
read: inventory.readInventory,
update: inventory.updateInventory,
// destroy: worklist.getResults
,
reader:
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success'
,
writer:
type: 'json',
writeAllFields: true,
encode: false,
root: 'data'
,
listeners:
exception: function (proxy, response, operation)
Ext.MessageBox.show(
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
);
,
);
store.getProxy().extraParams =
codes_id: document.getElementById('codes_id').value
;
//create the grid
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel',
height: 350,
width: 700,
title: 'Manufacturer URL Listing with info',
store: store,
tools: [
type: 'save',
tooltip: 'Save Data',
// hidden:true,
handler: function (event, toolEl, panel)
// refresh logic
//rowEditing.cancelEdit();
var sm = grid.getSelectionModel();
Ext.Msg.show(
title: 'Update Data',
msg: 'Are you sure you want to update the item information?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function (btn)
if (btn === 'yes')
store.update();
//store.sync();
store.load();
//Ext.getCmp(grid).getView().refresh();
);
],
columns: [
dataIndex: 'id',
flex: 1,
text: 'ID',
hidden: true
,
dataIndex: 'part_no',
flex: 1,
text: 'Part Number',
editor: 'textfield'
,
dataIndex: 'tddb_retail',
flex: 1.3,
text: 'TD Retail',
editor: 'textfield'
,
dataIndex: 'tddb_jobber',
flex: 1.3,
text: 'TD Retail',
editor: 'textfield'
,
dataIndex: 'tddb_descr',
flex: 1,
text: 'Description',
editor: 'textfield'
,
dataIndex: 'tddb_category',
flex: 1,
text: 'Category',
editor: 'textfield'
,
dataIndex: 'tddb_subcategory',
flex: 1,
text: 'Sub Category',
editor: 'textfield'
, ],
forceFit: true,
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing',
clicksToEdit: 1
)],
//paging bar
bbar: Ext.create('Ext.PagingToolbar',
store: store,
pagesize: 15,
displayInfo: true,
displayMsg: 'Displaying items 0 - 1 of 2',
emptyMsg: "No items to display",
),
renderTo: Ext.getBody(),
);
//start
var assetStore = Ext.create('Ext.data.Store',
storeId: 'assetStore',
fields: ['item_id', 'link', 'filename'],
proxy:
type: 'direct',
// extraParams: codes_id: 410 ,
api:
read: inventory.getAssets
,
reader:
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success'
,
);
assetStore.getProxy().extraParams =
item_id: 1
;
assetStore.load();
Ext.define('assetgrid',
extend: 'Ext.grid.Panel',
alias: 'widget.assetgrid',
width: 425,
height: 250,
collapsible: true,
store: 'assetStore',
columns: [
header: 'Item ID',
dataIndex: 'item_id'
,
header: 'Link',
dataIndex: 'link',
flex: 1
,
header: 'Filename',
dataIndex: 'filename'
],
height: 200,
width: 400
);
Ext.create('Ext.tab.Panel',
width: 700,
height: 200,
activeTab: 0,
items: [
title: 'Item Assets',
xtype: 'assetgrid'
,
title: 'Item Description',
bodyPadding: 10,
html: 'link to item assets tab'
,
title: 'Item Epi',
bodyPadding: 10,
html: 'link to epi'
,
title: 'Item Package',
bodyPadding: 10,
html: 'link to package'
,
title: 'Item Price',
bodyPadding: 10,
html: 'link to price'
,
title: 'YMM Info',
bodyPadding: 10,
html: 'link to ymm'
//,
//listview,listview,listview
],
renderTo: Ext.getBody()
);
);
非常感谢任何帮助！我爱 *** ！！！
【问题讨论】：
【参考方案1】：你的问题不是很清楚，但我猜你想要这样的东西：
//var tabPanel = Ext.create('Ext.tab.Panel',
grid.on(
selectionchange: function (s, sel, e)
tabPanel.setActiveTab(sel[0].data.index);
)
【讨论】：
以上是关于Ext js - 将网格值传递到下面的选项卡/网格面板的主要内容，如果未能解决你的问题，请参考以下文章
如何通过传递对象使用 [ngstyle] 将网格行和网格列动态传递到角度 div 选项卡