I'm back with another issue... I have a page that has a grid panel (with cell editing) on top and a tabbed panel beneath it with a call to different grid panels inside each tab...
My problem is I'm trying to get the grid panels WITHIN THE TABS to change as the user clicks from row to row in the top panel... I know it's probably a listener/handler thing, but I'm having trouble finding an example that works...
First, here's the code for the top grid panel (where I think the listener/handler needs to go:
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(),
});
Full code (including tab/second grid here):
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()
});
});
Any help is greatly appreciated! I LOVE StackOverflow!!!
