/**
* @include "../../common/Utils.js"
*/
Ext.define('app.view.performance.Home',{
extend:'Ext.window.Window',
alias:'widget.pfhome',
title:'XXXXXX',
modal : true,
constrain:true,
resizable:false,
iconCls: 'jixiaoguanli',
initComponent:function(){
var me = this;
var performanceds = Ext.create('app.store.PerFormances');
var pfrecordds = Ext.create('app.store.PfRecords');
Ext.applyIf(me,{
width:1000,
height:550,
layout:'border',
items:[{
xtype:'treepanel',
region:'west',
store:Ext.create("Ext.data.TreeStore",{
proxy:{
url:'filtertrees/tree',
extraParams:{menuId:'-20'},
type:'ajax',
reader:{
type:'json',
root:'items'
}
},
root:{
id:'tree-root',
text:'根节点',
expanded:true
},
autoLoad:true,
listeners:{
beforeload:function(store,opt){
var node = opt.node;
if(node.raw){
opt.params.type = node.raw.type;
opt.params.id = node.raw.id;
}
}
}
}),
listeners:{
itemdblclick:function(tp,record,item,index,evt,opt){
var raw = record.raw;
var grid = me.down('performancelist');
if(raw.leaf){//叶子节点
if(raw.type == "doubledate"){
//show dateselector
}else{
if(raw.type=='month'){
Ext.create('app.view.base.MonthSelector',{
listeners:{
okhandler:function(str){
var params = {};
var vals = record.parentNode.raw||record.raw;
if(vals.cnd=='='){
params[vals.fieldName]=str;
}else if(vals.cnd=='cnd'){
params['sql']=str;
}else{
params['sql']=app.Utils.getSqlBySelect(vals.cnd,vals.fieldName,str);
}
var proxy = grid.getStore().getProxy();
var _url = proxy.url;
grid.getStore().setProxy({
extraParams:params,
url:_url,
type:proxy.type,
reader:proxy.reader
});
grid.getStore().load();
}
}
}).show();
}else{
var params = {};
var vals = record.parentNode.raw||record.raw;
if(vals.cnd=='='){
params[vals.fieldName]=raw.value;
}else if(vals.cnd=='cnd'){
params['sql']=raw.value;
}else{
params['sql']=app.Utils.getSqlBySelect(vals.cnd,vals.fieldName,raw.value);
}
var proxy = grid.getStore().getProxy();
var _url = proxy.url;
grid.getStore().setProxy({
extraParams:params,
url:_url,
type:proxy.type,
reader:proxy.reader
});
grid.getStore().load();
}
}
}
}
},
resizable:true,
width:200
},{
xtype:'container',
region:'center',
layout:'anchor',
defaults:{
anchor:'100%'
},
items:[{
xtype:'performancelist',
height:250,
store:performanceds,
tbar:null,
listeners:{
afterrender:function(g){
g.getStore().load({
params:{empid:me['empid']}
});
return false;
},
itemdblclick:function(view,rec){
pfrecordds.load({
params:{
empid:rec.get('empid'),
sql:(" DATE_FORMAT(`times`,'%Y-%m') = '"+Ext.Date.format(Ext.Date.parse(rec.get('date'),
app.Utils.DATE_FORMAT),'Y-m')+"'")
}
});
return false;
}
}
},{
xtype:'pfrecordlist',
height:267,
store:pfrecordds,
tbar:[{
iconCls: 'add',
text:'新增',
_sname:'add',
handler:function(btn){
me.fireEvent('addhandler',me,btn);
}
},'-',{
iconCls: 'drop',
text:'删除',
_sname:'remove',
handler:function(btn){
me.fireEvent('removehandler',me,btn);
}
},'-',{
iconCls: 'tuichu',
text:'退出',
handler:function(btn){
me.close();
}
}]
}]
}]
});
me.callParent(arguments);
}
});
var view2 = Ext.create('app.view.performance.Home',{
empid:record.get("empid")
});
view2.down("[xtype=container]").down("[xtype=pfrecordlist]").down("[_sname=add]").ownerCt.destroy();
view2.show();
分享到:
相关推荐
在软件开发中,特别是在构建用户界面时,ExtJS是一个常用且强大的JavaScript库,它提供了丰富的组件,例如Ext.grid,用于创建交互式的表格视图。在处理Ext.grid时,理解其属性、方法和事件是至关重要的。以下是对...
首先在Ext.grid.GridPanel中必须要有tbar对象 然后要增加listeners: { ‘render’: function() { bbar2.render(this.tbar); //add one tbar //twoTbar.render(this.tbar); //add two tbar // threeTbar.render(this....
13. **tbar** 和 **bbar** - 分别用于设置组件顶部和底部的工具栏。 14. **store** - 关联数据存储,常用于Grid Panel等组件显示数据。 15. **columns** - Grid Panel的列定义,包括字段名、宽度、对齐方式等。 ...
其中,Grid Panel(简称 Grid)是ExtJs中最常用的一个组件之一,用于展示表格数据。在实际业务场景中,经常需要支持用户对表格中的多行数据进行选择,并执行批量操作,如删除、编辑等。因此,掌握如何在ExtJs Grid中...
在Ext_Js中,主要依赖于`Ext.data.Store`对象来管理数据,以及`Ext.grid.Panel`或`Ext.dataview.DataView`等控件来展示这些数据。分页可以通过`Ext.PagingToolbar`组件实现。 1. **Store对象**:Store是Ext_Js中用...
在这里,我们创建了一个名为 `myArticleList` 的新组件,它继承自 `Ext.grid.GridPanel`。在 `initComponent` 中,我们创建了一个新的 `JsonStore` 用于存储数据,并设置了其字段和数据源URL。注意,重载 `...
var grid = new Ext.grid.GridPanel({ renderTo: "hello", title: "NetJava表格测试", height: 150, width: 600, columns: [ { header: "项目名称", dataIndex: "name" }, { header: "开发团队", dataIndex:...
//得到后台的数据 var proxy = new Ext.data.HttpProxy({ url:showUrl, timeout:3600000 }); //分页参数 findParams ={start:0,limit:limit};... tbar : myTbar, renderTo: 'imageList' });
它提供了一组丰富的UI组件,包括Grid组件,使得开发者能够轻松地创建出功能强大的数据展示表格。 #### 二、获取Grid中的各种值 在Extjs Grid中,通常会涉及到对Grid中数据的读取操作。例如,获取特定行或列的数据...
首先,`PersonListGridPanel` 类是基于 `Ext.grid.GridPanel` 扩展的,它添加了两个窗口实例变量 `insertWin` 和 `updateWin`,分别用于处理新增和编辑数据的操作。`constructor` 方法中,这两个窗口实例被创建并...
在本次的“Ext JS 培训资料”中,我们将深入探讨其中的核心组件——Panel(面板),它在Ext JS开发中扮演着至关重要的角色。 Panel是Ext JS中最常用的控件之一,它是一种容器,可以用来展示特定的HTML信息,并且...
可绑定tbar ,按钮简单方便new Ext.ux.ToolbarKeyMap() keyBinding : { key :key, ctrl:true }即可
tbar: new Ext.PagingToolbar({ pageSize: 20, store: store, displayInfo: true }), renderTo: 'example-grid', width: 600, height: 400 }); store.load({params: {start: 0, limit: 20}}); }); ``` #...
布局决定了组件如何在容器中排列和显示。以下是从给定代码片段中提取的EXT布局相关的重要知识点: 1. **Viewport布局**: - `Ext.Viewport` 是EXTJS中的一个全局对象,用于全屏布局,它会占据浏览器的整个视口。 ...
在讨论ExtJS框架时,我们经常涉及到面板(panel)的设计和配置,其中tbar(top bar,顶部工具栏)是一个重要的UI组件,它位于面板的顶部,用于放置各种控件,比如按钮、搜索框、下拉列表等。而在ExtJS中,bbar...