6
में कस्टम ओवरफ्लो हैंडलर कार्यान्वयन मेरे पास दो toolbars के साथ पैनल है। मैं overflowHandler के रूप में उपयोग करने के लिए कस्टम क्लास को कैसे कार्यान्वित कर सकता हूं, जो घटक को पहले टूलबार के ओवरफ़्लो पर दूसरी टूलबार में ले जायेगा?एक्स्टजेस 4
मैंने Ext.layout.container.boxOverflow.Menu का कोड उपयोग करने का प्रयास किया, लेकिन मेरा दूसरा टूलबार बस छुपाता है।
यहां मेरा कोड है, जिसे toolbar overflowExtJS 4 से वितरित किया गया था।
Ext.require(['Ext.window.Window', 'Ext.toolbar.Toolbar', 'Ext.menu.ColorPicker', 'Ext.form.field.Date']);
Ext.onReady(function(){
/**
* Override for implementing tbar2
*/
Ext.override(Ext.panel.Panel, {
bridgeToolbars : function() {
var toolbar;
this.callParent(arguments);
if (this.tbar2) {
if (Ext.isArray(this.tbar2)) {
toolbar = {
xtype : 'toolbar',
items : this.tbar2
};
}
else if (!toolbar.xtype) {
toolbar.xtype = 'toolbar';
}
toolbar.dock = 'top';
toolbar.isTbar2 = true;
this.dockedItems = this.dockedItems.concat(toolbar);
this.tbar2 = null;
}
},
onRender : function() {
this.callParent(arguments);
var topBars = this.getDockedItems('toolbar[dock="top"]'),
i,
len;
for (i = 0, len = topBars.length; i < len; i++) {
if (topBars[i].isTbar2) {
this.tbar2 = topBars[i];
break;
}
}
},
/**
* Lazy creates new toolbar and returns it
* @param {Ext.panel.Panel} panel
* @param {String} position
* @return {Ext.toolbar.Toolbar}
*/
getDynamicTBar : function (position) {
var panel = this,
params,
tb;
position = position || 'top';
if (position === 'tbar2') {
tb = panel.tbar2;
params = {dock : 'top', isTbar2 : true};
}
else {
tb = panel.getDockedItems('toolbar[dock="' + position + '"]');
params = {dock : position};
if (tb.length > 0) {
tb = tb[0];
}
}
if (!tb) {
console.log('created tb at ' + position);
tb = Ext.create('Ext.toolbar.Toolbar', params);
panel.addDocked(tb);
}
return tb;
}
});
Ext.define('Ext.layout.container.boxOverflow.TBar2', {
extend : 'Ext.layout.container.boxOverflow.None',
constructor : function() {
this.tbar2Items = [];
return this.callParent(arguments);
},
beginLayout : function (ownerContext) {
this.callParent(arguments);
this.clearOverflow(ownerContext);
},
beginLayoutCycle : function (ownerContext, firstCycle) {
this.callParent(arguments);
if (!firstCycle) {
this.clearOverflow(ownerContext);
this.layout.cacheChildItems(ownerContext);
}
},
getOverflowCls : function() {
return Ext.baseCSSPrefix + this.layout.direction + '-box-overflow-body';
},
_asLayoutRoot : { isRoot : true },
clearOverflow : function() {
if (this.tbar2) {
this.tbar2.suspendLayouts();
this.tbar2.hide();
this.tbar2.resumeLayouts(this._asLayoutRoot);
}
this.tbar2Items.length = 0;
},
handleOverflow : function (ownerContext) {
var me = this,
layout = me.layout,
owner = layout.owner,
names = layout.getNames(),
startProp = names.x,
sizeProp = names.width,
plan = ownerContext.state.boxPlan,
available = plan.targetSize[sizeProp],
childItems = ownerContext.childItems,
len = childItems.length,
childContext,
comp, i, props,
tbarOwner = owner.ownerCt;
owner.suspendLayouts();
// Hide all items which are off the end, and store them to allow them to be restored
// before each layout operation.
me.tbar2Items.length = 0;
for (i = 0; i < len; i++) {
childContext = childItems[i];
props = childContext.props;
if (props[startProp] + props[sizeProp] > available) {
comp = childContext.target;
me.tbar2Items.push(comp);
owner.remove(comp, false);
}
}
owner.resumeLayouts();
if (!me.tbar2 && (tbarOwner instanceof Ext.panel.Panel)) {
me.tbar2 = tbarOwner.getDynamicTBar('tbar2');
}
me.tbar2.suspendLayouts();
me.tbar2.show();
Ext.each(me.tbar2Items, function(item, index) {
me.tbar2.add(item);
});
me.tbar2.resumeLayouts(me._asLayoutRoot);
}
});
var handleAction = function(action){
Ext.example.msg('<b>Action</b>', 'You clicked "' + action + '"');
};
var colorMenu = Ext.create('Ext.menu.ColorPicker', {
handler: function(cm, color){
Ext.example.msg('Color Selected', '<span style="color:#' + color + ';">You choose {0}.</span>', color);
}
});
var showDate = function(d, value) {
Ext.example.msg('<b>Action date</b>', 'You picked ' + Ext.Date.format(value, d.format));
};
var fromPicker = false;
Ext.create('Ext.window.Window', {
title: 'Standard',
closable: false,
height:250,
width: 500,
bodyStyle: 'padding:10px',
contentEl: 'content',
autoScroll: true,
tbar: Ext.create('Ext.toolbar.Toolbar', {
layout: {
overflowHandler: 'TBar2'
},
items: [{
xtype:'splitbutton',
text: 'Menu Button',
iconCls: 'add16',
handler: Ext.Function.pass(handleAction, 'Menu Button'),
menu: [{text: 'Menu Item 1', handler: Ext.Function.pass(handleAction, 'Menu Item 1')}]
},'-',{
xtype:'splitbutton',
text: 'Cut',
iconCls: 'add16',
handler: Ext.Function.pass(handleAction, 'Cut'),
menu: [{text: 'Cut menu', handler: Ext.Function.pass(handleAction, 'Cut menu')}]
},{
text: 'Copy',
iconCls: 'add16',
handler: Ext.Function.pass(handleAction, 'Copy')
},{
text: 'Paste',
iconCls: 'add16',
menu: [{text: 'Paste menu', handler: Ext.Function.pass(handleAction, 'Paste menu')}]
},'-',{
text: 'Format',
iconCls: 'add16',
handler: Ext.Function.pass(handleAction, 'Format')
},'->', {
fieldLabel: 'Action',
labelWidth: 70,
width: 180,
xtype: 'datefield',
labelSeparator: '',
enableKeyEvents: true,
listeners: {
expand: function(){
fromPicker = true;
},
collapse: function(){
fromPicker = false;
},
change: function(d, newVal, oldVal) {
if (fromPicker || !d.isVisible()) {
showDate(d, newVal);
}
},
keypress: {
buffer: 500,
fn: function(field){
var value = field.getValue();
if (value !== null && field.isValid()) {
showDate(field, value);
}
}
}
}
}, {
text: 'Sell',
iconCls: 'money-down',
enableToggle: true,
toggleHandler: function(button, pressed) {
Ext.example.msg('<b>Action</b>', 'Right ToggleButton ' + (pressed ? 'Buy' : 'Sell'));
button.setText(pressed ? 'Buy' : 'Sell')
button.setIconCls(pressed ? 'money-up' : 'money-down')
}
}, {
text: 'Choose a Color',
menu: colorMenu // <-- submenu by reference
}]
})
}).show();
});
क्या सही संस्करण आर यू उपयोग करने के बजाय
Ext.का उपयोग करना चाहिए? – dbrinExtJS का मेरा संस्करण 4.1.2 है –