Dataview中的自定义组件

时间:2016-09-21 13:04:16

标签: extjs extjs6-classic

我想为商店中的每条记录显示一个自定义UI组件。

看起来DataView是执行此操作的最佳方式。有许多旧的链接说明如何通过使用DataViewItem实现这一点,但我在当前的文档中找不到任何内容(我使用的是6.0.2版本)。这可能与extjs6有关吗?以下是我现在使用模板的内容:

var myTpl= new Ext.XTemplate(
    '<tpl for=".">',
        '<div>My object is too complex to be displayed with simple html<div>',
    '</tpl>'   
);

Ext.define( 'MyProject.view.main.MyList', {
    extend: 'Ext.DataView',
    xtype: 'mylist',

    requires: [
        'MyProject.view.main.MyViewModel'
    ],

    viewModel: {
        type: 'myviewmodel'
    },

    bind: {
        store: '{store}'
    },

    // I don't want to do this. I would rather have something like this:
    // itemXType: 'myitem'
    itemTpl: myTpl,

} );

我遗漏了viewModel实现,因为它唯一能做的就是定义一个代理存储。如果你需要,我可以添加它。

还有另一种方法可以实现吗?也许是数据视图以外的东西?

2 个答案:

答案 0 :(得分:0)

ExtJS 6.0.2可以实现。请看一下Touch 2.4 example。这是Touch 2.4的一个例子,但它仍然可以在ExtJS 6.0.2中使用现代工具包。看到这个Sencha fiddle(我刚刚从那里的Touch示例中复制了代码并选择了ExtJS 6.0.2 - Modern toolkit)。关于文档:也许您正在查看经典工具包的文档。没有Ext.DataView,但您可以使用Ext.view.View

简短版本: 使用

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

    // We see if we have a recent push notification date stored in the user defaults.
    // If there hasn't been a recent one sent this if block will not be entered.
    if let mostRecentPushNotificationDate = NSUserDefaults.standardUserDefaults().objectForKey("mostRecentPushNotification") as? NSDate {

        // We find the difference between when the notification was sent and when the app was opened
        let interval = NSDate().timeIntervalSinceDate(mostRecentPushNotificationDate)

        // Check to see if we opened from the push notification
        if let notification = launchOptions?[UIApplicationLaunchOptionsRemoteNotificationKey] as? [String: AnyObject] {
            print("we opened from the push notifcation and the time difference was \(interval) seconds.")
        }

        // We did not open from a push notification
        else {
            print("we opened from the spring board and the time difference was \(interval) seconds.")
        }

        // We remove the object from the store so if they open the app without a notification being sent we don't check this if block
        NSUserDefaults.standardUserDefaults().removeObjectForKey("mostRecentPushNotification")
    }


    return true
}

func application(application: UIApplication, didReceiveRemoteNotification userInfo: [NSObject : AnyObject], fetchCompletionHandler completionHandler: (UIBackgroundFetchResult) -> Void) {

    // Set a flag when a push notification was sent
    NSUserDefaults.standardUserDefaults().setObject(NSDate(), forKey: "mostRecentPushNotification")
}

在您的DataView中。

创建一个扩展的自定义DataItem

 config: {
                defaultType: 'mydataitem',
                useComponents: true
            }

并添加您想要的组件。

答案 1 :(得分:0)

对于Ext 6.2以上的版本,请使用xtype: 'componentdataview'而不是xtype: 'dataview'https://docs.sencha.com/extjs/7.0.0/modern/Ext.dataview.Component.html