重新配置的网格在 ExtJS 4.2 上不起作用
Reconfigured Grid does not work on ExtJS 4.2
我正在尝试在 extjs 4.2 上使用重新配置网格，您可以找到它的示例及其原始代码 here（转到 重新配置网格 Grids) 但找不到文件 Office.js 和 Empolyee.js.
代码：
function init() {
Ext.application({
name: 'MyApp',
launch: function() {
const grid = Ext.define('KitchenSink.view.grid.Reconfigure', {
extend: 'Ext.container.Container',
requires: [
'Ext.grid.*',
'Ext.layout.container.HBox',
'Ext.layout.container.VBox',
'KitchenSink.model.grid.Office',
'KitchenSink.model.grid.Employee'
],
xtype: 'reconfigure-grid',
layout: {
type: 'vbox',
align: 'stretch'
},
width: 500,
height: 330,
lastNames: ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firstNames: ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
cities: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'San Diego', 'Dallas', 'San Jose'],
departments: ['Development', 'QA', 'Marketing', 'Accounting', 'Sales'],
initComponent: function(){
Ext.apply(this, {
items: [{
xtype: 'container',
layout: 'hbox',
defaultType: 'button',
items: [{
itemId: 'showOffices',
text: 'Show Offices',
scope: this,
handler: this.onShowOfficesClick
}, {
itemId: 'showEmployees',
margin: '0 0 0 10',
text: 'Show Employees',
scope: this,
handler: this.onShowEmployeesClick
}]
}, {
margin: '10 0 0 0',
xtype: 'grid',
flex: 1,
columns: [],
viewConfig: {
emptyText: 'Click a button to show a dataset',
deferEmptyText: false
}
}]
});
this.callParent();
},
onShowOfficesClick: function(){
var grid = this.down('grid');
Ext.suspendLayouts();
grid.setTitle('Employees');
grid.reconfigure(this.createOfficeStore(), [{
flex: 1,
text: 'City',
dataIndex: 'city'
}, {
text: 'Total Employees',
dataIndex: 'totalEmployees',
width: 140
}, {
text: 'Manager',
dataIndex: 'manager',
width: 120
}]);
this.down('#showEmployees').enable();
this.down('#showOffices').disable();
Ext.resumeLayouts(true);
},
onShowEmployeesClick: function(){
var grid = this.down('grid');
Ext.suspendLayouts();
grid.setTitle('Employees');
grid.reconfigure(this.createEmployeeStore(), [{
text: 'First Name',
dataIndex: 'forename'
}, {
text: 'Last Name',
dataIndex: 'surname'
}, {
width: 130,
text: 'Employee No.',
dataIndex: 'employeeNo'
}, {
flex: 1,
text: 'Department',
dataIndex: 'department'
}]);
this.down('#showOffices').enable();
this.down('#showEmployees').disable();
Ext.resumeLayouts(true);
},
createEmployeeStore: function(){
var data = [],
i = 0,
usedNames = {},
name;
for (; i < 20; ++i) {
name = this.getUniqueName(usedNames);
data.push({
forename: name[0],
surname: name[1],
employeeNo: this.getEmployeeNo(),
department: this.getDepartment()
});
}
return new Ext.data.Store({
model: KitchenSink.model.grid.Employee,
data: data
});
},
createOfficeStore: function(){
var data = [],
i = 0,
usedNames = {},
usedCities = {};
for (; i < 7; ++i) {
data.push({
city: this.getUniqueCity(usedCities),
manager: this.getUniqueName(usedNames).join(' '),
totalEmployees: Ext.Number.randomInt(10, 25)
});
}
return new Ext.data.Store({
model: KitchenSink.model.grid.Office,
data: data
});
},
// Fake data generation functions
generateName: function(){
var lasts = this.lastNames,
firsts = this.firstNames,
lastLen = lasts.length,
firstLen = firsts.length,
getRandomInt = Ext.Number.randomInt,
first = firsts[getRandomInt(0, firstLen - 1)],
last = lasts[getRandomInt(0, lastLen - 1)];
return [first, last];
},
getUniqueName: function(used) {
var name = this.generateName(),
key = name[0] + name[1];
if (used[key]) {
return this.getUniqueName(used);
}
used[key] = true;
return name;
},
getCity: function(){
var cities = this.cities,
len = cities.length;
return cities[Ext.Number.randomInt(0, len - 1)];
},
getUniqueCity: function(used){
var city = this.getCity();
if (used[city]) {
return this.getUniqueCity(used);
}
used[city] = true;
return city;
},
getEmployeeNo: function() {
var out = '',
i = 0;
for (; i < 6; ++i) {
out += Ext.Number.randomInt(0, 7);
}
return out;
},
getDepartment: function() {
var departments = this.departments,
len = departments.length;
return departments[Ext.Number.randomInt(0, len - 1)];
}
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
title: "",
region: 'center',
collapsible: false,
layout: 'fit',
items: {
items: grid
},
});
}
});
}
当我尝试在 Google Chrome 上打开它时，出现以下错误：
我已经尝试从 here 下载这两个文件并将它们放在我的项目文件夹的某个位置，但问题仍然存在。
我还尝试从 requires 中删除 KitchenSink.model.grid.Office 和 KitchenSink.model.grid.Office，然后它起作用了，但按钮不起作用。当我点击它们时我得到了这个：
注意：我使用 Node.js 和 Express 来显示我的网站，因为它需要服务器连接。这就是我的文件夹树：
-assets
|-css
|-main.css
|-util.css
|-img
|-js
|-adminPage.js (My ExtJS file)
|-jquery-3.2.1.min.js
-views
|-adminPage.ejs (I call adminPage.js from this file)
|-login.ejs
-dbConnection.js
-server.js
我做错了什么？
要使用视图，您需要执行 Ext.create 而不是 Ext.define。
Instantiate a class by either full name, alias or alternate name. If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.
Ext.define
Defines a class or override. Doesn't return anything
顺便说一句。您应该在 Ext.app.Controller 中要求 view definitions，并使用 alias/xtype 参数通过快捷方式自动创建视图。
function init() {
Ext.application({
name: 'MyApp',
launch: function() {
Ext.define('KitchenSink.view.grid.Reconfigure', {
extend: 'Ext.container.Container',
requires: [
'Ext.grid.*',
'Ext.layout.container.HBox',
'Ext.layout.container.VBox',
'KitchenSink.model.grid.Office',
'KitchenSink.model.grid.Employee'
],
xtype: 'reconfigure-grid',
layout: {
type: 'vbox',
align: 'stretch'
},
width: 500,
height: 330,
lastNames: ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firstNames: ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
cities: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'San Diego', 'Dallas', 'San Jose'],
departments: ['Development', 'QA', 'Marketing', 'Accounting', 'Sales'],
initComponent: function(){
Ext.apply(this, {
items: [{
xtype: 'container',
layout: 'hbox',
defaultType: 'button',
items: [{
itemId: 'showOffices',
text: 'Show Offices',
scope: this,
handler: this.onShowOfficesClick
}, {
itemId: 'showEmployees',
margin: '0 0 0 10',
text: 'Show Employees',
scope: this,
handler: this.onShowEmployeesClick
}]
}, {
margin: '10 0 0 0',
xtype: 'grid',
flex: 1,
columns: [],
viewConfig: {
emptyText: 'Click a button to show a dataset',
deferEmptyText: false
}
}]
});
this.callParent();
},
onShowOfficesClick: function(){
var grid = this.down('grid');
Ext.suspendLayouts();
grid.setTitle('Employees');
grid.reconfigure(this.createOfficeStore(), [{
flex: 1,
text: 'City',
dataIndex: 'city'
}, {
text: 'Total Employees',
dataIndex: 'totalEmployees',
width: 140
}, {
text: 'Manager',
dataIndex: 'manager',
width: 120
}]);
this.down('#showEmployees').enable();
this.down('#showOffices').disable();
Ext.resumeLayouts(true);
},
onShowEmployeesClick: function(){
var grid = this.down('grid');
Ext.suspendLayouts();
grid.setTitle('Employees');
grid.reconfigure(this.createEmployeeStore(), [{
text: 'First Name',
dataIndex: 'forename'
}, {
text: 'Last Name',
dataIndex: 'surname'
}, {
width: 130,
text: 'Employee No.',
dataIndex: 'employeeNo'
}, {
flex: 1,
text: 'Department',
dataIndex: 'department'
}]);
this.down('#showOffices').enable();
this.down('#showEmployees').disable();
Ext.resumeLayouts(true);
},
createEmployeeStore: function(){
var data = [],
i = 0,
usedNames = {},
name;
for (; i < 20; ++i) {
name = this.getUniqueName(usedNames);
data.push({
forename: name[0],
surname: name[1],
employeeNo: this.getEmployeeNo(),
department: this.getDepartment()
});
}
return new Ext.data.Store({
model: KitchenSink.model.grid.Employee,
data: data
});
},
createOfficeStore: function(){
var data = [],
i = 0,
usedNames = {},
usedCities = {};
for (; i < 7; ++i) {
data.push({
city: this.getUniqueCity(usedCities),
manager: this.getUniqueName(usedNames).join(' '),
totalEmployees: Ext.Number.randomInt(10, 25)
});
}
return new Ext.data.Store({
model: KitchenSink.model.grid.Office,
data: data
});
},
// Fake data generation functions
generateName: function(){
var lasts = this.lastNames,
firsts = this.firstNames,
lastLen = lasts.length,
firstLen = firsts.length,
getRandomInt = Ext.Number.randomInt,
first = firsts[getRandomInt(0, firstLen - 1)],
last = lasts[getRandomInt(0, lastLen - 1)];
return [first, last];
},
getUniqueName: function(used) {
var name = this.generateName(),
key = name[0] + name[1];
if (used[key]) {
return this.getUniqueName(used);
}
used[key] = true;
return name;
},
getCity: function(){
var cities = this.cities,
len = cities.length;
return cities[Ext.Number.randomInt(0, len - 1)];
},
getUniqueCity: function(used){
var city = this.getCity();
if (used[city]) {
return this.getUniqueCity(used);
}
used[city] = true;
return city;
},
getEmployeeNo: function() {
var out = '',
i = 0;
for (; i < 6; ++i) {
out += Ext.Number.randomInt(0, 7);
}
return out;
},
getDepartment: function() {
var departments = this.departments,
len = departments.length;
return departments[Ext.Number.randomInt(0, len - 1)];
}
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
title: "",
region: 'center',
collapsible: false,
layout: 'fit',
items: [{
xtype: 'reconfigure-grid'
}]
});
}
});
}
我正在尝试在 extjs 4.2 上使用重新配置网格，您可以找到它的示例及其原始代码 here（转到 重新配置网格 Grids) 但找不到文件 Office.js 和 Empolyee.js.
代码：
function init() {
Ext.application({
name: 'MyApp',
launch: function() {
const grid = Ext.define('KitchenSink.view.grid.Reconfigure', {
extend: 'Ext.container.Container',
requires: [
'Ext.grid.*',
'Ext.layout.container.HBox',
'Ext.layout.container.VBox',
'KitchenSink.model.grid.Office',
'KitchenSink.model.grid.Employee'
],
xtype: 'reconfigure-grid',
layout: {
type: 'vbox',
align: 'stretch'
},
width: 500,
height: 330,
lastNames: ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firstNames: ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
cities: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'San Diego', 'Dallas', 'San Jose'],
departments: ['Development', 'QA', 'Marketing', 'Accounting', 'Sales'],
initComponent: function(){
Ext.apply(this, {
items: [{
xtype: 'container',
layout: 'hbox',
defaultType: 'button',
items: [{
itemId: 'showOffices',
text: 'Show Offices',
scope: this,
handler: this.onShowOfficesClick
}, {
itemId: 'showEmployees',
margin: '0 0 0 10',
text: 'Show Employees',
scope: this,
handler: this.onShowEmployeesClick
}]
}, {
margin: '10 0 0 0',
xtype: 'grid',
flex: 1,
columns: [],
viewConfig: {
emptyText: 'Click a button to show a dataset',
deferEmptyText: false
}
}]
});
this.callParent();
},
onShowOfficesClick: function(){
var grid = this.down('grid');
Ext.suspendLayouts();
grid.setTitle('Employees');
grid.reconfigure(this.createOfficeStore(), [{
flex: 1,
text: 'City',
dataIndex: 'city'
}, {
text: 'Total Employees',
dataIndex: 'totalEmployees',
width: 140
}, {
text: 'Manager',
dataIndex: 'manager',
width: 120
}]);
this.down('#showEmployees').enable();
this.down('#showOffices').disable();
Ext.resumeLayouts(true);
},
onShowEmployeesClick: function(){
var grid = this.down('grid');
Ext.suspendLayouts();
grid.setTitle('Employees');
grid.reconfigure(this.createEmployeeStore(), [{
text: 'First Name',
dataIndex: 'forename'
}, {
text: 'Last Name',
dataIndex: 'surname'
}, {
width: 130,
text: 'Employee No.',
dataIndex: 'employeeNo'
}, {
flex: 1,
text: 'Department',
dataIndex: 'department'
}]);
this.down('#showOffices').enable();
this.down('#showEmployees').disable();
Ext.resumeLayouts(true);
},
createEmployeeStore: function(){
var data = [],
i = 0,
usedNames = {},
name;
for (; i < 20; ++i) {
name = this.getUniqueName(usedNames);
data.push({
forename: name[0],
surname: name[1],
employeeNo: this.getEmployeeNo(),
department: this.getDepartment()
});
}
return new Ext.data.Store({
model: KitchenSink.model.grid.Employee,
data: data
});
},
createOfficeStore: function(){
var data = [],
i = 0,
usedNames = {},
usedCities = {};
for (; i < 7; ++i) {
data.push({
city: this.getUniqueCity(usedCities),
manager: this.getUniqueName(usedNames).join(' '),
totalEmployees: Ext.Number.randomInt(10, 25)
});
}
return new Ext.data.Store({
model: KitchenSink.model.grid.Office,
data: data
});
},
// Fake data generation functions
generateName: function(){
var lasts = this.lastNames,
firsts = this.firstNames,
lastLen = lasts.length,
firstLen = firsts.length,
getRandomInt = Ext.Number.randomInt,
first = firsts[getRandomInt(0, firstLen - 1)],
last = lasts[getRandomInt(0, lastLen - 1)];
return [first, last];
},
getUniqueName: function(used) {
var name = this.generateName(),
key = name[0] + name[1];
if (used[key]) {
return this.getUniqueName(used);
}
used[key] = true;
return name;
},
getCity: function(){
var cities = this.cities,
len = cities.length;
return cities[Ext.Number.randomInt(0, len - 1)];
},
getUniqueCity: function(used){
var city = this.getCity();
if (used[city]) {
return this.getUniqueCity(used);
}
used[city] = true;
return city;
},
getEmployeeNo: function() {
var out = '',
i = 0;
for (; i < 6; ++i) {
out += Ext.Number.randomInt(0, 7);
}
return out;
},
getDepartment: function() {
var departments = this.departments,
len = departments.length;
return departments[Ext.Number.randomInt(0, len - 1)];
}
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
title: "",
region: 'center',
collapsible: false,
layout: 'fit',
items: {
items: grid
},
});
}
});
}
当我尝试在 Google Chrome 上打开它时，出现以下错误：
我已经尝试从 here 下载这两个文件并将它们放在我的项目文件夹的某个位置，但问题仍然存在。
我还尝试从 requires 中删除 KitchenSink.model.grid.Office 和 KitchenSink.model.grid.Office，然后它起作用了，但按钮不起作用。当我点击它们时我得到了这个：
注意：我使用 Node.js 和 Express 来显示我的网站，因为它需要服务器连接。这就是我的文件夹树：
-assets
|-css
|-main.css
|-util.css
|-img
|-js
|-adminPage.js (My ExtJS file)
|-jquery-3.2.1.min.js
-views
|-adminPage.ejs (I call adminPage.js from this file)
|-login.ejs
-dbConnection.js
-server.js
我做错了什么？
要使用视图，您需要执行 Ext.create 而不是 Ext.define。
Instantiate a class by either full name, alias or alternate name. If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.
Ext.define
Defines a class or override. Doesn't return anything
顺便说一句。您应该在 Ext.app.Controller 中要求 view definitions，并使用 alias/xtype 参数通过快捷方式自动创建视图。
function init() {
Ext.application({
name: 'MyApp',
launch: function() {
Ext.define('KitchenSink.view.grid.Reconfigure', {
extend: 'Ext.container.Container',
requires: [
'Ext.grid.*',
'Ext.layout.container.HBox',
'Ext.layout.container.VBox',
'KitchenSink.model.grid.Office',
'KitchenSink.model.grid.Employee'
],
xtype: 'reconfigure-grid',
layout: {
type: 'vbox',
align: 'stretch'
},
width: 500,
height: 330,
lastNames: ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firstNames: ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
cities: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'San Diego', 'Dallas', 'San Jose'],
departments: ['Development', 'QA', 'Marketing', 'Accounting', 'Sales'],
initComponent: function(){
Ext.apply(this, {
items: [{
xtype: 'container',
layout: 'hbox',
defaultType: 'button',
items: [{
itemId: 'showOffices',
text: 'Show Offices',
scope: this,
handler: this.onShowOfficesClick
}, {
itemId: 'showEmployees',
margin: '0 0 0 10',
text: 'Show Employees',
scope: this,
handler: this.onShowEmployeesClick
}]
}, {
margin: '10 0 0 0',
xtype: 'grid',
flex: 1,
columns: [],
viewConfig: {
emptyText: 'Click a button to show a dataset',
deferEmptyText: false
}
}]
});
this.callParent();
},
onShowOfficesClick: function(){
var grid = this.down('grid');
Ext.suspendLayouts();
grid.setTitle('Employees');
grid.reconfigure(this.createOfficeStore(), [{
flex: 1,
text: 'City',
dataIndex: 'city'
}, {
text: 'Total Employees',
dataIndex: 'totalEmployees',
width: 140
}, {
text: 'Manager',
dataIndex: 'manager',
width: 120
}]);
this.down('#showEmployees').enable();
this.down('#showOffices').disable();
Ext.resumeLayouts(true);
},
onShowEmployeesClick: function(){
var grid = this.down('grid');
Ext.suspendLayouts();
grid.setTitle('Employees');
grid.reconfigure(this.createEmployeeStore(), [{
text: 'First Name',
dataIndex: 'forename'
}, {
text: 'Last Name',
dataIndex: 'surname'
}, {
width: 130,
text: 'Employee No.',
dataIndex: 'employeeNo'
}, {
flex: 1,
text: 'Department',
dataIndex: 'department'
}]);
this.down('#showOffices').enable();
this.down('#showEmployees').disable();
Ext.resumeLayouts(true);
},
createEmployeeStore: function(){
var data = [],
i = 0,
usedNames = {},
name;
for (; i < 20; ++i) {
name = this.getUniqueName(usedNames);
data.push({
forename: name[0],
surname: name[1],
employeeNo: this.getEmployeeNo(),
department: this.getDepartment()
});
}
return new Ext.data.Store({
model: KitchenSink.model.grid.Employee,
data: data
});
},
createOfficeStore: function(){
var data = [],
i = 0,
usedNames = {},
usedCities = {};
for (; i < 7; ++i) {
data.push({
city: this.getUniqueCity(usedCities),
manager: this.getUniqueName(usedNames).join(' '),
totalEmployees: Ext.Number.randomInt(10, 25)
});
}
return new Ext.data.Store({
model: KitchenSink.model.grid.Office,
data: data
});
},
// Fake data generation functions
generateName: function(){
var lasts = this.lastNames,
firsts = this.firstNames,
lastLen = lasts.length,
firstLen = firsts.length,
getRandomInt = Ext.Number.randomInt,
first = firsts[getRandomInt(0, firstLen - 1)],
last = lasts[getRandomInt(0, lastLen - 1)];
return [first, last];
},
getUniqueName: function(used) {
var name = this.generateName(),
key = name[0] + name[1];
if (used[key]) {
return this.getUniqueName(used);
}
used[key] = true;
return name;
},
getCity: function(){
var cities = this.cities,
len = cities.length;
return cities[Ext.Number.randomInt(0, len - 1)];
},
getUniqueCity: function(used){
var city = this.getCity();
if (used[city]) {
return this.getUniqueCity(used);
}
used[city] = true;
return city;
},
getEmployeeNo: function() {
var out = '',
i = 0;
for (; i < 6; ++i) {
out += Ext.Number.randomInt(0, 7);
}
return out;
},
getDepartment: function() {
var departments = this.departments,
len = departments.length;
return departments[Ext.Number.randomInt(0, len - 1)];
}
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
title: "",
region: 'center',
collapsible: false,
layout: 'fit',
items: [{
xtype: 'reconfigure-grid'
}]
});
}
});
}