ExtJS 4.2 评分组件

3.2 微信Web开发者工具

在【小程序】公布的还要,微信也宣布了新的Web开发者工具,可访问此网址进行下载:

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

运行图

葡京在线开户 1

葡京在线开户, 

注意:要动用此意义,必须在创设的合作社号里开启【web开发者工具】。

敞开途径:集团号 → 设置 → 作用设置 → web开发者工具

葡京在线开户 2

 

上一小说是扩大ExtJS自带的Date组件。在此处将创立3个评分组件。

2. 商厦号介绍

3.2 在线示例

地址http://www.akmsg.com/ExtJS/index.html#App.Demo.RatingStarFiledDemoTab

 

End

Web开发之路类别小说

食谱加载中…

2.4 手提式有线电电话机端呈现

葡京在线开户 3

 

1.4 成员

名称 类型 说明
value 属性 初始化时指定星数,数值范围0~5。默认为0。
setValue(value) 方法 设置评分组件的数值,数值范围0~5。
getValue() 方法 获取评分组件的数值。

 

2.1 特点

1)
公司号是一种面向企业中间采取的公众号,唯有公司通讯录的积极分子才能关怀公司号.

2)
可定制多少个使用,并铺排相关职员走访特定应用。集团号里能够涵盖N个服务号应用。

3) 无界定音讯,每日可群发账号上限数*30人次。

 

2.2 代码

Ext.create('Js.ux.RatingStarField', {
    fieldLabel: '发货速度',
    labelWidth: 60,
    width: 220,
}),
Ext.create('Js.ux.RatingStarField', {
    fieldLabel: '服务态度',
    labelWidth: 60,
    width: 220,
}),
Ext.create('Js.ux.RatingStarField', {
    fieldLabel: '描述相符',
    labelWidth: 60,
    width: 220,
    value:3
})

  

2.3 后台展现

葡京在线开户 4

 

1.3 图标

葡京在线开户 5  

 

3.3 WeUI库

WeUI是微信官方布署团队为微信 Web
开发量身设计,能够令用户在HTML5运用中的使用感知特别统一。

含蓄button、cell、dialog、 progress, toast、article、icon等各式成分。

在线演示地址:https://weui.io/

GitHub:https://github.com/weui/weui

 

End

挪动端支出小说导航

菜单加载中…

2.1 运行图

葡京在线开户 6

 

2.2 注册

登记地方https://mp.weixin.qq.com/cgi-bin/readtemplate?t=register/step1_tmpl&lang=zh_CN

若想体验测试账号,只需在账号类型这一步选用【测试号】。

 

3. 能源下载

目录

1.
微信公众号分类

  1. 供销合作社号介绍

3.
开发能源

 

目录

1.
介绍

  1. 示例

3.
财富下载

 

1. 微信公众号分类

认识公司号在此以前,先要知道微信公众号的两种分类。

微信公众号首要面向有名气的人、政坛、媒体、公司等机构推出的合作推广工作,到最近甘休有以下4种账号:

1)
订阅号:主要偏于为用户传达资源消息(类似报纸杂志),认证前后都以天天只好够群发一条音信;

2)
服务号:主要偏于服务交互(类似银行,114,提供劳务查询),认证前后都以种种月可群发4条音讯;

3)
企业号:主要用于集团内部通信应用,必要先有成员的报导音信表达才得以关注成功公司号;

4) 小程序:一种新的开放能力,开发者可以快速地开发一个小程序。

详见不同可访问此地方http://kf.qq.com/faq/140806zARbmm140826M36RJF.html

 

1.1 JavaScript代码

/*!
* 评分组件
*/
Ext.define('App.Demo.RatingStarFiledDemoTab', {
    extend: 'Ext.panel.Panel',
    layout: 'fit',
    closable: true,
    reload: function () {
    },
    initComponent: function () {
        var me = this; 

        // panel渲染后
        me.on('afterrender', function () {

        });
        var _container = AkExtJS.extjs.createPanel({
            layout: 'vbox',
            items: [
                Ext.create('Ext.form.Display', {
                    width: '100%',
                    value: '<h1>评分组件</h1>' +
                        '<p>文章地址:<a href="http://www.cnblogs.com/polk6/p/5965570.html" target="_blank">http://www.cnblogs.com/polk6/p/5965570.html</a></p>' +
                        '<p>此处为创建一个新的组件:评分组件</p>'
                }),
                Ext.create('Js.ux.RatingStarField', {
                    name: 'speedScore',
                    fieldLabel: '发货速度',
                    labelWidth: 60,
                    width: 220,
                }),
                Ext.create('Js.ux.RatingStarField', {
                    name: 'serviceScore',
                    fieldLabel: '服务态度',
                    labelWidth: 60,
                    width: 220,
                }),
                Ext.create('Js.ux.RatingStarField', {
                    name: 'desScore',
                    fieldLabel: '描述相符',
                    labelWidth: 60,
                    width: 220,
                    value:3
                }),
                Ext.create('Ext.button.Button', {
                    text: '设置【发货速度】为5星',
                    handler: function (thisControl, event) {
                        _container.down('[name=speedScore]').setValue(5);
                    }
                }),
                Ext.create('Ext.button.Button', {
                    text: '取值',
                    handler: function (thisControl, event) {
                        var txt = '发货速度:' + _container.down('[name=speedScore]').getValue() + '<br/>' +
                                '服务态度:' + _container.down('[name=serviceScore]').getValue() + '<br/>' +
                                '描述相符:' + _container.down('[name=desScore]').getValue() + '<br/>';
                        Ext.Msg.alert('系统提示', txt);
                    }
                }),
            ]
        });

        Ext.applyIf(me, {
            items: [_container]
        });
        me.callParent(arguments);
    }
});

 

3.1 网站消息

微信集团号官网https://qy.weixin.qq.com/

接口文书档案http://qydev.weixin.qq.com/wiki/index.php

开发者论坛http://qydev.weixin.qq.com/qa/index.php

 

2. 示例

3. 开发能源

下边将表明开发微信公司号的片段能源。

3.1 Demo下载

地址ExtJS4.2_RatingStarDemo.zip

 

1.2 Css样式

.x-rating{min-height:25px;}
.x-rating .x-component-outer{position: relative; padding:0.6em;min-height: 40px;}
.x-rating .starContainer, .x-rating .starFakeContainer{position:absolute; top:0px;left:0px; width:100%; height:100%; }
.x-rating .starFakeContainer{z-index:10;}
.x-rating .starContainer{display:-webkit-box; -webkit-box-align:center;-webkit-box-pack:center;}
.x-rating .starContainer .center, .x-rating .starContainer .left, .x-rating .starContainer .right{-webkit-box-flex:1}
.x-rating .star{border:0px !important;padding:0px !important;margin:0px 0px 0px -12.5px !important;position:absolute; left:16.66%; -webkit-mask:url(star.png) left center no-repeat; -webkit-mask-size:25px 25px; background-color:#ff0000; width:25px; height:25px; opacity:.2; -webkit-transform: scale(1,1);}
.x-rating .star2{left:33.33%;}
.x-rating .star3{left:49.99%;}
.x-rating .star4{left:66.66%;}
.x-rating .star5{left:83.33%;}
.x-rating .star.active{-webkit-transform: scale(1,1); opacity:1;}

 

1. 介绍

代码参考的是 Sencha Touch
2上的1个RatingStar扩展插件,在此基础上做了移植到ExtJS
4.2,并扩张了默许值、form表单辅助等职能。