查看

Question

我想按照这些方针编写一个概念验证应用程序：

查看

- a URL text input field at top with Go button
- a big DIV underneath consisting of the rest of the view

控制器

- upon Go pressed, validate the URL text
- set up the URL to the data source
- read data from the data source
- create a nested DIV element for each data, apply CSS rules
- add the element to the big DIV

模型

- define the fields
- define the default ordering

CSS

- define the styles

首先，我上面写的内容是否在ExtJS中工作，还是我要与框架作斗争？特别是，将纯HTML插入为元素节点。

第二，有没有人知道GPL下的现有项目可以作为起点？到目前为止，我所看到的是带有硬编码并设置为自动加载的URL的华丽示例。

Answer 1

你所写的内容没有什么可怕的或令人不安的。

虽然没有太多广告，ExtJS处理自定义HTML＆amp; CSS很好。您可以使用html或tpl配置选项设置一些。后者由XTemplates提供支持，因此您可以执行循环等。使用这些选项和/或自定义CSS时，Ext将计算其在渲染结果周围的布局，自动计算您的自定义样式。现在，在实践中，这对于框架来说是一大堆工作，并且它并不总是按预期工作，并且在某些浏览器上根本不起作用（当然不是那么老的IE）。您应该注意的一个重大缺陷是，您应该始终在px中为CSS使用整数值，因为如果维度在px中解析为十进制值，那么Ext将会阻塞它。

也就是说，由于您显然要使用模型支持数据，因此您应该使用dataview。这是一个允许您在常规Ext存储上使用自定义HTML的组件。然后它为项目选择，分页等提供了好处。它是其他高级数据视图的基类，如Ext网格。

关于URL，您不一定要在模型的代理（或其他地方）中对它们进行硬编码。您可以将网址传递给现有商店的load方法（如文档here所述）。

最后，我不知道现有的项目，但你的POC真的很简单，所以这里有一个fiddle来帮助你入门。代码不是100％干净，特别是在一个文件中定义所有内容，因此缺少所有requires ...但它说明了您询问的大部分要点。阅读有关用于学习如何超越这一点的组件/方法的文档。

这是小提琴的代码：

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

Ext.define('Foo.view.MainController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.main',

    onGo: function() {
        var view = this.getView(),
            url = view.down('textfield').getValue(),
            dataview = view.down('dataview'),
            store = dataview.getStore();
        if (this.isValidUrl(url)) {
            store.load({url: url});
        } else {
            Ext.Msg.alert(
                "Invalid URL",
                "This URL cannot be loaded here: " + url
            );
        }
    },

    // private
    isValidUrl: function(url) {
        return ['data1.json', 'data2.json'].indexOf(url) !== -1;
    }
});

Ext.define('Foo.view.Main', {
    extend: 'Ext.Panel',

    xtype: 'main',
    controller: 'main',

    layout: {
        type: 'vbox',
        align: 'stretch'
    },

    items: [{
        xtype: 'container',
        layout: 'hbox',
        margin: 3,
        defaults: {
            margin: 3
        },
        items: [{
            flex: 1,
            xtype: 'textfield',
            emptyText: "Valid inputs are 'data1.json' or 'data2.json'",
            listeners: {
                specialkey: function(field, e) {
                    if (e.getKey() === e.ENTER) {
                        // custom event, for the fun of it
                        field.fireEvent('enterkey', field, e);
                    }
                },
                // the custom can be bound to controller in "modern ext" way
                enterkey: 'onGo'
            }
        },{
            xtype: 'button',
            text: "Go",
            handler: 'onGo'
        }]
    },{
        flex: 1,
        xtype: 'dataview',
        margin: '0 6 6 6',
        cls: 'my-dataview', // for CSS styling
        store: {
            model: 'Foo.model.Item',
            autoLoad: false
            // default proxy is ajax and default reader is json,
            // which is cool for us
        },
        tpl: '<tpl for=".">' + '<div class="item">{name}</div>' + '</tpl>',
        itemSelector: '.item'
    }]
});

Ext.application({
    name : 'Foo',
    mainView: 'Foo.view.Main'
});

数据视图的一些CSS：

.my-dataview .item {
    padding: 1em;
    border: 1px solid cyan;
    color: magenta;
    float: left;
    margin: 6px;
    width: 100px;
}

一个JSON响应示例（这是最基本的功能......阅读有关代理和读者的更多信息）：

[{
    name: 'Foo'
},{
    name: 'Bar'
},{
    name: 'Baz'
}]

Sencha ExtJS MVC - 在运行时指定的数据源

查看

控制器

模型

CSS

1 个答案: