彩票走势图

DevExpress DXTREME使用教程:命令详解

原创|使用教程|编辑:郝浩|2013-03-21 15:09:27.000|阅读 805 次

概述:命令主要是关联当前视图的一个抽象操作,帮助生产出真正有着本地化外观和风格的跨平台应用程序,来看一下Dxtreme中的命令。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:


    命令主要是关联当前视图的一个抽象操作,帮助生产出真正有着本地化外观和风格的跨平台应用程序,来看一下DXTREME ENTERPRISE中的命令。

    来看一个例子,假设您有一个视图,在为iPhone设计的应用程序中包含“搜索”和“添加”按钮。“搜索”按钮位于标题栏的左侧,“添加”按钮位于标题栏的右侧。如果说你想要在android 手机上使用这个应用程序,或者是在底部的导航栏上显示“添加”按钮,同时,由于这款手机有内置硬件的“搜索”按钮,你不想在屏幕上显示“搜索”按钮。因此,在 iOS 设备上,您需要两个工具栏项目,同时在Android设备上你也需要一个单独的导航栏项目。你不仅需要两个不同的布局,还需要创建管理在这些平台上的不同的组件。

    代替在不同平台上的手动的管理,你可以为视图定义两个命令,现在你有一个单一的视图,可以同时在iPhone 和 Android 设备上正常工作,并且提供本机的用户体验。

    若要声明一个命令,创建一个空的 div 元素。将该元素的data-dx-role设置为命令,并使用 dxCommand KnockoutJS 绑定到下面指定的命令选项。

Action

当命令执行的时候,调用ViewModel function的名字。

Location

布局位置,用于控制命令的可用性和位置。

Title

命令标题。

<div data-dx-role="view" data-dx-name="details">
 <div data-dx-role="command" 
    data-bind="dxCommand: { action: add, location: 'create', title: 'Add' } "></div>
 <div data-dx-role="command" 
    data-bind="dxCommand: { action: search, location: 'back', title: 'Search' } "></div> 
</div>

    为了可以正常的工作,代码片段包含了在ViewModel 中出现的“搜索”和“添加”功能。此外这个视图显示在定义了“Back” 和&ldquo;Add”位置的布局上,Navbar内置布局就是一个这种布局的例子:

    要在在自定义布局中支持命令,需要在布局中声明 dxList、 dxNavBar 或 dxToolbar组件。设置组件的data-dx-command-container属性值到一个位置列表再映射到组件,使用一个分号隔开。

    dxToolbar组件必须有data-dx-left-locations或者是data-dx-right-locations属性,data-dx-left-locations属性列出了分配给左边的工具栏的位置,data-dx-right-locations属性列出了分配到工具栏的右侧的位置。

    下面的代码片段演示了一个支持命令的自定义布局,声明了一个工具栏的布局有两个命令位置“back”和“create”。命令分配给“back”的位置都显示在左边的工具栏,分配给“create”的位置都显示在右侧的工具栏。

<div data-dx-role="layout" data-dx-name="myLayout">
 <div data-dx-placeholder="header">
   <div data-bind="dxToolbar: {}" 
       data-dx-command-container="back: { showIcon: false }, create: { showText: false }" 
       data-dx-left-locations="back" data-dx-right-locations="create"> </div>
 </div> 
</div>

慧都学院2017全新DevExpress线下研修班火热报名中!



标签:DevExpress

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP