タブ内でのグリッドの使用に関する他の投稿を確認し、extend/xtype アプローチを選択しています...ただし、タブ内のグリッドへの参照を追加するとエラーが発生します:
Ext.define('mygrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
width:425,
height:250,
collapsible:true,
title:'Simple ListView <i>(0 items selected)</i>',
renderTo: Ext.getBody(),
store: store,
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},
columns: [{
text: 'File',
flex: 50,
dataIndex: 'name'
},{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'm-d h:i a',
flex: 35,
dataIndex: 'lastmod'
},{
text: 'Size',
dataIndex: 'size',
tpl: '{size:fileSize}',
align: 'right',
flex: 15,
cls: 'listview-filesize'
}]
});
Ext.create('Ext.tab.Panel', {
width: 700,
height: 200,
activeTab: 0,
items: [
{
title: 'Item Assets',
xtype: 'listView'
},
{
title: 'Item Assets',
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()
});
私が得ているエラーは次のとおりです。
"ext-all-debug.js (5040行目)
TypeError: 名前が定義されていません
if (name === from || name.substring(0, from.length) === from) {"
「xtype: listView」をコメントアウトすると、タブが正しく表示されます....
私が見逃しているのは単純なものだと確信しています...
完全なコードはこちら:
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();
//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(),
}
);
Ext.define('mygrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
width:425,
height:250,
collapsible:true,
title:'Simple ListView <i>(0 items selected)</i>',
renderTo: Ext.getBody(),
store: store,
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},
columns: [{
text: 'File',
flex: 50,
dataIndex: 'name'
},{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'm-d h:i a',
flex: 35,
dataIndex: 'lastmod'
},{
text: 'Size',
dataIndex: 'size',
tpl: '{size:fileSize}',
align: 'right',
flex: 15,
cls: 'listview-filesize'
}]
});
Ext.create('Ext.tab.Panel', {
width: 700,
height: 200,
activeTab: 0,
items: [
{
title: 'Item Assets',
xtype: 'listView'
},
{
title: 'Item Assets',
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()
});
});
どんな助けでも大歓迎です！