identifying sencha controls in the object browser

Hi!



It is a bit more complicated with web controls since they are not directly extending a web page elements so you won't find anything like ClrFullClassName here. Each web control usually has corresponding JavaScript object linked to some page element as its visual representation. Such elements might be identified by special CSS classes applied to them (see "className" property in TestComplete Object Browser). In case of Ext JS Checkbox that classes are "x-field" and "x-form-type-checkbox".



Ext JS has some dedicated ways to identify its controls. I created a simple JScript to demonstrate:

function Test()

{

  var element = Sys.Browser().Page("http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#login-form").Panel("content_panel").Panel("content_panel_body").Panel("content_panel_innerCt").Panel("login_form").Panel("login_form_body").Panel("login_form_innerCt").Table("checkbox");

  Log.Message(IsSenchaControl(element, "checkbox"));

  Log.Message(GetClassName(element));

}





function IsSenchaControl(element, xtype)

{

  var ext = element.ownerDocument.Script.Ext;

  var component = ext.getCmp(element.idStr);

  if (!component)

    return false;

    

  return component.isXType(xtype);

}





function GetClassName(element)

{

  var ext = element.ownerDocument.Script.Ext;

  var component = ext.getCmp(element.idStr);

  if (!component)

    return "";

    

  return ext.getClassName(component);

}





Hope this helps =)