extjs4中Ext.draw.Component 绘图实例介绍

1.实现文本绘图

 代码如下 复制代码
[Js]
        Ext.create('Ext.draw.Component', {
            renderTo: Ext.getBody(),
            viewBox: false,
            draggable: {
                constrain: true,                    //允许拖动
                constrainTo: Ext.getBody()
            },
            floating: true,
            autoSize: true,
            items: [{
                type: 'text',
                text: '图形化的文本',
                fill: 'green',
                font: '16px Arial',
                rotate: {
                    degrees: 45
                }
            }]
        });

通过上面的代码，我们可以展示出图片式文本，效果如下：

2.基本图形，路径绘图
我们先通过基本图形绘制一个圆形，一个长方形，最后通过路径语法绘制一个等腰三角形：

 代码如下 复制代码

[Js]
    var drawComponent = Ext.create('Ext.draw.Component', {
        viewBox: false,
        items: [{
            type: 'circle',                     //园
            fill: '#79BB3F',
            radius: 100,
            x: 100,
            y: 100
        }, {
            type: 'rect',                       //矩形
            width: 50,
            height: 30,
            fill: '#f00',
            x: 0,
            y: 0
        }, {
            type: "path",
            path: "M100 0 L150 50 L200 0 Z",    //路径
            "stroke-width": "1",
            stroke: "#000",
            fill: "blue"
        }]
    });

    Ext.create('Ext.Window', {
        width: 230,
        height: 250,
        layout: 'fit',
        items: [drawComponent]
    }).show();

效果如下：

时间： 2024-10-10 01:41:01

extjs4中Ext.draw.Component 绘图实例介绍的相关文章

extjs4中Ext.menu.Menu 菜单功能实例代码

菜单的定义 下面我们来定义一个菜单,它包括一个下拉列表,还有颜色选择器,日期选择器等菜单项.  代码如下 复制代码 [Js]     //下定义一个下拉列表     var combo = Ext.create('Ext.form.ComboBox', {         store: new Ext.data.ArrayStore({             fields: ['id', 'name'],             data: [[1, "张三"], [2, "

extjs4中Ext.ProgressBar进度条控件实例

1.加载进度条  代码如下 复制代码 [html]     <div class="content">         <button id="button1">执行</button>         <div id="p1" style="width: 300px;"></div>     </div><br /> [Js]     //加载

extjs4中Ext.toolbar.Toolbar工具栏控件实例

.在工具栏上添加菜单.按钮.搜索功能 我们这里借用上一篇所讲到的listview控件作为数据展示,把listview放入一个面板控件中,然后把工具栏添加到面板顶部,并且在工具栏中实现数据集的服务端搜索的功能. 首先我们定义一个数据模型和Store:  代码如下 复制代码 [Js]     Ext.define('Datas', {         extend: 'Ext.data.Model',         fields: [         { name: 'IntData', type

extjs4中Ext.window.Window窗口控件的介绍

下面看看面板生成代码: [html]     代码如下 复制代码    <h1>窗口</h1>     <div class="content" style="height:300px">     <button id="button1">打开窗口</button>         <div id="win1"></div>     </

extjs4中Ext.resizer.Resizer 大小变更功能介绍

如下:  代码如下 复制代码 [Js] Ext.onReady(function () {     var basic = Ext.create('Ext.resizer.Resizer', {         target: 'basic',         pinned: true,               //是否显示调节边框         width: 200,         height: 100,         minWidth: 100,         minHeigh

ExtJS4中的requires使用方法示例介绍_extjs

ExtJS4的requires是新增的机制,主要是实现异步加载机制.这样在不点击对应的按钮或者选项的时候就不会加载对应的js文件,提高了加载速度和用户等待时间. requires机制的实现通过一个Ext.Loader.setConfig函数来设置文件寻找的映射目录,然后在需要用到对应js文件的时候使用Ext.require进行加载. 文件的存储结构如下所示:  ux文件夹和lesson2.htm和lesson22.js在相同的目录下,而使用到的MyWin.js存放在ux的文件夹中. 在lesso

ExtJs4中Ext.Ajax的Ajax封装包测试笔记(1/3)

本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作封装,还有扩展的常用函数等.Ajax服务端交互式操作是提交到.NET MVC.后续服务端交互都采用这一方式实现. 一.ExtJs中的Ajax:Ext.Ajax.request 通过客户端向服务端发送Ajax请求,可以"直接"调用MVC的action方法,并传递参数,action返回值可以是普通字符串,也可以是json对象.请求可以添加自定义头信息.看下面例子: 1.异步请求,发送自定义请求头: ht

MySQL中两表UNION查询实例介绍

一,union查询用法 union查询比较简单,就好像把两张表合并了,字段也合成一块 假如是 select * from table1, table2 的话,两个的相同的字段不会合并但 select a1 from table1 union select a1 from table2 这样的话就可以把两个表的a1合成一个 上面不知道你看明白了,没有我们接着看实例 一使用SELECT子句进行多表查询 SELECT 字段名 FROM 表1,表2 - WHERE 表1.字段 = 表2.字段 AND 其

extjs4中Ext.toolbar.Paging分页工具栏控件

 代码如下 复制代码 [Js]     var store = Ext.create('Ext.data.Store', {         fields: ['IntData', 'StringData', 'TimeData'],         pageSize: 15,         proxy: {             type: 'ajax',             url: 'PagingToolbar1Json',             reader: {