PDA

View Full Version : Not work in 3.3.0



Mycoding
2 Dec 2010, 6:36 AM
Please give me advice.

I take this example
http://dev.sencha.com/deploy/dev/docs/index.html
and did on it site.
All work in version 3.2.1 but in version 3.3.0 that doesn't work.
Something wrong in it


var viewport = new Ext.Viewport({
layout:'border',
items:[{
cls: 'docs-header',
height: 44,
region:'north',
xtype:'box',
el:'header',
border:false,
margins: '0 0 5 0'
}, api, mainPanel]
});

Error is following

this.el is null
ct.dom.insertBefore(this.el.dom, position); ...
http://vreshenie.ru/ext/ext-all-debug-w-comments.js Line 17274

element header exist.
As i said all work in ExtJS 3.2.1

Here is code of this in more detail


Ext.onReady(function(){
Ext.QuickTips.init();

var api = new ApiPanel();
var mainPanel = new MainPanel();

api.on('click', function(node, e){
if(node.isLeaf()){
e.stopEvent();
mainPanel.loadClass(node.attributes.href, node.id);
}
});

mainPanel.on('tabchange', function(tp, tab){
api.selectClass(tab.cclass);
});
alert(4);

var viewport = new Ext.Viewport({
layout:'border',
items:[{
cls: 'docs-header',
height: 44,
region:'north',
xtype:'box',
el:'header',
border:false,
margins: '0 0 5 0'
}, api, mainPanel]
});

alert(5);
api.expandPath('/root/apidocs');

// allow for link in
var page = window.location.href.split('?')[1];
if(page){
var ps = Ext.urlDecode(page);
var cls = ps['class'];
mainPanel.loadClass('output/' + cls + '.html', cls, ps.member);
}

viewport.doLayout();
setTimeout(readyEffects, 250);
});


Could you be so kind to help me?

mankz
2 Dec 2010, 10:45 AM
No need to call doLayout on your viewport. Post definition of ApiPanel, MainPanel and your HTML page

Mycoding
2 Dec 2010, 11:43 AM
Thanks for advice.
But it didn't go to that code.
Error occur early.

mankz
2 Dec 2010, 11:45 AM
Please re-read my post, second half :)

Mycoding
2 Dec 2010, 11:58 AM
I sorry I not very good at English.

Post definition of ApiPanel, MainPanel and your HTML page
Where post definition?
There is before definition.

I really bad in Englsh sorry me.

mankz
2 Dec 2010, 12:21 PM
No worries :) just post the complete code for your sample.

winklerd
2 Dec 2010, 12:25 PM
Mycoding, you say it's happening before the other code. But remember that Ext.onReady is called AFTER all of your JavaScript is loaded. So it's important you show us where you define ApiPanel and MainPanel.

Mycoding
2 Dec 2010, 10:17 PM
Here is the whole file.
But all aplication I can't here place it's very huge and consists of different folders and many many files.



Ext.BLANK_IMAGE_URL = 'resources/s.gif';

Docs = {};

ApiPanel = function() {
ApiPanel.superclass.constructor.call(this, {
id:'api-tree',
region:'west',
split:true,
header: false,
width: 280,
minSize: 175,
maxSize: 500,
collapsible: true,
margins:'0 0 5 5',
cmargins:'0 0 0 0',
rootVisible:false,
lines:false,
autoScroll:true,
animCollapse:false,
animate: true,
collapseMode:'mini',
loader: new Ext.tree.TreeLoader({
preloadChildren: true,
clearOnLoad: false
}),
root: new Ext.tree.AsyncTreeNode({
text:'Ext JS juhjkhjk',
id:'root',
expanded:true,
children:[Docs.classData]
}),
collapseFirst:false
});
// no longer needed!
//new Ext.tree.TreeSorter(this, {folderSort:true,leafAttr:'isClass'});

this.getSelectionModel().on('beforeselect', function(sm, node){
return node.isLeaf();
});
};

var user=Ext.util.Cookies.get('user') || '',
winlogin,
winregistry;

Ext.extend(ApiPanel, Ext.tree.TreePanel, {
initComponent: function(){
this.hiddenPkgs = [];
Ext.apply(this, {
width:220,
tbar:[{
text: '???????????',
id:'button-registration',
iconCls:'icon-registration',
hidden:!!user,
handler:function(){
if(!winregistry){winregistry=new Vreshenie.window.UserRegistryWindow({
id:'win-regitry-form',
title:'???????????'
});}
winregistry.show();
}
},{
text: '????',
id:'button-login',
iconCls:'icon-key',
hidden:!!user,
handler:function(){
if(!winlogin){winlogin=new Vreshenie.window.UserLoginWindow({
title:'???? ? ???????',
id:'win-login-form'
})}
winlogin.show();
}
},{
text:(!user)?'':user,
id:'button-user',
iconCls:'icon-user',
hidden:!user,
handler:Ext.emptyFn
},{
text:'?????',
id:'button-logout',
iconCls:'icon-door-out',
hidden:!user,
handler:logout // ??????? ????????? ?? ?????? resources/js/function/mainpage/logout.js
},'->',{
iconCls: 'icon-expand-all',
tooltip: '????????',
handler: function(){ this.root.expand(true); },
scope: this
}, '-', {
iconCls: 'icon-collapse-all',
tooltip: '????????',
handler: function(){ this.root.collapse(true); },
scope: this
}]
})
ApiPanel.superclass.initComponent.call(this);
},
filterTree: function(t, e){
var text = t.getValue();
Ext.each(this.hiddenPkgs, function(n){
n.ui.show();
});
if(!text){
this.filter.clear();
return;
}
this.expandAll();

var re = new RegExp('^' + Ext.escapeRe(text), 'i');
this.filter.filterBy(function(n){
return !n.attributes.isClass || re.test(n.text);
});

// hide empty packages that weren't filtered
this.hiddenPkgs = [];
var me = this;
this.root.cascade(function(n){
if(!n.attributes.isClass && n.ui.ctNode.offsetHeight < 3){
n.ui.hide();
me.hiddenPkgs.push(n);
}
});
},
selectClass : function(cls){
if(cls){
var parts = cls.split('.');
var last = parts.length-1;
var res = [];
var pkg = [];
for(var i = 0; i < last; i++){ // things get nasty - static classes can have .
var p = parts[i];
var fc = p.charAt(0);
var staticCls = fc.toUpperCase() == fc;
if(p == 'Ext' || !staticCls){
pkg.push(p);
res[i] = 'pkg-'+pkg.join('.');
}else if(staticCls){
--last;
res.splice(i, 1);
}
}
res[last] = cls;

this.selectPath('/root/apidocs/'+res.join('/'));
}
}
});


DocPanel = Ext.extend(Ext.Panel, {
closable: true,
autoScroll:true,

initComponent : function(){
var ps = this.cclass.split('.');
this.title = ps[ps.length-1];
Ext.apply(this,{
tbar: []
});
DocPanel.superclass.initComponent.call(this);
},

directLink : function(){
var link = String.format(
"<a href=\"{0}\" target=\"_blank\">{0}</a>",
document.location.href+'?class='+this.cclass
);
Ext.Msg.alert('Direct Link to ' + this.cclass,link);
},

scrollToMember : function(member){
var el = Ext.fly(this.cclass + '-' + member);
if(el){
var top = (el.getOffsetsTo(this.body)[1]) + this.body.dom.scrollTop;
this.body.scrollTo('top', top-25, {duration:0.75, callback: this.hlMember.createDelegate(this, [member])});
}
},

scrollToSection : function(id){
var el = Ext.getDom(id);
if(el){
var top = (Ext.fly(el).getOffsetsTo(this.body)[1]) + this.body.dom.scrollTop;
this.body.scrollTo('top', top-25, {duration:0.5, callback: function(){
Ext.fly(el).next('h2').pause(0.2).highlight('#8DB2E3', {attr:'color'});
}});
}
},

hlMember : function(member){
var el = Ext.fly(this.cclass + '-' + member);
if(el){
if (tr = el.up('tr')) {
tr.highlight('#cadaf9');
}
}
}
});


MainPanel = function(){

this.searchStore = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/playpen/api.php'
}),
reader: new Ext.data.JsonReader({
root: 'data'
},
['cls', 'member', 'type', 'doc']
),
baseParams: {},
listeners: {
'beforeload' : function(){
this.baseParams.qt = Ext.getCmp('search-type').getValue();
}
}
});

MainPanel.superclass.constructor.call(this, {
id:'doc-body',
region:'center',
margins:'0 5 5 0',
resizeTabs: true,
minTabWidth: 135,
tabWidth: 135,
plugins: new Ext.ux.TabCloseMenu(),
enableTabScroll: true,
activeTab: 0,
items: {
id:'welcome-panel',
title: '????????.ru',
autoLoad: {url: 'welcome.html', callback: this.initSearch, scope: this},
iconCls:'icon-docs',
autoScroll: true,
tbar: []
}
});
};

Ext.extend(MainPanel, Ext.TabPanel, {

initEvents : function(){
MainPanel.superclass.initEvents.call(this);
this.body.on('click', this.onClick, this);
},

onClick: function(e, target){
if(target = e.getTarget('a:not(.exi)', 3)){
var cls = Ext.fly(target).getAttributeNS('ext', 'cls');
e.stopEvent();
if(cls){
var member = Ext.fly(target).getAttributeNS('ext', 'member');
this.loadClass(target.href, cls, member);
}else if(target.className == 'inner-link'){
this.getActiveTab().scrollToSection(target.href.split('#')[1]);
}else{
window.open(target.href);
}
}else if(target = e.getTarget('.micon', 2)){
e.stopEvent();
var tr = Ext.fly(target.parentNode);
if(tr.hasClass('expandable')){
tr.toggleClass('expanded');
}
}
},

loadClass : function(href, cls, member){
var id = 'docs-' + cls;
var tab = this.getComponent(id);
if(tab){
this.setActiveTab(tab);
if(member){
tab.scrollToMember(member);
}
}else{
alert(href);
var autoLoad = {url: href};
if(member){
autoLoad.callback = function(){
Ext.getCmp(id).scrollToMember(member);
}
}
var p = this.add(new DocPanel({
id: id,
cclass : cls,
autoLoad: autoLoad,
iconCls: Docs.icons[cls]
}));
this.setActiveTab(p);
}
},

initSearch : function(){
},

doSearch : function(e){
var k = e.getKey();
if(!e.isSpecialKey()){
var text = e.target.value;
if(!text){
this.searchStore.baseParams.q = '';
this.searchStore.removeAll();
}else{
this.searchStore.baseParams.q = text;
this.searchStore.reload();
}
}
}
});


Ext.onReady(function(){

Ext.QuickTips.init();

var api = new ApiPanel();
var mainPanel = new MainPanel();

api.on('click', function(node, e){
if(node.isLeaf()){
e.stopEvent();
mainPanel.loadClass(node.attributes.href, node.id);
}
});

mainPanel.on('tabchange', function(tp, tab){
api.selectClass(tab.cclass);
});

var viewport = new Ext.Viewport({
layout:'border',
items:[ {
cls: 'docs-header',
height: 44,
region:'north',
xtype:'box',
el:'header',
border:false,
margins: '0 0 5 0'
}, api, mainPanel ]
});

api.expandPath('/root/apidocs');

// allow for link in
var page = window.location.href.split('?')[1];
if(page){
var ps = Ext.urlDecode(page);
var cls = ps['class'];
mainPanel.loadClass('output/' + cls + '.html', cls, ps.member);
}

viewport.doLayout();

setTimeout(readyEffects, 250);
});


Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function(){
if(!this.store.baseParams){
this.store.baseParams = {};
}
Ext.app.SearchField.superclass.initComponent.call(this);
this.on('specialkey', function(f, e){
if(e.getKey() == e.ENTER){
this.onTrigger2Click();
}
}, this);
},

validationEvent:false,
validateOnBlur:false,
trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-search-trigger',
hideTrigger1:true,
width:180,
hasSearch : false,
paramName : 'query',

onTrigger1Click : function(){
if(this.hasSearch){
this.store.baseParams[this.paramName] = '';
this.store.removeAll();
this.el.dom.value = '';
this.triggers[0].hide();
this.hasSearch = false;
this.focus();
}
},

onTrigger2Click : function(){
var v = this.getRawValue();
if(v.length < 1){
this.onTrigger1Click();
return;
}
if(v.length < 2){
Ext.Msg.alert('Invalid Search', 'You must enter a minimum of 2 characters to search the API');
return;
}
this.store.baseParams[this.paramName] = v;
var o = {start: 0};
this.store.reload({params:o});
this.hasSearch = true;
this.triggers[0].show();
this.focus();
}
});


/**
* Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging
* through the list, with item selection occurring when the mouse button is released.
* When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
* on inner elements. Re-enabling editable after calling this will NOT work.
*
* @author Corey Gilmore
* http://extjs.com/forum/showthread.php?t=6392
*
* @history 2007-07-08 jvs
* Slight mods for Ext 2.0
*/
Ext.ux.SelectBox = function(config){
this.searchResetDelay = 1000;
config = config || {};
config = Ext.apply(config || {}, {
editable: false,
forceSelection: true,
rowHeight: false,
lastSearchTerm: false,
triggerAction: 'all',
mode: 'local'
});

Ext.ux.SelectBox.superclass.constructor.apply(this, arguments);

this.lastSelectedIndex = this.selectedIndex || 0;
};

Ext.extend(Ext.ux.SelectBox, Ext.form.ComboBox, {
lazyInit: false,
initEvents : function(){
Ext.ux.SelectBox.superclass.initEvents.apply(this, arguments);
// you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
this.el.on('keydown', this.keySearch, this, true);
this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
},

keySearch : function(e, target, options) {
var raw = e.getKey();
var key = String.fromCharCode(raw);
var startIndex = 0;

if( !this.store.getCount() ) {
return;
}

switch(raw) {
case Ext.EventObject.HOME:
e.stopEvent();
this.selectFirst();
return;

case Ext.EventObject.END:
e.stopEvent();
this.selectLast();
return;

case Ext.EventObject.PAGEDOWN:
this.selectNextPage();
e.stopEvent();
return;

case Ext.EventObject.PAGEUP:
this.selectPrevPage();
e.stopEvent();
return;
}

// skip special keys other than the shift key
if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
return;
}
if( this.lastSearchTerm == key ) {
startIndex = this.lastSelectedIndex;
}
this.search(this.displayField, key, startIndex);
this.cshTask.delay(this.searchResetDelay);
},

onRender : function(ct, position) {
this.store.on('load', this.calcRowsPerPage, this);
Ext.ux.SelectBox.superclass.onRender.apply(this, arguments);
if( this.mode == 'local' ) {
this.calcRowsPerPage();
}
},

onSelect : function(record, index, skipCollapse){
if(this.fireEvent('beforeselect', this, record, index) !== false){
this.setValue(record.data[this.valueField || this.displayField]);
if( !skipCollapse ) {
this.collapse();
}
this.lastSelectedIndex = index + 1;
this.fireEvent('select', this, record, index);
}
},

render : function(ct) {
Ext.ux.SelectBox.superclass.render.apply(this, arguments);
if( Ext.isSafari ) {
this.el.swallowEvent('mousedown', true);
}
this.el.unselectable();
this.innerList.unselectable();
this.trigger.unselectable();
this.innerList.on('mouseup', function(e, target, options) {
if( target.id && target.id == this.innerList.id ) {
return;
}
this.onViewClick();
}, this);

this.innerList.on('mouseover', function(e, target, options) {
if( target.id && target.id == this.innerList.id ) {
return;
}
this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
this.cshTask.delay(this.searchResetDelay);
}, this);

this.trigger.un('click', this.onTriggerClick, this);
this.trigger.on('mousedown', function(e, target, options) {
e.preventDefault();
this.onTriggerClick();
}, this);

this.on('collapse', function(e, target, options) {
Ext.getDoc().un('mouseup', this.collapseIf, this);
}, this, true);

this.on('expand', function(e, target, options) {
Ext.getDoc().on('mouseup', this.collapseIf, this);
}, this, true);
},

clearSearchHistory : function() {
this.lastSelectedIndex = 0;
this.lastSearchTerm = false;
},

selectFirst : function() {
this.focusAndSelect(this.store.data.first());
},

selectLast : function() {
this.focusAndSelect(this.store.data.last());
},

selectPrevPage : function() {
if( !this.rowHeight ) {
return;
}
var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
this.focusAndSelect(this.store.getAt(index));
},

selectNextPage : function() {
if( !this.rowHeight ) {
return;
}
var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
this.focusAndSelect(this.store.getAt(index));
},

search : function(field, value, startIndex) {
field = field || this.displayField;
this.lastSearchTerm = value;
var index = this.store.find.apply(this.store, arguments);
if( index !== -1 ) {
this.focusAndSelect(index);
}
},

focusAndSelect : function(record) {
var index = typeof record === 'number' ? record : this.store.indexOf(record);
this.select(index, this.isExpanded());
this.onSelect(this.store.getAt(record), index, this.isExpanded());
},

calcRowsPerPage : function() {
if( this.store.getCount() ) {
this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
this.rowsPerPage = this.maxHeight / this.rowHeight;
} else {
this.rowHeight = false;
}
}

});

Ext.Ajax.on('requestcomplete', function(ajax, xhr, o){
if(typeof urchinTracker == 'function' && o && o.url){
urchinTracker(o.url);
}
});

Condor
3 Dec 2010, 4:14 AM
1. Does your html contain an element with id="header"?
2. Upgrade to Ext 3.3.1 - there was a bug affecting Ext.onReady in IE in Ext 3.3.0.
3. I'm not sure, but I don't think you can safely use Ext.util.Cookies.get outside Ext.onReady.

Mycoding
3 Dec 2010, 7:49 AM
1 - "header" exist and as I said all work in version 3.2.1
2 - Thanks for advice I will upgrade
3 - Why do all avoid of using Ext.util.Cookies ? Could you so kind to tell what's wrong with it.
I use ExtJS way of cookies and like it very much, but in many samples is used javascript way with document.cookie

Condor
3 Dec 2010, 7:51 AM
No, you don't have to avoid cookies. I'm just not sure if you can use them outside Ext.onReady.

Mycoding
4 Dec 2010, 4:09 AM
In version 3.3.1 all work.
Thanks a lot.

But actually i don't like new gray style the old was better.

Thanks to all.