标签: extjs4.2
在html div中渲染ExtJS 4+ MVC应用程序 - 操作方法？
到目前为止,我找到的所有示例都解释了如何在"视口"中呈现ExtJS(4.2)MVC应用程序,换句话说,这意味着完整的浏览器屏幕,并占据整个HTML BODY.
我想在名为DIV的现有HTML页面中呈现应用程序,以便我可以围绕应用程序进行HTML设计.
<div id="appdiv"><!-- application runs here --></div>
我已经看到一些使用ExtJS 4示例的网站使用技巧通过使用IFRAME在页面内呈现ExtJS应用程序.
可以避免IFRAME吗？而且,如果是的话,ExtJS 4.2应用程序的骨架如果将在div中呈现则应该如何.
注意:在ExtJS 3中,我通过创建一个面板作为主容器找到了解决方案,该容器在命名div中呈现.但是,版本4.2(以及可能更早的4.x)表明MVC应用程序方法似乎远远优越.
----编辑
我意识到我必须为这个问题提出起点.
- 此示例的源由ExtJS的CMD命令生成,该命令生成"应用程序"框架框架.
- 应用程序的框架由许多文件组成,包括引擎引用和其他引用,所以我不能在这里包含"application"目录/文件夹中的所有源代码.应用程序的骨架可以使用cmd以时尚方式完成:
sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genapp这会生成文件和文件夹,并在该位置复制所有必需的文件. - "用户"活动区域位于"app"目录中.App dir有视图,控制器,模型和其他东西的子目录.
- 与许多其他框架一样,您需要保留文件夹结构,以便框架可以找到适当的文件并初始化它们.
- 文件列表:
index.html(在生成的应用程序的根目录中)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ExtGenApp</title>
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app/app.js"></script>
<!-- </x-compile> -->
</head>
<body>
<h1>HTML Before</h1>
<div id="appBox"></div>
<h1>HTML After</h1>
</body>
</html>
应用程序/ app.js
/*
This file is generated and updated by …推荐指数
解决办法
查看次数
在没有form.submit()的extjs 4.2中上传文件
我正试图在extjs中上传一个文件(截至目前的任何扩展名).我有一个模特和商店.文件上传发生在一个窗口,我没有在窗口中的表单.我在网上尝试的所有例子都是使用form.submit().我改为使用和Ajax调用如下所示将数据发送到服务器.
Ext.Ajax.request({
url : 'qaf/saveSetupDetails.action',
params : {
'data' : recordsToSend
},
failure : function(response){
//console.log('error connecting controller');
},
success : function(response){
//console.log('successfully submitted');
}
});
要在数据中发送的记录如下所示.
var store = Ext.getStore('SomeStore');
var modifiedRecords = store.getModifiedRecords();
var recordsToSend = [];
if(modifiedRecords.length > 0){
Ext.each(modifiedRecords, function(record){
recordsToSend.push(record.data);//I'm sure that this is so dump but this is how I do it for other records which are string and not sure how to do it for a file...
});
}
Ext.USE_NATIVE_JSON = true;
recordsToSend …推荐指数
解决办法
查看次数
查看控制器EXTJS 4中的参考
我无法在控制器中获得组合框值.组合框视图的getter方法返回
function i(){
return this.constructor.apply(this,arguments)||null
}
而不是查看对象实例.如果我使用
var combo=this.getColumnTypeComboView().create()
然后我没有得到组合框的选定值combo.getValue().
推荐指数
解决办法
查看次数
EXT 4.2 ComboBox使用XTemplate对结果进行分组
我试图将我从商店获得的结果分组,以便在ComboBox中显示.我有一个看起来像这样的组合框:
我需要它看起来像这样:
这意味着按类别(订单/发票)分组.
我的组合框定义如下:
Ext.define('NG.view.searchcombo.Combo', {
requires: ['Ext.form.field.ComboBox'],
extend: 'Ext.form.ComboBox',
alias: 'widget.searchcombo',
minChars:3,
fieldLabel: 'Choose Search',
store: 'Search',
displayField: 'name',
valueField: 'id',
typeAhead: false,
hideLabel: true,
hideTrigger:false,
anchor: '100%',
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',
// Custom rendering template for each item
getInnerTpl: function() {
return '<h3>{name} / {category}</h3>' +'{excerpt}' ;
}
},
pageSize: 10,
initComponent: function () {
this.callParent(arguments);
}
});
我的数据是这样的:
[{
"id": 1,
"name": "one",
"category": "invoice"
}, {
"id": 2,
"name": "two",
"category": …推荐指数
解决办法
查看次数
ExtJs刷新无限滚动网格面板
我的应用程序(ExtJs 4.2.1)中有一个无限滚动网格面板,类似于此示例.用户可以单击刷新按钮,然后必须使用来自DB的数据更新网格的行.我在刷新按钮处理程序中调用store.load(),我的数据得到更新.这适用于网格面板的第一行(第1页的记录).但是如果用户向下滚动网格则不起作用.在store.load之后,网格将滚动位置重置为顶部.
我要求一个解决方案来重新加载商店并刷新网格,保持当前选择和当前滚动位置.好消息:我拥有商店中每条记录的全局索引.
这是我的代码,DB中有数千个条目.
网格面板:
Ext.define('MyApp.view.MyGrid', {
extend: 'Ext.grid.Panel',
requires:[ 'Ext.grid.plugin.BufferedRenderer'],
alias: 'widget.myGrid',
plugins: 'bufferedrenderer',
loadMask: true,
selModel: {
mode: 'MULTI',
pruneRemoved: false
},
itemSelector: 'div.workspaceItemSelector',
overItemCls: 'workspaceItemMouseOver',
trackOver: true,
autoScroll: true,
verticalScroller: { variableRowHeight: true },
defaultSortOrder: 'ASC',
// and some column definitions ...
});
商店:
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
autoLoad: false,
buffered: true,
pageSize: 100,
leadingBufferZone: 100,
remoteSort: true,
model: 'MyApp.model.MyModel',
storeId: 'myStore',
proxy: {
type: 'rest',
url: 'someUrl',
reader: { type: 'json', totalProperty: 'total', root: …推荐指数
解决办法
查看次数
将负载遮罩应用到也覆盖浮动组件的视口
如何在 Ext.applcation 的启动方法中向视口添加一个加载掩码，当显示时它也将覆盖像窗口这样的浮动组件？
目前遮罩工作但不覆盖任何打开的窗口。
推荐指数
解决办法
查看次数
ExtJS 4:了解hasMany和belongsTo
我一直在努力了解如何使用hasMany和belongsTo很长一段时间.我的理解是hasMany是1:很多关系而且属于多个:1关系 - 除此之外:那么这意味着如果你有一个hasMany关系,在其子模型中需要belongsTo吗？我已经阅读了几篇文章:
- 在Ext.data.reader.Reader页面上加载嵌套数据.
- Ext.data.association.BelongsTo
- Ext.data.association.HasMany
- extjs 4.2中的关联样本:
- ExtJS教程 - HasMany文章
- ExtJS教程 - BelongsTo文章
- hasMany vs belongsTo
- ExtJS 4:具有关联和商店的模型
虽然有点困惑.假设我有以下数据:
var data = {
"config": {
"name": "blah",
"id": 1,
"someconfig": [{
"name": "Services", "tabs": [{
"id": 0, "name": "Details", "layout": "hbox"
}, {
"id": 1, "name": "Sources", "layout": "hbox"
}, {
"id": 2, "name": "Paths", "layout": "hbox"
}, {
"id": 3, "name": "Ports", "layout": "hbox"
}, {
"id": 4, "name": "Levels", "layout": "hbox"
}, {
"id": …推荐指数
解决办法
查看次数
extjs 4.2.1 - storemanager.lookup返回undefined
我有一个非常简单的程序,我尝试将商店连接到Ext.panel.Grid.我似乎无法在我的Main.js调用中获取Ext.data.StoreManager.lookup()以返回除"undefined"之外的任何内容.Ext.create('LeaveRequestGrid.store.LeaveRequestStore')似乎有效(有一些警告),但我想知道正确的方法是做什么的.
LeaveRequestStore.js:
Ext.define('LeaveRequestGrid.store.LeaveRequestStore', {
extend: 'Ext.data.Store',
storeId: 'leaveRequestStore',
autoLoad: true,
fields: [
'dateCreated',
'startDate',
'endDate',
'leaveType',
'totalHours',
'approver',
'status'
],
data: {
'leaveRequest' : [
{
'dateCreated': '12/01/2013' ,
'startDate' : '01/01/2014',
'endDate' : '01/02/2014' ,
'leaveType' : 'Paid Admin Leave' ,
'totalHours' : 16 ,
'approver' : 'John Smith' ,
'status' : 'Pending'
},
{
'dateCreated': '01/01/2014' ,
'startDate' : '02/01/2014',
'endDate' : '02/02/2014' ,
'leaveType' : 'Vacation' ,
'totalHours' : 16 ,
'approver' : 'John Smith' ,
'status' …推荐指数
解决办法
查看次数
ext-all-debug.js vs ext-all-dev.js
ext-all-debug.js和ext-all-dev.js之间的主要区别是什么？
"ext-all-debug.js"主要用于开发和调试.
使用"ext-all-dev.js"会有什么优势吗？
请澄清.
推荐指数
解决办法
查看次数
使用数据 URI 将多个文件下载到一个 Zip 文件 Javascript
我正在使用 EXT JS 4.2，它有一个包含导出到 CSV 按钮的面板。
单击它会下载多个（总共六个）文件。我希望将这些文件下载到一个 ZIP 文件中。
推荐指数
解决办法
查看次数