//define a reCaptcha widget.
Ext.define('yiyu.util.ReCaptcha',
{
extend : 'Ext.Component',
alias : 'widget.recaptcha',
onRender : function(ct, position){
var me = this;
me.callParent(arguments);
me.recaptcha = me.el.createChild({
tag : "div",
'id' : me.recaptchaId
});
Recaptcha.create(me.publickey, me.recaptcha.id, {
theme: me.theme,
lang: me.lang,
callback: Recaptcha.focus_response_field
});
//me.recaptcha.setWidth(me.el.getWidth(true));
},
getChallenge: function(){
return Recaptcha.get_challenge();
},
getResponse: function(){
return Recaptcha.get_response();
}
});
//create a ReCaptcha instance and we can use it as item in Form.
var recaptcha = Ext.create('yiyu.util.ReCaptcha',{
name: 'recaptcha',
recaptchaId: 'recaptcha',
publickey: 'Your public Key from ReCaptcha',
theme: 'white',
lang: 'en'
});
Ext.form.field.Text. 2) do not forget the CSS file and images used in CSS. To change the appearance of password meter, you can simply change images used in CSS. Ext.define('yiyu.util.PasswordMeter',
{
extend : 'Ext.form.field.Text',
alias : 'widget.passwordMeter',
inputType : 'password',
reset : function() {
this.callParent();
this.updateMeter(this);
},
//private
onRender : function(container, position) {
var me = this;
me.callParent(arguments);
this.objMeter = me.el.createChild({
tag : "div",
'class' : "strengthMeter"
});
me.objMeter.setWidth(me.el.getWidth(true) - 17);
me.scoreBar = me.objMeter.createChild({
tag : "div",
'class' : "scoreBar"
});
me.scoreBar.setWidth(me.objMeter.getWidth(true));
if (Ext.isIE6) { // Fix style for IE6
this.objMeter.setStyle('margin-left', '3px');
}
},
// private
initEvents : function() {
var me = this, el = me.inputEl;
me.callParent();
me.mon(el, {
scope : me,
keyup : me.updateMeter
});
},
/**
* Sets the width of the meter, based on the score
*
* @param {Object} e
* Private function
*/
updateMeter : function() {
var score, p, maxWidth, nScore, scoreWidth;
score = 0;
p = this.getValue();
maxWidth = this.objMeter.getWidth() - 2;
nScore = this.calcStrength(p);
scoreWidth = maxWidth - (maxWidth / 100) * nScore;
this.scoreBar.setWidth(scoreWidth, true);
},
/**
* Calculates the strength of a password
*
* @param {Object} p
* The password that needs to be calculated
* @return {int} intScore The strength score of the password
*/
calcStrength : function(p) {
var intScore = 0;
// PASSWORD LENGTH
intScore += p.length;
if (p.length > 0 && p.length <= 4) { // length 4 or
// less
intScore += p.length;
} else if (p.length >= 5 && p.length <= 7) {
// length between 5 and 7
intScore += 6;
} else if (p.length >= 8 && p.length <= 15) {
// length between 8 and 15
intScore += 12;
} else if (p.length >= 16) { // length 16 or more
intScore += 18;
}
// LETTERS (Not exactly implemented as dictacted above
// because of my limited understanding of Regex)
if (p.match(/[a-z]/)) {
// [verified] at least one lower case letter
intScore += 1;
}
if (p.match(/[A-Z]/)) { // [verified] at least one upper
// case letter
intScore += 5;
}
// NUMBERS
if (p.match(/\d/)) { // [verified] at least one
// number
intScore += 5;
}
if (p.match(new RegExp(".*\\d.*\\d.*\\d"))) {
// [verified] at least three numbers
intScore += 5;
}
// SPECIAL CHAR
if (p.match(new RegExp("[!,@,#,$,%,^,&,*,?,_,~]"))) {
// [verified] at least one special character
intScore += 5;
}
// [verified] at least two special characters
if (p.match(new RegExp(
".*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~]"
))) {
intScore += 5;
}
// COMBOS
if (p.match(new RegExp("(?=.*[a-z])(?=.*[A-Z])"))) {
// [verified] both upper and lower case
intScore += 2;
}
if (p.match(new RegExp(
"(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])"))) {
// [verified] both letters and numbers
intScore += 2;
}
// [verified] letters, numbers, and special characters
if (p
.match(new RegExp(
"(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!,@,#,$,%,^,&,*,?,_,~])"
))) {
intScore += 2;
}
var nRound = Math.round(intScore * 2);
if (nRound > 100) {
nRound = 100;
}
return nRound;
}
})
.strengthMeter {
border: 1px solid #B5B8C8;
margin: 3px 0 3px 0;
background-image: url(images/meter.gif);
height: 10px;
background-size: 100%;
}
.scoreBar {
background-image: url(images/meter_background.gif);
height: 10px;
background-size: 100%;
line-height: 1px;
font-size: 1px;
float: right;
}
The output of above code is:
Array is: 0 1 Another array is: 2 3 4Now, let's see what happens in ClassManager.js: Code snippet cited from ClassManager.js
return new Class(data, function() {
//If I pass in data having postprocessors,
//all default postprocessors is going to ignored?
var postprocessorStack = data.postprocessors || manager.defaultPostprocessors,
registeredPostprocessors = manager.postprocessors,
index = 0,
postprocessors = [],
postprocessor, postprocessors, process, i, ln;
delete data.postprocessors;
//if my data has just one postprocessor,
//doesn't postprocessorStack.length only equal to 1?
for (i = 0, ln = postprocessorStack.length; i < ln; i++) {
postprocessor = postprocessorStack[i];
if (typeof postprocessor === 'string') {
postprocessor = registeredPostprocessors[postprocessor];
if (!postprocessor.always) {
if (data[postprocessor.name] !== undefined) {
postprocessors.push(postprocessor.fn);
}
}
else {
postprocessors.push(postprocessor.fn);
}
}
else {
postprocessors.push(postprocessor);
}
}
process = function(clsName, cls, clsData) {
postprocessor = postprocessors[index++];
if (!postprocessor) {
manager.set(className, cls);
Ext.Loader.historyPush(className);
if (createdFn) {
createdFn.call(cls, cls);
}
return;
}
if (postprocessor.call(this, clsName, cls, clsData, process) !== false) {
process.apply(this, arguments);
}
};
process.call(manager, className, this, data);
}
I reported a bug here to see if I am right or it is just because I do not understand the code. Please feel free to make comments below if I am wrong. SELECT first and judging if the code need to run INSERT or UPDATE statement. So, I traced the Ext JS 4 code and Zend Framework 1.11 code. I found that these two are not compatiable. I am not sure if we can say it is BUG as this wont happen if either side change their code. Or, both side can change the code to avoid the confilicaton if we say bugs are from both sides.
http://hostname/yourRestServiceURI/yourRecordId/?dc=randomNum
/**
* Specialized version of buildUrl that incorporates the {@link #appendId} and {@link #format} options into the
* generated url. Override this to provide further customizations, but remember to call the superclass buildUrl
* so that additional parameters like the cache buster string are appended
*/
buildUrl: function(request) {
var me = this,
operation = request.operation,
records = operation.records || [],
record = records[0],
format = me.format,
url = me.getUrl(request),
id = record ? record.getId() : operation.id;
if (me.appendId && id) {
if (!url.match(/\/$/)) {
url += '/';
}
url += id; //Why add ID here even for POST? Yiyu Jia
}
if (format) {
if (!url.match(/\.$/)) {
url += '.';
}
url += format;
}
request.url = url;
return me.callParent(arguments);
}
}
| Method | URI | Module_Controller::action |
|---|---|---|
| GET | /product/ratings/ | Product_RatingsController::indexAction() |
| GET | /product/ratings/:id | Product_RatingsController::getAction() |
| POST | /product/ratings | Product_RatingsController::postAction() |
| PUT | /product/ratings/:id | Product_RatingsController::putAction() |
| DELETE | /product/ratings/:id | Product_RatingsController::deleteAction() |
| POST | /product/ratings/:id?_method=PUT | Product_RatingsController::putAction() |
| POST | /product/ratings/:id?_method=DELETE | Product_RatingsController::deleteAction() |
case switch statement as below. You will see when the POST method will be "magically" routed to PUT method if pathElementCount is larger than zero. switch( $values[$this->_actionKey] ){
case 'post':
if ($pathElementCount > 0) {
$values[$this->_actionKey] = 'put';
} else {
$values[$this->_actionKey] = 'post';
}
break;
case 'put':
$values[$this->_actionKey] = 'put';
break;
}
$pathElementCount set? In the same source code file, we can see below statement,//Store path count for method mapping $pathElementCount = count($path);
match. Part of it is cited as below./**
* Matches a user submitted request. Assigns and returns an array of variables
* on a successful match.
*
* If a request object is registered, it uses its setModuleName(),
* setControllerName(), and setActionName() accessors to set those values.
* Always returns the values as an array.
*
* @param Zend_Controller_Request_Http $request Request used to match against this routing ruleset
* @return array An array of assigned values or a false on a mismatch
*/
public function match($request, $partial = false)
{
if (!$request instanceof Zend_Controller_Request_Http) {
$request = $this->_front->getRequest();
}
$this->_request = $request;
$this->_setRequestKeys();
$path = $request->getPathInfo();
$params = $request->getParams();
$values = array();
$path = trim($path, self::URI_DELIMITER);
getPathInfo() function? It is in Zend_Controller_Request_Http. The following code citation will show us that getPathInfo() eeturns everything between the BaseUrl and QueryString and deos something special./**
* Returns everything between the BaseUrl and QueryString.
* This value is calculated instead of reading PATH_INFO
* directly from $_SERVER due to cross-platform differences.
*
* @return string
*/
public function getPathInfo()
{
if (empty($this->_pathInfo)) {
$this->setPathInfo();
}
return $this->_pathInfo;
}
/**
* Set the PATH_INFO string
*
* @param string|null $pathInfo
* @return Zend_Controller_Request_Http
*/
public function setPathInfo($pathInfo = null)
{
if ($pathInfo === null) {
$baseUrl = $this->getBaseUrl(); // this actually calls setBaseUrl() & setRequestUri()
$baseUrlRaw = $this->getBaseUrl(false);
$baseUrlEncoded = urlencode($baseUrlRaw);
if (null === ($requestUri = $this->getRequestUri())) {
return $this;
}
// Remove the query string from REQUEST_URI
if ($pos = strpos($requestUri, '?')) {
$requestUri = substr($requestUri, 0, $pos);
}
if (!empty($baseUrl) || !empty($baseUrlRaw)) {
if (strpos($requestUri, $baseUrl) === 0) {
$pathInfo = substr($requestUri, strlen($baseUrl));
} elseif (strpos($requestUri, $baseUrlRaw) === 0) {
$pathInfo = substr($requestUri, strlen($baseUrlRaw));
} elseif (strpos($requestUri, $baseUrlEncoded) === 0) {
$pathInfo = substr($requestUri, strlen($baseUrlEncoded));
} else {
$pathInfo = $requestUri;
}
} else {
$pathInfo = $requestUri;
}
}
$this->_pathInfo = (string) $pathInfo;
return $this;
}
AbstractStore.js, you can find the following code, which may always return true for a new created record in RowEditing plugin when the store is set as autoSync = true/**
* @private
* Filter function for new records.
*/
filterNew: function(item) {
// only want phantom records that are valid
return item.phantom === true && item.isValid();
},
throw statement in parent class. Ext.define('jia.blog.ParentClass', {
greeting : function(){
throw "Unimplemented method.";
}
}
Ext.define('jia.blog.ChildClass', {
extend: 'jia.blog.ParentClass',
greeting : function(){
alert('I implemented a abstract method');
}
}
mixins as below,//a mixins class to be used as Interface
Ext.define('jia.blog.TechnicalManager', {
level : 'manager',
meetingWithPM : function() {
throw "unimplemented method";
}
});
//a mixins class to be used as Interface
Ext.define('jia.blog.Mother', {
sex : 'female',
feedChild : function() {
throw "unimplemented method";
}
});
Ext.define('jia.blog.WorkingMom', {
mixins: {
inWork: 'jia.blog.TechnicalManager',
atHome: 'jia.blog.Mother'
}
meetingWithPM : function() {
alert('I am meeting with project manager');
}
feedChild : function() {
alert('I am feeding my kids');
}
});
mixins too. I did not do it here just because I want to show how I use mixins as Interface in OOP manner. Actually, Javascript has no class at all. Class here should be called as Ext JS class as Ext JS 4.0 create the infrastructure of Class and Object. extend and mixins are both preprocessors in ExtJS 4.0. I list default preprocessors and postprocessors as below. throw statement we used above does not really force subclass developer to implement methods. Subclass developer will not know until he run the code. This happens there is no something like ExtJS compiler or interpreter. But, we can apply certain OO design concept with it. Also, we need to be careful not to make same properties or function names in different preprocessors or postprocessors as, obviously, ExtJS class functions will deal with these processors in sequence.