Related
I am developing an extjs and spring application. I got stuck in rendering view in new tab in center region of viewport. I have not able to create an instance of the view using ref in controller. please help and let me know where i am doing wrong..
Controller js
Ext.define('Book.controller.NewBook', {
extend : 'Ext.app.Controller',
views : ['book.NewBook'],
refs : [ {
ref : 'bookViewport',
selector : 'viewport' //whatever the xtype is of your viewport class
}, { ref : 'newBookForm',
selector : '#newBook panel',
autoCreate: true//whatever the xtype is of your viewport class
} ],
init : function() {
// add the components and events we listen to
this.control({
'viewport > panel' : {
render : this.onPanelRendered
},
'viewport' : {
afterrender : this.onNewBookLinkClick
}
});
},
onNewBookLinkClick : function() {
var view = this.getBookViewport();
var newBook = this.getNewBookForm();
alert(newBook.id);
Ext.get('tab1').on('click', function() {
var tabExists = false;
var p1=Ext.getCmp('panel').getLayout();
var p2=Ext.getCmp('panel');
var items = p2.items;
for (var i = 0; i < items.length; i++) {
alert(items[i].id);
if (items[i].id === 'NewBook') {
this.getViewport().panel.setActiveTab(i);
tabExists = true;
this.getViewport().panel.setActiveTab(i);
}
}
if (!tabExists) {
p2.insert(1, newBook);
p2.setActiveTab(0);
}
});
},
onPanelRendered : function() {
}
});
View
Ext.define('Book.view.book.NewBook', {
extend : 'Ext.form.Panel',
alias : 'widget.newBook',
config: {},
constructor: function (config) {
this.initConfig(config);
return this.callParent(arguments);
},
initComponent: function () {
Ext.apply(this, {
layout : 'vbox',
contentEl : 'center2',
title : 'New Book',
store : 'Books',
id : 'NewBook',
defaults : {
bodyPadding : 10
},
items : [ {
xtype : 'panel',
width : 900,
collapsible : true,
title : 'Book Details',
defaults : {
width : 230,
cls : 'form-field'
},
defaultType : 'textfield',
items : [ {
fieldLabel : 'Book Id',
name : 'bookId',
value : '',
// validator : function(event) {
// if (!(/[0-9]/.test(this.getValue()))) {
// return "This Field should be in Numbers only";
// }
// return true;
// }
} ]
}]
});
this.callParent(arguments);
}
});
ViewPort
Ext.define('Book.view.Viewport', {
extend: 'Ext.container.Viewport',
alias : 'widget.viewport',
requires: [
'Book.view.book.catCombo',
'Book.view.book.subCatCombo',
'Book.view.book.NewBook',
'Book.view.book.BookGrid',
'Book.view.book.SearchBook',
'Book.view.book.ModifyBook'
],
id : 'borderViewPort',
layout : 'border',
items : [
Ext.create('Ext.Component', {
region : 'north',
height : 0
}),
{
region : 'west',
stateId : 'navigation-panel',
id : 'west-panel',
title : 'Navigation Menu',
split : true,
width : 200,
minWidth : 175,
maxWidth : 400,
collapsible : true,
animCollapse : true,
margins : '0 0 0 5',
layout : 'accordion',
items : [ {
contentEl : 'west',
title : '<b>Books</b>',
html : '<div id="west" class="x-hide-display"><ul> <li>New Book</li> <li>Search Book</li> </ul></div>',
iconCls : 'nav'
}, {
title : 'Purchase Order',
iconCls : 'settings'
}, {
title : 'Total Sales',
iconCls : 'info'
} ]
},
panel = Ext.create('Ext.tab.Panel', {
region : 'center',
id : 'panel',
deferredRender : false,
activeTab : 0
}) ]
});
app.js
Ext.application({
name: 'Book',
models: ['Book'],
stores: ['Books','BookCategories','BookSubCategories'],
controllers: ['NewBook', 'SearchBook'],
autoCreateViewport: true,
launch: function() {
Ext.create('Book.view.Viewport');
}
}
);
Your center region config is incorrect since you have defined it as panel variable, but not actually made it a child of the viewport items.
Instead, use this approach:
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
},{
region: 'west',
stateId : 'navigation-panel',
id : 'west-panel',
title : 'Navigation Menu',
split : true,
width : 200,
minWidth : 175,
maxWidth : 400,
collapsible : true,
animCollapse : true,
margins : '0 0 0 5',
layout : 'accordion',
items : [ {
contentEl : 'west',
title : '<b>Books</b>',
html : '<div id="west" class="x-hide-display"><ul> <li>New Book</li> <li>Search Book</li> </ul></div>',
iconCls : 'nav'
}, {
title : 'Purchase Order',
iconCls : 'settings'
}, {
title : 'Total Sales',
iconCls : 'info'
}]
// the west region might typically utilize a TreePanel or a Panel with Accordion layout
},{
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
items: [{
title: 'Tab 1'
},{
title: 'Tab 2'
}]
}]
});
This displays correctly, you should see how you can adapt this to your view definition.
The problem is solved by removing contentEl : 'center2', tag from my NewBook view.
contentEl uses the target element as its body content (the panel could still be rendered to any other element)
Using ExtJS 4.2.2
I have a grid, and when I right click the grid and select Modify from my context menu, a Window with a form is created, and on render, I get the grid selected row record and use the form loadRecord to load the record.
Firebug shows the record was loaded into the form fields, but in the rendered form the fields are enpty.
Any ideas?
Here is some code that illustrates the issue.
If you put a breakpoint at the line with var test = 'test'; you will see the data is loaded into the form's textfields, but then continue past the break point and see the textfields do not reflect the data.
Ext.onReady(function() {
Ext.define('com.myCompany.MyGridModel', {
extend : 'Ext.data.Model',
fields : [{
name : 'name',
type : 'string'
}, {
name : 'address',
type : 'string'
}, {
name : 'type',
type : 'string'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'com.myCompany.MyGridModel',
proxy: {
type: 'ajax',
url: 'centers.json',
reader: {
type: 'json',
root: 'centers'
}
}
});
store.load();
var grid = Ext.create('Ext.grid.Panel', {
layout: 'fit',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
name: 'name'
}, {
text: 'IP Address',
dataIndex: 'address',
name: 'address'
}, {
text: 'Type',
dataIndex: 'type',
name: 'type'
}],
renderTo: Ext.getBody(),
listeners: {
itemcontextmenu : function(view, record, item, index, event){
var selectedItem = record;
event.preventDefault();
new Ext.menu.Menu({
items: [{
text : 'Modify',
handler : function(widget, event) {
Ext.create('Ext.window.Window', {
height : 380,
width : 540,
resizable : false,
closable: true,
modal: true,
layout :{
type : 'fit'
},
items : [{
xtype : 'form',
frame : true,
height : 250,
itemId : 'centerContentForm',
width : 400,
bodyPadding : 10,
items : [{
xtype : 'textfield',
itemId : 'txtName',
height : 30,
width : 401,
fieldLabel : 'Name',
name: 'name',
allowBlank : false
},{
xtype : 'textfield',
itemId : 'txtIPAddress',
height : 30,
width : 401,
fieldLabel : 'Address',
name: 'address',
allowBlank : false,
},{
xtype : 'textfield',
itemId : 'txtType',
height : 30,
width : 401,
fieldLabel : 'Type',
name: 'type',
allowBlank : false
}]
}],
listeners: {
render: function(win) {
win.down('form').loadRecord(selectedItem);
var test = 'test';
}
}
}).show();
} // end of right-click handler
}]
}).showAt(event.getXY());
}
}
});
grid.getView().refresh();
});
Instead of render event handler you should use afterrender event handler.
So your window listeners config should be:
listeners: {
afterrender: function(win) {
win.down('form').loadRecord(selectedItem);
}
}
I'm new with ExtJS.
I have two grids on a same page. First grid has 3 columns. Second only one. Problem is that when second is rendered, it is overwriting properties of the first grid.
For example when I try to edit row in first grid, it takes the width on the row from second grid.
var $booleanArray = [
['denied', 'Denied'],
['allowed', 'Allowed']
];
var myPageSize = 10;
Ext.Loader.setConfig({ enabled: true });
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
Ext.onReady(function () {
Ext.define('CharacteristicModel', {
extend: 'Ext.data.Model',
fields: [ {name: 'name'}, {name: 'value'}, {name: 'order'} ],
validations: [
{
type : 'length',
field: 'name',
min : 1
}
]
});
var characteristicsStore = new Ext.data.Store({
proxy : {
model : 'CharacteristicModel',
type : 'rest',
api : {
read : admin_path + '/getCharacteristics/1/',
create : admin_path + '/saveCharacteristics/1/',
update : admin_path + '/saveCharacteristics/1/',
destroy: admin_path + '/destroyCharacteristic/1/'
},
reader : {
type : 'json',
root : 'data',
totalProperty: 'total_count'
},
writer : {
type: 'json',
root: 'data'
},
buffered: true
},
listeners: {
read : function (response) {
},
load : function (store) {
},
write: function (store, operation) {
store.load();
}
},
pageSize : myPageSize,
autoLoad : { start: 0, limit: myPageSize },
autoSync : true
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var characteristicsGrid = new Ext.grid.GridPanel({
id : 'characteristicsGrid',
renderTo : 'characteristics_grid_div_1',
store : characteristicsStore,
width : 480,
stateful : true,
stateId : 'characteristicsGrid',
title : 'Grid "1"',
iconCls : 'icon-user',
listeners : {
itemdblclick: function (dv, row, item, index, e) {
dv.refresh();
dv.getGridColumns()[0].setEditor({
disabled: true,
editable: false
});
if (row.data.id == 6 || row.data.id == 7) {
dv.getGridColumns()[1].setEditor({
xtype : 'combo',
store : new Ext.data.ArrayStore({
fields: ['abbr', 'action'],
data : $booleanArray
}),
displayField : 'action',
valueField : 'abbr',
mode : 'local',
typeAhead : false,
triggerAction: 'all',
lazyRender : true,
emptyText : 'Select action'
});
}
else if (row.data.id == 8 || row.data.id == 11) {
dv.getGridColumns()[1].setEditor({
disabled: true,
editable: false
});
}
else {
dv.getGridColumns()[1].setEditor({
xtype: 'textfield'
});
}
}
},
columns : [
{
id : 'name',
text : 'Account characteristic',
sortable : false,
width : 340,
fixed : true,
dataIndex: 'name'
},
{
id : 'value',
text : 'Value',
sortable : false,
dataIndex: 'value',
width : 70,
fixed : true,
editor : {
xtype: 'textfield'
},
renderer : function (value, field) {
if (field.record.data.id == 6 || field.record.data.id == 7) {
if ($booleanArray[0][0] != value) {
value = $booleanArray[1][1];
}
else {
value = $booleanArray[0][1];
}
}
return value;
}
},
{
id : 'order',
text : 'Order',
sortable : false,
dataIndex: 'order',
width : 70,
fixed : true,
editor : {
xtype: 'textfield'
},
renderer : function (value, field) {
return value;
}
}
],
bbar : Ext.create('Ext.PagingToolbar', {
store : characteristicsStore,
displayInfo: true,
pageSize : myPageSize,
displayMsg : 'Show {0} - {1} из {2}',
emptyMsg : "0 rows"
}),
dockedItems: [
{
xtype: 'toolbar',
items: [
{
text : 'Add',
iconCls: 'icon-add',
handler: function () {
var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns();
grid_colums[0].setEditor({
xtype : 'combo',
store : new Ext.data.ArrayStore({
fields: ['id', 'name'],
data : $characteristics
}),
displayField : 'name',
valueField : 'id',
mode : 'local',
typeAhead : false,
triggerAction: 'all',
lazyRender : true,
emptyText : 'Select action'
});
grid_colums[1].setEditor({
xtype: 'textfield'
});
// empty record
//characteristicsStore.autoSync = false;
characteristicsStore.insert(0, new CharacteristicModel());
rowEditing.startEdit(0, 0);
//characteristicsStore.autoSync = true;
}
},
'-',
{
itemId : 'delete',
text : 'Delete',
iconCls : 'icon-delete',
disabled: true,
handler : function () {
var selection = characteristicsGrid.getView().getSelectionModel().getSelection()[0];
if (selection) {
characteristicsStore.remove(selection);
}
}
}
]
}
],
plugins : [rowEditing]
});
characteristicsGrid.getSelectionModel().on('selectionchange', function (selModel, selections) {
characteristicsGrid.down('#delete').setDisabled(selections.length === 0);
});
});
Ext.onReady(function () {
Ext.define('AdvantagesModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name'}
]
});
// setup the state provider, all state information will be saved to a cookie
//Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var advantagesStore = new Ext.data.Store({
idProperty: 'AdvantagesModel',
proxy : {
model : 'AdvantagesModel',
type : 'rest',
api : {
read : admin_path + '/getAdvantages/1/',
create : admin_path + '/saveAdvantages/1/',
destroy: admin_path + '/destroyAdvantages/1/'
},
reader : {
type : 'json',
root : 'data',
totalProperty: 'totalCount'
},
writer : {
type: 'json',
root: 'data'
},
buffered: true
},
listeners: {
read : function (response) {
},
load : function (store) {
},
write: function (store, operation) {
store.load();
}
},
pageSize : myPageSize,
autoLoad : { start: 0, limit: myPageSize },
autoSync : true
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var advantagesGrid = new Ext.grid.GridPanel({
id : 'advantagesGrid',
renderTo : 'advantages_grid_div_1',
store : advantagesStore,
width : 482,
height : 355,
stateful : true,
stateId : 'advantagesGrid',
title : 'Grid 2',
iconCls : 'icon-user',
listeners : {
beforeedit: function (dv, row, item) {
//advantagesGrid.getView().refresh();
if (row.record.raw)
{
return false;
}
}
},
columns : [
{
id : 'name',
text : 'Advantages',
sortable : false,
dataIndex: 'name',
width : 480
}
],
bbar : Ext.create('Ext.PagingToolbar', {
store : advantagesStore,
displayInfo: true,
pageSize : myPageSize,
displayMsg : 'Show {0} - {1} из {2}',
emptyMsg : "0 rows"
}),
dockedItems: [
{
xtype: 'toolbar',
items: [
{
text : 'Add',
iconCls: 'icon-add',
handler: function () {
var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns();
grid_colums[0].setEditor({
xtype : 'combo',
store : new Ext.data.ArrayStore({
fields: ['id', 'name'],
data : $advantages
}),
displayField : 'name',
valueField : 'id',
mode : 'local',
typeAhead : false,
triggerAction: 'all',
lazyRender : true,
emptyText : 'Select action'
});
// empty record
advantagesStore.autoSync = false;
advantagesStore.insert(0, new AdvantagesModel());
rowEditing.startEdit(0, 0);
advantagesStore.autoSync = true;
}
},
'-',
{
itemId : 'delete',
text : 'Delete',
iconCls : 'icon-delete',
disabled: true,
handler : function () {
var selection = advantagesGrid.getView().getSelectionModel().getSelection()[0];
if (selection) {
advantagesStore.remove(selection);
}
}
}
]
}
],
plugins : [rowEditing]
});
advantagesGrid.getSelectionModel().on('selectionchange', function (selModel, selections) {
advantagesGrid.down('#delete').setDisabled(selections.length === 0);
});
});
The alternative to having your two grid id columns identified differently is to have two different instances/objects of the Ext.grid.plugin.RowEditing class if you have two editable grids on the same page. Many times it's important to have the same id.
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing');
plugins : [rowEditing]
plugins : [rowEditing2]
found the problem.
columns : [
{
id : 'name',
columns ids must be different, even if they are in diferent grids
I have an Extjs 4 grid with sort capability. i want to call a custum function after each time user presses sort button.
In my custom function i want to navigate to the first page of my grid (my grid uses pagination and it takes advantage of server-side sort) i think i must use store.loadPage(1) in my custom function (correct me if I'm wrong)
where should i put my custom function?
This is my Ext.OnReady() function:
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var url = {
local: 'grid-filter.json', // static data file
remote: 'grid-filter.php'
};
var paging = true;
var encode = false;
var local = false;
Ext.define('UserDirectoryDataModel', {
extend : 'Ext.data.Model',
fields : [ 'uname', 'fname', 'lname', 'postcode', 'mail', {
name : 'pass'
}, 'hasAccess', 'isActive', 'lastVisit' , 'deleteUser'],
idProperty : 'uname'
});
var itemsPerPage = 20;
var store = Ext.create('Ext.data.Store', {
pageSize : itemsPerPage,
autoLoad: false,
local: false,
autoDestroy: true,
model : 'UserDirectoryDataModel',
autoSync : true,
sortOnLoad : true,
remoteSort:true,
sorters : {
property : 'uname',
direction : 'ASC'
},
listeners: {
beforeload: function(){
store.loadPage(1);
}
},
proxy : {
type : 'ajax',
url: (local ? url.local : url.remote),
api : {
read : 'read.php',
update : 'update.php'
},
reader : {
type : 'json',
root : 'users',
successProperty : 'success',
totalProperty : 'totalCount'
},
writer : {
type : 'json',
writeAllFields : true,
encode : false,
root : 'users'
},
afterRequest : function(request, success) {
if (request.action == 'update') {
if (success) {
Ext.MessageBox.alert('alert',
'data updated!');
}
}
}
}
});
store.load({
params:{
start:0,
limit: itemsPerPage
}
});
var filters = {
ftype: 'filters',
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
filters: [
{
}
]
};
var createColumns = function (finish, start) {
var columns = [ {
text : "username",
dataIndex : 'uname',
width : 150,
filterable: true,
align : 'right'
}, {
text : "name",
dataIndex : 'fname',
width : 150,
align : 'right',
hidden : false,
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "last name",
dataIndex : 'lname',
width : 150,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "PostalCode",
dataIndex : 'postcode',
width : 110,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "email",
dataIndex : 'mail',
width : 200,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "password",
width : 150,
align : 'right',
sortable : false,
filterable: true,
hidden : true,
dataIndex : 'pass',
editor : {
xtype : 'textfield',
inputType : 'password',
allowBlank : true
}
}, {
text : "access to system",
dataIndex : 'hasAccess',
renderer:function(value){
if(value[0]=="1"){
return "has";
}else{
return "doens't have";
}
},
width : 100,
align : 'center',
sortable : false,
filterable: false
}, {
text : "active",
dataIndex : 'isActive',
renderer:function(value){
if(value==null)
return;
if(value[0]=="1"){
return "no";
}else if(value[0]=="0"){
return "yes";
}else if(value[0]=="2"){
return "Not in portal!";
}
},
width : 100,
align : 'center',
sortable : false,
filterable: false
}, {
text : "last visit",
dataIndex : 'lastVisit',
width : 120,
hidden : true,
align : 'right',
sortable : true,
filterable: true
}, {
text : " ",
dataIndex : 'uname',
renderer:function(value){
return "delete";
},
width : 120,
hidden : true,
align : 'right'
} ];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
border: false,
width : 1200,
height : 620,
title : '',
store: store,
disableSelection : false,
seltype : 'rowmodel',
loadMask : true,
viewConfig : {
id : 'gv',
trackOver : false,
stripeRows : false,
plugins : [ {
ptype : 'preview',
bodyField : 'excerpt',
expanded : true,
pluginId : 'preview'
} ]
},
columns: createColumns(),
features: [filters],
dockedItems: [Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
store: store
})],
plugins : [ Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit : 2
}) ],
renderTo : 'userdatagrid'
});
grid.child('pagingtoolbar').add([
{
text: 'show filters',
handler: function () {
var data = Ext.encode(grid.filters.getFilterData());
Ext.Msg.alert('show filters',data);
}
},{
text: 'delete filters',
handler: function () {
grid.filters.clearFilters();
}
}
]);
store.loadPage(1);
});
Or you could use this:
grid.on('sortchange', function() {
grid.getStore().loadPage(1);
});
Forget everything I wrote:
Server Side sorting in an ExtJS GridPanel
You should put your custom function in the grid event: sortchange.
I just re-read your question - I thought you have infinite paging.
If your sort is done server side, then yes, you need to call loadPage(1).
You also need to send the sort parameters.
listeners: {
sortchange: function(){
var grid = Ext.ComponentQuery.query('my-grid-alias')[0];
grid.getStore().loadPage(1);
}
}
I hope this helps.
I just put a loadPage(1) in the sortchange event, but it made twice server request(grid made the first one with sort parameters automatically), how could it be only once?
I figure out one solution, I set "remoteSort:false" in store and
"sortchange: {fn:function(){
var time = (new Date()).getTime()/1000;
// after {remoteSort:false} is set, sortchange event will be fired twice when column header is clicked, so I had to set a parameter for time record
if('undefined' == typeof(this.last_sort_time) || this.last_sort_time+1 < time){
this.getStore().loadPage(1);
this.last_sort_time = time;
}
}, scope:this}"
in grid.
But it not works fine, because the received data was reordered by the grid before displayed on it
At last, I solve the problem in this way:
Ext.override(Ext.grid.column.Column, {
doSort:function(){
var ds = this.up('tablepanel').store;
ds.currentPage = 1;
this.callParent(arguments);
}
});
And it works perfectly so far
sortchange event fires after request is send to the server. For solution look here
http://www.sencha.com/forum/showthread.php?145779-Reset-page-for-paginator-on-sort-change
I defined a GridPanel with pre-configured ColumnModel and Store, and put this GridPanel in a Ext.Window; It works fine when this window shows, however, if I close it and show it again, the ColumnModel of GridPanel becomes null so that this GridPanel cannot correctly rendered.
UPDATED (all code)
var stSummary = new Ext.data.JsonStore({ //define the store for Summary_Grid
fields : [
{
name: 'recID'
}, {
name : 'name',
}],
data: []
});
var colModelSummary = { //define the ColumnModel for Summary_Grid
columns:
[
{
header : "ID",
width : 50,
sortable : true,
menuDisabled: true,
dataIndex : 'recID'
},
{
header : "Name",
width : 100,
sortable : true,
menuDisabled: true,
dataIndex : 'name'
}
]
};
var reportConfig = {
id : 'Report_Window',
width : 250,
floating : true,
style : {
opacity : 0.7,
},
title : "Report",
layout: 'fit',
items : [{
xtype: 'tabpanel',
id: 'Report_Tab',
height: 200,
activeTab: 1,
items:
[
{
xtype : 'grid',
store : stSummary,
colModel : new Ext.grid.ColumnModel(colModelSummary),
stripeRows : true,
id : "Summary_Grid",
title : "Summary at",
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),
listeners: {
'beforerender': function() {
console.log(this.getColumnModel().getColumnCount());
}
}
},
{
xtype : 'form',
id : 'Report_Form',
title: 'Item Report',
frame : true,
labelAlign : 'left',
bodyStyle : 'padding:2px',
autoScroll: true,
layout : 'column',
items : []
}
]
}],
resizable : {
dynamic : true
}
};
var reportWindow = new Ext.Window(reportConfig);
reportWindow.show();
document.onclick = myClickHandler;
function myClickHandler() {
if(!Ext.getCmp('Report_Window')) {
var reportWindow = new Ext.Window(reportConfig);
}
Ext.getCmp('Report_Window').show();
}
});
and the error:
Uncaught TypeError: Cannot read property 'length' of undefined
Ext.grid.ColumnModel.Ext.extend.getColumnCount ext-all.js:11
I actually just copy pasted your code into my application. I added reportWindow.show() in the end - and it works! Not sure what could be wrong, can you show all code?
Please note that it might be a close/hide problem, do you recreate your window each time?
EDIT:
Try to set closeAction: 'hide' to your window configuration.
Check this for details:
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Window-cfg-closeAction
EDIT #2:
I tested your code again, and it works again! I only corrected several things like extra commas - my resharper suggested it. (It might cause problems in IE) Then I putted it into Ext.onReady - it works! Ext.version == '3.2.1'
Check the whole code:
Ext.onReady(function() {
var stSummary = new Ext.data.JsonStore({
//define the store for Summary_Grid
fields: [
{
name: 'recID'
}, {
name: 'name'
}],
data: []
});
var colModelSummary = {
//define the ColumnModel for Summary_Grid
columns:
[
{
header: "ID",
width: 50,
sortable: true,
menuDisabled: true,
dataIndex: 'recID'
},
{
header: "Name",
width: 100,
sortable: true,
menuDisabled: true,
dataIndex: 'name'
}
]
};
var reportConfig = {
id: 'Report_Window',
width: 250,
floating: true,
style: {
opacity: 0.7
},
title: "Report",
layout: 'fit',
items: [{
xtype: 'tabpanel',
id: 'Report_Tab',
height: 200,
activeTab: 1,
items:
[
{
xtype: 'grid',
store: stSummary,
colModel: new Ext.grid.ColumnModel(colModelSummary),
stripeRows: true,
id: "Summary_Grid",
title: "Summary at",
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
listeners: {
'beforerender': function() {
console.log(this.getColumnModel().getColumnCount());
}
}
},
{
xtype: 'form',
id: 'Report_Form',
title: 'Item Report',
frame: true,
labelAlign: 'left',
bodyStyle: 'padding:2px',
autoScroll: true,
layout: 'column',
items: []
}
]
}],
resizable: {
dynamic: true
}
};
var reportWindow = new Ext.Window(reportConfig);
reportWindow.show();
document.onclick = myClickHandler;
function myClickHandler() {
if (!Ext.getCmp('Report_Window')) {
reportWindow = new Ext.Window(reportConfig);
}
Ext.getCmp('Report_Window').show();
}
});