extjstools

1. extjs中能动态改变panel的layout吗

有的js插件里面accordion都是一个ui控件，但是Ext是通过布局的方式实现的，可以用面板控件作为它的折叠项，并且还可以用js来翻动活动项。

Ext.create('Ext.Panel',{
title:'容器面板',
renderTo:'div2',
width:400,
height:300,
layout:'accordion',
items:[{
tools:[{type:'gear',handler:function(){
Ext.Msg.alert('提示','配置按钮被点击。');
}
},{type:'refresh'}],
title:'面板1',
xtype:"panel",
html:"子元素1"

},{
title:'面板2',
xtype:"panel",
html:"子元素2"
},{
id:'panel3',
title:'面板3',
xtype:"panel",
html:"子元素3"
}]
});
Ext.create("Ext.Button",{
renderTo:'div2',
text:"打开第三页",
handler:function(){
Ext.getCmp('panel3').expand(true);
}
});

2. extjs中怎么隐藏toolbar的按钮

按我自己使用的版本可这么弄，你参考下：
//仅当管理员登陆则隐藏导入按钮，否则显示导入按钮
if(userRole=role_admin_leader){
Ext.getCmp('btn_ru').setVisible(false);
}else{
Ext.getCmp('btn_ru').setVisible(true);
}

3. Extjs 在一个LovCombo下拉列表里面添加了两个 全选\全不选的 toolbar..按钮..

正好我写了个这样的组件，你上参考地址去看吧。

4. 请教一下extjs中如何把Ext.PagingToolbar的分页按钮和显示信息交换位置，本来是分页按钮在左边

initComponent:function(){
varpagingItems=[this.first=newT.Button({
tooltip:this.firstText,
overflowText:this.firstText,
iconCls:'x-tbar-page-first',
disabled:true,
handler:this.moveFirst,
scope:this
}),this.prev=newT.Button({
tooltip:this.prevText,
overflowText:this.prevText,
iconCls:'x-tbar-page-prev',
disabled:true,
handler:this.movePrevious,
scope:this
}),'-',this.beforePageText,
this.inputItem=newExt.form.NumberField({
cls:'x-tbar-page-number',
allowDecimals:false,
allowNegative:false,
enableKeyEvents:true,
selectOnFocus:true,
submitValue:false,
listeners:{
scope:this,
keydown:this.onPagingKeyDown,
blur:this.onPagingBlur
}
}),this.afterTextItem=newT.TextItem({
text:String.format(this.afterPageText,1)
}),'-',this.next=newT.Button({
tooltip:this.nextText,
overflowText:this.nextText,
iconCls:'x-tbar-page-next',
disabled:true,
handler:this.moveNext,
scope:this
}),this.last=newT.Button({
tooltip:this.lastText,
overflowText:this.lastText,
iconCls:'x-tbar-page-last',
disabled:true,
handler:this.moveLast,
scope:this
}),'-',this.refresh=newT.Button({
tooltip:this.refreshText,
overflowText:this.refreshText,
iconCls:'x-tbar-loading',
handler:this.doRefresh,
scope:this
})];


varuserItems=this.items||.buttons||[];
if(this.prependButtons){
this.items=userItems.concat(pagingItems);
}else{
this.items=pagingItems.concat(userItems);
}
deletethis.buttons;
if(this.displayInfo){
this.items.push('->');
this.items.push(this.displayItem=newT.TextItem({}));
}
Ext.PagingToolbar.superclass.initComponent.call(this);

5. 怎么在extjs的toolbar中加入上传功能，或者在toolbar中增加选择本地文件的对话框

首先在页面中引用这个js
<script type="text/javascript" src="../ext/UploadDialog/Ext.ux.UploadDialog3.0.js"></script>
然后在再你自己的js里的工具条按钮点击事件里加上如下代码，就可回以弹出那个对话答框了，上传功能有些复杂……
var dialog = new Ext.ux.UploadDialog.Dialog({
url: '',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: false
});

dialog.show();

6. extjs 中怎样修改Ext.Toolbar的背景色

可以设置style也可以设置cls属性即引定义好的CSS样式,为其设置背景图片，或者将背景图片设为空指定背景颜色：
法1：
var toolbar = new Ext.Toolbar({
style: 'background-color:Red; background-image:url();',
renderTo: 'toolbarDiv',
items: [{
text: '测试按钮',
handler: function() { }
}, {
xtype:'label',
text:'测试文字'
}]
});

法2：
var toolbar = new Ext.Toolbar({
cls: "toolbar",
renderTo: 'toolbarDiv',
items: [{
text: '测试按钮',
handler: function() { }
}, {
xtype:'label',
text:'测试文字'
}]
});
设置css样式toolbar:
<style type="text/css">
.toolbar{ background-color:Red; background-image:url(); }
</style>