TabPanel、TreePanel、GridPanelのいくつかのレイアウト方法でよく見られる小さな問題
9570 ワード
TabPanel
1、tabタグが一定のブラウザの幅を超えた場合、スクロールバーautoScroll:trueを自動的にロードさせる.
スクロールバーを自動に設定します.これまで効果を表示するには設定する必要があります.
enableTabScrollプロパティは真です
2、右クリックメニューを追加する:
extjsの右クリックコンポーネントTabCloseMenuを使用
3、iframeから親インタフェースを操作する
3.1、得るならparentをそのまま使用する.Ext.getCmp();あるいはparent.変数名
3.2、親コンテナにコンポーネントを追加する場合は、new parentを新規作成する必要があります.Ext.panel();
GridPanel
1、ローカルデータページング
2、バックグラウンドインタラクティブページング
3、gridpanelでフロントデータフォーマットを変換(レンダリング):
3.1、カラムモデルでデータフォーマットを変換する(storeの実際の値は変更しない)
rendererの構成パラメータは次のとおりです.
3.2.storeでデータフォーマットを変換する(storeの値を変更した)
3.3 gridpanelでこの関数をレンダリングし、マウスで指定した列にサムネイルを表示する
4、バックグラウンドで並べ替える
バックグラウンドソートを使用する場合、urlの形式ではなくproxy形式で使用する要求方式が必要であることに注意し、remoteSortをtrueに開きます.gridpanelの列がソートを許可すると、バックグラウンドはsort、dirの対応するソートパラメータを受信します.
treePanel
1、ツリーノードのattributes属性
extのtreePanelにはattributesプロパティがあります.バックグラウンドに与えられた値を含むオブジェクトです.バックグラウンドの必須パラメータはId(ノードを表す)、text(ノード名)です.
注意:
その後、バックグラウンドからこのツリーノードに他のパラメータを渡すには、Id、text以外のキー値ペアを追加するだけで、そのキー値ペアをattributesプロパティに再カプセル化する必要はありません.
2、木を1本作る
3、バックグラウンドパスの値に基づいて木を構築する
tree.getLoader().dataUrl = ' ';
//値をとるurl、渡された値はjsonオブジェクトの配列[{id:'1',text:'a',leaf:true},{id:'2',text:'b',children:[{text:'2.1',leaf:true}]}]
または、ツリーを構築するときに、属性dataUrlを直接指定します.
tree.root.reload();//ツリー構造のリフレッシュ
4、フロントで一本の木を確定する
5、ツリーの右クリックメニューの配置方式
1、tabタグが一定のブラウザの幅を超えた場合、スクロールバーautoScroll:trueを自動的にロードさせる.
スクロールバーを自動に設定します.これまで効果を表示するには設定する必要があります.
enableTabScrollプロパティは真です
2、右クリックメニューを追加する:
extjsの右クリックコンポーネントTabCloseMenuを使用
{
xtype:'tabpanel',
id:'tabs',
autoScroll:true,
region:'center', // a center region is ALWAYS required for border layout
deferredRender:false,
activeTab:0, // first tab initially active
items:centPortal,
plugins:new Ext.ux.TabCloseMenu({
closeTabText:' ',
closeOtherTabsText:' ',
closeAllTabsText:' '
})
}3、iframeから親インタフェースを操作する
3.1、得るならparentをそのまま使用する.Ext.getCmp();あるいはparent.変数名
3.2、親コンテナにコンポーネントを追加する場合は、new parentを新規作成する必要があります.Ext.panel();
GridPanel
1、ローカルデータページング
2、バックグラウンドインタラクティブページング
//
var tabs = new Ext.grid.GridPanel({
region:'center',
title:' ',
width:750,
height:400,
margins:{top:5,right:0,bottom:0,left:50},
cm:cm,
store:store,
bbar: new Ext.PagingToolbar({
pageSize:15,
store:store,
displayInfo:true,
displayMsg:' {0} {1} ， {2} ',
emptyMsg:' '
}),
sm:sm
});
store.load({params:{start:0,limit:15}});
// start， limit
3、gridpanelでフロントデータフォーマットを変換(レンダリング):
3.1、カラムモデルでデータフォーマットを変換する(storeの実際の値は変更しない)
rendererの構成パラメータは次のとおりです.
value, metaData, record, rowIndex, colIndex, store // ，
{header :' ',dataIndex:'userLogType',width:150,renderer:function(value){
return value==1?' ':' '
}}
// ，
renderer:function(){
return '<div ext:qtip='+val+'></div>';
}
//
renderer:function (v, meta) {
meta.attr = 'style="white-space:normal;"';
return v;
}
3.2.storeでデータフォーマットを変換する(storeの値を変更した)
{name: 'rating', type: 'int', convert: function(v, rec) {
if (rec[3] < 0) return 2;
if (rec[3] < 1) return 1;
return 0;
}
} 3.3 gridpanelでこの関数をレンダリングし、マウスで指定した列にサムネイルを表示する
function thumbnail(data, metadata, record, rowIndex, columnIndex, store) {
var url = store.getAt(rowIndex).get('filePath');
//var fileName = store.getAt(rowIndex).get('fileName');
//qtitle qtip:
var img = "<img src='<%=WebConfig.WEB_DOWNLOAD%>/" + url + "' width='100%' >";
var displayText = '<div ext:qtitle=" " ext:qtip="' + img + '" >' + data + '</div>';
return displayText;
}4、バックグラウンドで並べ替える
バックグラウンドソートを使用する場合、urlの形式ではなくproxy形式で使用する要求方式が必要であることに注意し、remoteSortをtrueに開きます.gridpanelの列がソートを許可すると、バックグラウンドはsort、dirの対応するソートパラメータを受信します.
treePanel
1、ツリーノードのattributes属性
extのtreePanelにはattributesプロパティがあります.バックグラウンドに与えられた値を含むオブジェクトです.バックグラウンドの必須パラメータはId(ノードを表す)、text(ノード名)です.
注意:
その後、バックグラウンドからこのツリーノードに他のパラメータを渡すには、Id、text以外のキー値ペアを追加するだけで、そのキー値ペアをattributesプロパティに再カプセル化する必要はありません.
2、木を1本作る
function newTree(rVisible)
{
var tree = new Ext.tree.TreePanel({
animate:true,//
useArrows:false,//
lines:false,//
autoScroll:true,
rootVisible: rVisible,// （ ， ， ）
loader: new Ext.tree.TreeLoader(),// ， ， ：dataUrl:'**.**'
root:new Ext.tree.AsyncTreeNode(),//
containerScroll: true,//
enableDD:true,// ， false
border: false,
width: 250,
height: 300,
enableDD:true,
listeners: { // ，
'render': function(tp){
tp.getSelectionModel().on('selectionchange', function(tree, node){
if(node.isLeaf) alert("I'm Leaf"); else alert("I'm root');
}
})}
}
listeners: { //
'render': function(tp){
tp.on(click, function(node,e){
if(node.isLeaf) alert("I'm Leaf"); else alert("I'm root');
}
})}
}
})
return tree;
}3、バックグラウンドパスの値に基づいて木を構築する
tree.getLoader().dataUrl = ' ';
//値をとるurl、渡された値はjsonオブジェクトの配列[{id:'1',text:'a',leaf:true},{id:'2',text:'b',children:[{text:'2.1',leaf:true}]}]
または、ツリーを構築するときに、属性dataUrlを直接指定します.
tree.root.reload();//ツリー構造のリフレッシュ
4、フロントで一本の木を確定する
var entTree = newTree(true);
var entBase = new Ext.tree.AsyncTreeNode({
text:' ',
draggable:false,
id:'entBase',
children:[{
text:' ',
iconCls:'nav',
draggable:false,
id:'entMsg',
leaf:true
},{
text:' ',
iconCls:'nav',
draggable:false,
id:'entRule',
leaf:true
}]
})
entTree.setRootNode(entBase);//
entTree.expand(true,true);// 、 5、ツリーの右クリックメニューの配置方式
contextMenu:new Ext.menu.Menu({
items:[
{
id:'refresh-node',
text:' ',
iconCls:'silk-table-refresh'
},
{
id:'show-node',
text:' ',
iconCls:'silk-table-go'
},
{
id:'add-node',
text:' ',
iconCls:'silk-table-row-insert'
},
{
id:'edit-node',
text:' ',
iconCls:'silk-table-edit'
},
{
id:'delete-node',
text:' ',
iconCls:'silk-table-row-delete'
}
],
listeners:{
itemclick:function (item) {
switch (item.id) {
case 'refresh-node':
refresh();
break;
case 'show-node':
show(this);
break;
case 'add-node':
add(this);
break;
case 'edit-node':
edit(this);
break;
case 'delete-node':
del();
break;
}
}
}
})
，
contextmenu:function (node, e) {
node.select();
var c = node.getOwnerTree().contextMenu;
c.showAt(e.getXY());//
}