ExtJS (3)-Custom components (star rating)

Today's introduction to ExtJS's component development, here with star ratings as an example, first look at:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/4C/8B/wKioL1Q_hM_Q7eyeAAC2_zwl99c585.jpg "title=" Starrating.png "alt=" Wkiol1q_hm_q7eyeaac2_zwl99c585.jpg "/>

Then the function operation: when the mouse moves over five stars, there will be a tooltip showing the current score. Hover over the fourth star when the top four stars show a bright smiley face, and when clicked down, lock the smiley face and set the number of copies to 4.

Then let's say the implementation principle, Ext's Component basic unit is ext.component, so the custom component can inherit Component, and then the display part is displayed directly in HTML, including CSS and dynamic events can be edited directly on the HTML Add.

Next, let's look at the code:

Ext.define (' Pactera.widget.StarRating ',  {alias: "widget.starrating",extend:  ' ext.component ', Afterrender:function () { this.callparent ();},//label:  ' score ',////labelwidth: 60,//lablealign: ' Right ',//left,center,right//amsg: [], /*[' is not satisfied | Too bad, and the seller described the serious discrepancy, very dissatisfied, "dissatisfied | Part of the damage, and the seller described the discrepancy, not satisfied with", "general | General quality, no seller described so Good "," satisfaction | good quality, with the seller described the basic consistent, or very satisfied with the "," very satisfied | The quality is very good, and the seller described the exact same, very satisfied "]*/width: 275,     height: 50,    padding: 10,    style: {         color:  ' #000000 ',         backgroundcolor: ' #FFFFFF '     },initcomponent: function () {var me =  this;var date = new date (); Var datetime = date.gettime ();var  Starid = me.id? " Star_ "+me.id:" Star "+datetime;var label = me.label?me.label: ' Scoring '; var labelwidth =  me.labelwIdth?me.labelwidth-13:87;var labelalign = me.lablealign?me.lablealign: ' Right ';var  thiswidth = me.width?me.width:130;var amsg = ["unacceptable| Unacceptable "," poor| Poor "," fair| Fair "," good| Good "," excellent| Excellent "]if (me.amsg) {amsg = me.amsg;} var html =  ' <div id= "' + starid + '"  class= "star"  style= "width: ' + thiswidth+ ' px; > ' +  ' <span style= "width: ' +labelwidth+ ' px;text-align: ' +labelalign+ '"  > ' + label  +  ' </span> ' +  ' <span>:</span> '     +  ' <ul> '     +     ' <li><a href= ' javascript:; >1</a></li> '     +     ' <li><a href= ' javascript:; " >2</a></li> '     +     ' <li><a href= ' javascript:; " >3</a></li> '     +     ' <li><a href= "javascript:;" >4</a></li> '     +     ' <li><a href= ' javascript:; " >5</a></li> '     + ' </ul> '     + ' <span></ Span> '     + ' <p></p> ' + ' </div> ' this.html = html; this.listeners = {' Boxready ': function () {Var ostar = document.getelementbyid (starId); Var ali = ostar.getelementsbytagname ("Li"); Var oul = ostar.getelementsbytagname ( "ul") [0];var ospan = ostar.getelementsbytagname ("span") [1];var op =  Ostar.getelementsbytagname ("P") [0];var i = iscore = me.istar = 0;for  ( i = 1; i <= ali.length; i++) {ali[i - 1].index = i;// Mouse over display score ali[i - 1].onmouseover = function  () {FnpoiNT (this.index);//Floating Layer display op.style.display =  "block";//calculate floating layer position Op.style.left = oul.offsetleft  + this.index * this.offsetWidth - 104 +  "px";//Match floating layer text content op.innerhtml  =  "<em><b>"  + this.index +  "</b> "  + amsg[ This.index - 1].match (/(. +) \|/) [1] +  "</em>"  + amsg[this.index -  1].match (/\| (. +)/) [1]};//Mouse left after resuming last rating ali[i - 1].onmouseout = function  () {fnpoint ();// Close floating layer op.style.display =  "None"};//Click to score Processing ali[i - 1].onclick = function  () {me.istar = this.index;op.style.display =  "None";//ospan.innerhtml =  "<strong >  +  (this.index)  +    Sub </strong>  (" + amsg[this.index -  1].match (/\| (. +)/) [1] +  ")" Me.value = this.index;}} Scoring processing Function fnpoint (IARG) {//Fractional assignment iscore  = iarg | |  me.iStar;for  (i = 0; i < ali.length; i++)  ali[i].classname  = i < iScore ?  "on"  :  "";} Var setvalue = function (Score) {Me.istar =  score;fnpoint (score);} Me.setvalue = setvalue;}} This.callparent ();}});

CSS style code:

. Star Ul{list-style-type:none;}. star{position:relative;margin:0px Auto;}. Star Ul,.star span{float:left;display:inline;height:19px;line-height:19px;}. Star ul{margin:0 10px;padding-start:0px;-webkit-padding-start:0px;-moz-padding-start:0px;}. Star Li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url (http://sandbox.runjs.cn/uploads /rs/285/beoxl0jq/star.png) No-repeat;}. Star Strong{color: #f60;p adding-left:10px;}. Star li.on{background-position:0 -28px;}. Star P{position:absolute;top:20px;width:179px;height:67px;display:none; Background:url (./image/tooltipbg.gif) No-repeat; z-index:100000;padding:7px 10px 0;}. Star P Em{color: #f60;d isplay:block;font-style:normal;}

Here is the calling code:

var starrating = ext.create (' Pactera.widget.StarRating ', {label: ' Is it a good question? ', width:450, Labelwidth:2 Name: ' Starrating '});

Here are a few points to note:

1, Dynamic response events must be written in Boxready , because we manipulate the object is document, so must be generated after the page rendering document.

2, because it is a scoring component, there will be read and write, reading is selected stars after reading a few stars, here we set the direct is value, and write we set the SetValue () method, so in the form table Form, the component can be directly loaded into the style of the score.

3, the content of the ToolTip is also customizable, we can customize the ToolTip whenever the component is instantiated by passing in parameters.

There will certainly be a variety of components in the development of the system, and as long as we have the imagination, we can modularize the functional components to achieve common use.

This article is from the "Snow July" blog, please be sure to keep this source http://xuepiaoqiyue.blog.51cto.com/4391594/1564865

ExtJS (3)-Custom components (star rating)