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>