重新配置的网格在ExtJS 4.2上不起作用
我正在尝试在extjs 4.2上使用重新配置网格，您可以找到带有其原始代码here的示例（转到Grids下的Reconfigure Grid），但是找不到文件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下载两个文件，并将它们放在项目文件夹的某个位置，但是问题仍然存在。
[我也尝试从KitchenSink.model.grid.Office中删除KitchenSink.model.grid.Office和requires，然后它可以工作，但是按钮不起作用。当我点击它们时，我得到了这个：
注意：我正在使用带有Express的Node.js来显示我的网站，因为它将具有服务器连接。这就是我的文件夹树：
-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。
通过全名，别名或替代名称来实例化一个类。如果启用了Ext.Loader并且尚未定义该类，它将尝试通过同步加载来加载该类。
Ext.define
定义一个类或替代。 不返回任何内容
顺便说一句。您应该在view definitions中需要Ext.app.Controller，并使用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上不起作用
我正在尝试在extjs 4.2上使用重新配置网格，您可以找到带有其原始代码here的示例（转到Grids下的Reconfigure Grid），但是找不到文件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下载两个文件，并将它们放在项目文件夹的某个位置，但是问题仍然存在。
[我也尝试从KitchenSink.model.grid.Office中删除KitchenSink.model.grid.Office和requires，然后它可以工作，但是按钮不起作用。当我点击它们时，我得到了这个：
注意：我正在使用带有Express的Node.js来显示我的网站，因为它将具有服务器连接。这就是我的文件夹树：
-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。
通过全名，别名或替代名称来实例化一个类。如果启用了Ext.Loader并且尚未定义该类，它将尝试通过同步加载来加载该类。
Ext.define
定义一个类或替代。 不返回任何内容
顺便说一句。您应该在view definitions中需要Ext.app.Controller，并使用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'
}]
});
}
});
}