标签: extjs4.2

我最近听说4.2关于MVC应用程序的工作方式有一些重大变化.我下载了测试版,但API似乎完全相同.任何人都可以向我解释即将到来的变化以及这些有什么关系？如果我更新,我是否需要担心所有控制器都会停止工作？

使用Extjs 4.2

我已经阅读了许多文档,谷歌,论坛试图了解组件如何加载以及放置它们的位置,如商店,模型等,但仍然困惑.

这是我试图开始工作的一个例子

应用说明

主菜单包含联系人,项目,人员等等,应用程序首先加载显示静态非数据驱动,然后使用点击联系人显示带有联系人列表的网格.然后,用户单击联系人行,并显示弹出编辑视图.

在contactitview中,联系人被加载到表单中,此外表单还有一个加载ContactTypes商店的组合框.ContactType应设置为该联系人记录的contacttype值.

这是一个常见的方法,考虑到这是一个大型应用程序,我只想在需要时加载数据,即显示视图.

以下是我的一些困惑

1. 您可以在应用程序配置中定义所有控制器,商店,模型,视图,但无论您正在查看哪个页面,都会加载所有内容.此外,如果您的商店中有autoLoad:true,那么即使您没有查看该特定视图,也会对数据库进行所有商店的调用.

2. 在控制器的stores或models属性中指定商店或模型时,具体到底是做什么的？它只是让你轻松引用商店而不是实际创建它或创建它,还是只是设置getter和setter函数以方便使用.例如,如果我在控制器的store属性中指定了一个商店,并且autoLoad为true,则加载所有数据而不需要执行任何其他操作.但我真正想要的是,只有当我点击"联系人"并且显示列表视图时才会加载该商店.所以我设置autoLoad:false并在我的列表函数中手动获取商店使用this.getStore('Contacts').这很好用,但是使用store和models控件的数组属性的目的是什么.我在调试器中看到,如果我不使用存储/模型属性,则会对这些js文件进行get请求.

   对不起,我知道这很多,但对我来说很困惑,并且已经挣扎了一段时间.

3. 最后,只有当您通过设置autoLoad:false并手动加载来单击"联系人"按钮时,才会加载"联系人"网格.现在,当用户单击编辑时,记录加载正常,但如何加载组合框然后选择正确的值.我认为我的部分问题是了解商店模型如何加载和实例化.在我的组合框存储属性中,我已将ContactType指定为存储,但我得到错误存储未定义,因此未加载js文件或未实例化存储.

到目前为止,这是我的代码.

应用代码

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux': "lib/extux",
        'Wakanda': "lib/extux/wakanda"
    }
});
Ext.application({
    name: 'SimplyFundraising',
    autoCreateViewport: true,

    requires: ['Ext.ux.Router', // Require the UX
        'Wakanda.model'
    ],

    controllers: ['Contacts'],
});

联系控制器

Ext.define('SimplyFundraising.controller.Contacts', {
    extend: 'Ext.app.Controller',


    views: ['contacts.List', 'contacts.Edit'],
    init: function() {
        this.control({
            'contactslist': {
                itemdblclick: this.editContact,
                removeitem: this.removeContact
            },
            'contactslist > toolbar > button[action=create]': {
                click: this.onCreateContact
            },
            // 'contactsadd button[action=save]': {
            // click: this.doCreateContact
            // …

我有一个包含大量记录的网格.我根据需要使用过滤器来过滤数据.但我想将过滤后的数据导出到Excel工作表以供进一步使用.

我浏览了一些可用的文章,但它们看起来不同,与最新的4.2版本不兼容.

请以简单的方式帮助我实现这一目标.

非常感谢!

我有一个ExtJS单例类.

作为测试,我在app.js的launch()函数中调用它的方法.

但是没有定义单例静态方法.

我想当我需要课时单身人士变得活跃了吗？

Ext.Loader.setConfig({
    enabled : true,
    paths: {
        'AM': 'app'
    }
});


Ext.application({
    name: 'AM',
    autoCreateViewport: true,


    requires: [
        'AM.localization.ResourceManager'
    ],


    controllers: [
        'Users'
    ],


    launch: function() {
        alert(ResourceManager.initBundleLoader());
    }
});




Ext.define('AM.localization.ResourceManager', {
    alternateClassName: 'ResourceManager',
    singleton: true,

    init: function() {
        this.initBundleLoader();
    },

    statics: {
        test: 'here',
        initBundleLoader: function() {
            debugger;
            Ext.applyIf(Ext.Loader, {
                resourceBundles: new Object()
            });
        },

        registerBundle: function(bundleName, locale) {
            debugger;
            if(!Ext.Loader.hasOwnProperty('resourceBundles')) {
                this.initBundleLoader();
            }
            if(!Ext.Loader.resourceBundles.hasOwnProperty(bundleName)) {
                if(Ext.ClassManager.isCreated('AM.locale.' + locale + '.resources.' + bundleName)) {
                    this.resourceBundles.bundleName = …

我在Extjs应用程序中有一个fileupload字段.我试图通过以下代码将文件加载到服务器的位置:

var form = Ext.getCmp('ProcImpNewSugFileForm').getForm();
var fileNameStr = Ext.getCmp('ProcImpNewSugFileUpload').getValue().split("\\");
if(fileNameStr){
var filename = fileNameStr[fileNameStr.length-1];
if(form.isValid()){
    form.submit({
        url: '/PISRFileUploader.php',            
        waitMsg: 'Uploading your file...',                
        success: function (formPanel, action, result) {
            Ext.Msg.alert('Msg',"Success: "+action.response.responseText);
        },
        failure: function (formPanel, action, result) {
            Ext.Msg.alert('Msg',"Failure: "+action.response.responseText);
        }
    });
   }
}

但是当我尝试上传任何文件时.该文件已加载到服务器,但响应如下:

    Failure: {success:false,message:"Blocked a frame with origin 'http://localhost' from accessing a cross-origin frame."}

提前致谢!

我正在尝试编写一个可重复使用的项目选择面板,其中用户具有可以从中选择的项目的网格以及可用于过滤网格内容的小文本字段.现在,(简化的)视图代码看起来像这样并且有效.

Ext.define('MyApp.view.items.ItemSelectorPanel', {
    extend: 'Ext.panel.Panel',
    require: 'MyApp.view.items.SimpleItemGrid',
    alias: 'widget.ItemSelectorPanel',
    layout: 'form',

    config: {
        itemStore: false
    },

    constructor: function(config) {
        this.initConfig(config);

        this.superclass.constructor.call(this, config);

        this.add([
            {
                fieldLabel: 'Filter',
                name: 'filter'
            },
            {
                xtype: 'SimpleItemGrid',
                collapsible: true,
                store: this.getItemStore()
            }
        ]);

        return this;
    }
});

如您所见,ItemSelectorPanel使用该config属性公开一个接口,其中调用站点可以指定要使用的项目存储.

呼叫站点(在这种情况下,面板被添加到TabPanel):

var panelToAdd = {
    xtype: 'panel',
    title: 'New Selection',
    closable: true,
    padding: 10,
    items: [{
        title: 'Select node',
        xtype: 'ItemSelectorPanel',
        itemStore: itemStore
    }]
};

现在,我喜欢ExtJS 4的声明式风格以及它如何帮助遵循MVC模式.我希望在视图中可以使用最少量的代码.不幸的是,这不起作用:

Ext.define('MyApp.view.items.ItemSelectorPanel', { …

我正在使用ExtJS4并寻找实现"转到顶部"功能的方法.

即在单击"顶部"按钮时,视图应滚动回到组件的顶部.我怎样才能在ExtJS中实现这一目标？

据我所知this,在回调中使用赋值变量,其中this范围可能会发生变化.但是通过ExtJS源我发现它在各种函数中使用但并非总是如此.那么我是否有任何理由将其分配this给范围下的局部变量,或者ExtJS源是否正在与不同的开发人员风格进行斗争？

我在Extjs中有一个GridStore,它可以存储带有两个网格列的记录.我在Grid中存在一条记录时遇到问题,如果我删除了它在服务器端成功删除的网格,但仍然存在于Grid中.

示例代码:

    xtype: 'grid',
    store: 'SampleStore',
    border: false,
    width : 542,
    ref: '../sampleGrid',
    id: 'sampleGrid',
    columns: [
       {
       xtype: 'gridcolumn',
       dataIndex: 'name',
       header: 'Name',
       sortable: true,
   .............
    view: new Ext.grid.GridView({
    forceFit: true
    })

提前感谢您的帮助.

我发现extjs编辑器还有一个问题.

当我复制

<ol type="A" style="margin-top: 0pt; margin-bottom: 0pt;">
      <li style="line-height: 115%; font-size: 11pt; margin-top: 0pt; margin-bottom: 10pt;"><span style="font-family: Calibri; font-size: 11pt;">Main Heading 1</span></li>
   </ol>
   <p style="margin: 0pt 0pt 10pt 72pt; line-height: 115%; text-indent: -18pt; font-size: 11pt;"><span style="font-family: Calibri; font-size: 11pt;">1.</span><span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="font-family: Calibri; font-size: 11pt;">Item 1</span></p>
   <p style="margin: 0pt 0pt 10pt 72pt; line-height: 115%; text-indent: -18pt; font-size: 11pt;"><span style="font-family: Calibri; font-size: 11pt;">2.</span><span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; …