我有一个困扰我的问题.

我有一个网格,当我点击项目时,我想打开一个窗口来编辑该项目.很标准的东西.问题是,我想确保记录是最新的,因为使用该程序的其他人可能已经更改它甚至删除它.

我可以重新加载商店,但我只想要检查一个特定的记录...所以我想我会去获取数据,建立另一条记录并替换商店中现有的记录,但我真的想知道最好的方法去做这个

请记住RESTful代理对我来说不是一个选项,即使我不知道更新操作是否适用于这种情况(服务器 - >客户端).

编辑:这可能有助于某人:我所做的只是将数据和原始对象从新记录复制到旧记录,然后"提交"更改.为我工作.

谢谢.

我按照MVC结构构建我的ExtJS 4应用程序.我想制作一个可扩展的网格MyGrid,它具有一些我可以重复使用的功能.因此,我猜,它应该有自己的控制器,它也是扩展的,因此功能是继承的.这怎么做得好？

在下面的代码中,我将说明如何使用MyExtendedGrid扩展控制器MyGrid.我意识到我正在覆盖MyGrid控制器中的init函数,因此它永远不会被调用.问题是通过从MyExtendedGrid init调用MyGrid中的"super" init来解决问题,还是合并控制对象？这是在MVC精神中这样做的正确方法吗？如果是这样,怎么样？

controller/MyGrid.js:

Ext.define('App.controller.MyGrid', {
    extend: 'Ext.app.Controller',
    refs: [
        {
            ref: 'myGridView',
            selector: 'mygrid'
        }
    ],
    init: function() {
        var me=this;
        me.control({
            'mygrid textfield[name=searchField]': {
                change: function() {
                    var view = me.getMyGridView();
                    // Do something with view
                }
            }
        });
    }
});

controller/MyExtendedGrid.js:

Ext.define('App.controller.MyExtendedGrid', {
    extend: 'App.controller.MyGrid',
    views: [
        'grids.MyExtendedGrid'],
    refs: [
        {
            ref: 'myExtendedGridView',
            selector: 'myextendedgrid'
        }
    ],
    init: function() {
        var me=this;
        me.control({
            'myextendedgrid': {
                // Some control code …

我有两个模型:Page和Department.我在extjs的列表视图中显示页面,我想在List视图中显示Department的Name而不是department_id.我没有实际将部门添加到页面VIA GUI,只是通过直接的db insert语句,但我想至少能够在列表视图中显示部门名称.

到目前为止,我有以下内容,这是显示department_id

楷模

Ext.define('ExtMVC.model.Department', {
    extend: 'Ext.data.Model',
    fields: ['name']
});

Ext.define('ExtMVC.model.Page', {
    extend: 'Ext.data.Model',
    fields: ['title','body','department_id'],
    associations: [
        {type: 'belongsTo', model: 'Department'}
    ]
});

商店

Ext.define('ExtMVC.store.Pages', {
    extend: 'Ext.data.Store',
    model: 'ExtMVC.model.Page',
    autoLoad: true,
    proxy: {
      type: 'rest',
      url: '/admin/pages',
      format: 'json'
    }
});
Ext.define('ExtMVC.store.Departments', {
    extend: 'Ext.data.Store',
    model: 'ExtMVC.model.Department',
    autoLoad: true,
    proxy: {
      type: 'rest',
      url: '/admin/departments',
      format: 'json'
    }
});

列表显示

Ext.define('ExtMVC.view.page.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.pagelist',

    title : 'All Pages',
    store: 'Pages',

    initComponent: function() { …

假设我有一个主控制器,那么我的应用程序为每个"模块"都有一个控制器.这个主控制器包含视口,然后是一个标题(带有一个菜单)+一个"居中"的容器,它在开头是空的.

菜单中的单击将更改当前模块/控制器,并且adhoc视图(属于此控制器)将显示在居中容器中.

我认为这是一个非常简单的场景,但奇怪的是我没有找到合适的方法来做到这一点.有任何想法吗？非常感谢!

我有3个组合框.当您单击第一个框时,第二个框需要更新以显示相关数据.我选择第一个组合,第二个框完美更新.但是,如果我再次尝试相同的步骤,第二个框不会停止加载(见图)

这是我视图中的代码

{
    xtype: 'combobox',
    name: 'Clients',
    id: 'clients',
    displayField: 'Name',
    store: 'Clients',
    queryMode: 'local',
    mode: 'local',
    valueField: 'Id',
    fieldLabel: 'Clients'
},{
    xtype: 'combobox',
    name: 'Projects',
    id: 'projects',
    displayField: 'Name',
    editable: false, 
    store: 'Projects',
    queryMode: 'local',
    mode: 'local',
    valueField: 'Id',
    fieldLabel: 'Projects'
}

从我的控制器

stores: ['Projects', 'Clients', 'Jobs'],

init: function () {
    this.control({
        '#clients': {
            change: this.onClientSelect
        },
        'processlist button[action=copy]': {
            click: this.onCopyPart
        },
        '#processColourContainer #processColourGrid': {
            edit: this.onPurchaseOrderColourUpdate
        }
    });
},

onLaunch: function () {             
    var clients = this.getClientsStore(); …

我有一个功能,在我的一个控制器中描述.该函数负责创建一个表单,我需要在不同的情况下使用不同的视图.是否可能以及从我需要的视图中调用此函数的方法是什么,而无需在每个控制器中添加相同的代码.

这是控制器的代码,我尝试使用其他控制器的方法:

Ext.define('MY.controller.EventsController', {
    extend: 'Ext.app.Controller',
    models: [
        'EventsRecord'],

    stores: [
        'Events'],

    views: [
        'EventsGrid'],
    refs: [{
        ref: 'EventsGrid',
        selector: 'CalendarEvent'
    }],

    init: function () {
        this.control({
            'CalendarEvent': {
                afterEditFinish: this.askForNotify,
                deleteEvent: this.deleteEvent,
                calendarEditFunc: this.calendarEditFunc,
                addCalendarEvent: this.addCalendarEvent,
                itemclick: this.onSelectEnableBtn
            }
        })

    },

在这里,我尝试使用类似和var contr = Ext.getController('SomeController');......的东西......

askForNotify: function(editor, e) {...

我非常喜欢ExtJS Actions的概念.我看了这个例子,它(几乎)正是我需要的.唯一的问题是我正在尝试使用MVC模式.我有:

• invoicelist(查看)
• Inovice(控制器)
• 发票(型号)
• 发票(商店)

我在哪里以及如何为Action定义？他们应该在控制器中吗？如何打电话给他们并参考他们？我需要几个动作,它们将在上下文菜单和invoicelist工具栏的菜单中.

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

在我的extjs项目中,我有一些panel我toolbar在mouseEnter活动中展示的东西.这工作正常.但是当我刚用新的html更新面板时,mouseenter事件就不起作用了.

panel.update('hello');

然后我通过Chrome开发人员工具意识到该update方法正在擦除最后一个嵌套的div内部面板,然后再将新文本写入其中(即'hello').

每个面板都有3/4嵌套div,但是当我们使用update()时,面板只有2嵌套的div？

这是没有调用mouseenter事件的主要原因,panel因为我认为Ext无法panel在update()方法之后将其识别为有效面板.

无论如何,后来我通过检查panelchrome控制台中的变量解决了这个问题,如下所示.

panel.body.dom.childNodes[0].children[0].childNodes[0].data = 'hello';

上面的实现看起来很恶心,但它对我有用.还有其他好办法吗？

编辑:

//In controller
this.control({          
   '#monthCalendar>panel>panel': {
        render: function(container){
             container.on('mouseenter',function(){                              
                  //do something here                                   
             },container,{element: 'el'});
        }
    }
})

更新前:

<div class="x-panel x-box-item x-panel-default" id="panel-1078" style="left: 870px; top: 0px; margin: 0px; width: 174px; height: 52px;">
      <div id="panel-1078-body" class="x-panel-body x-panel-body-default x-panel-body-default …

使用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
            // …