TabPanel
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、在后台排序
当使用后台排序时,需要注意的是使用的请求方式需要时proxy形式而不是url的形式,然后开启remoteSort为true,此时如果gridpanel中的该列允许排序的话,后台就会接收到相应的排序参数,分别为sort、dir
treePanel
1、树节点的attributes属性
ext的treePanel中有一个attributes属性,他是一个包含后台赋予的值的对象,后台的必须参数有Id(表示该节点)、text(节点名称)
注意:
后如果想要从后台传递其他参数给这个树节点,那么只需呀附加Id、text之外的键值对即可,不需要将该键值对再次封装在attributes属性中
2、生成一棵树
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());//设置坐标
}