작은 그림 ext4.0 거친 프레임
11599 단어 ext
web ， Ext.onReady(function(){
var isAdd = true;
var tree = Ext.create('Ext.tree.Panel', {
// title: ' ',
height:'100%',
border: false,
root: {
text: ' ',
expanded: true,
children: [{
text: ' ',
checked: true,
leaf: true
}, {
text: ' ',
checked: false,
// expanded: true,
// leaf: true
children: [{
text: " ",
checked : false,
leaf: true
}, {
text: " ",
checked : false,
leaf: true
}]
}]
}
});
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'name'},
{name: 'sex'},
{name: 'age'},
{name: 'entryDate'},
{name: 'salary'},
{name: 'desc'}
]
});
// Array data for the grids
empData = [
['001',' ', ' ', 26, '2010-01-22', 5000,'ddddddddd'],
['001',' ', ' ', 26, '2010-01-22', 6000,'ddddddddd'],
['001',' ', ' ', 23, '2010-01-22', 3000,'ddddddddd'],
['001',' ', ' ', 34, '2010-01-22', 5000,'ddddddddd'],
['001',' ', ' ', 45, '2010-01-22', 6000,'ddddddddd'],
['001',' ', ' ', 52, '2010-01-22', 4300,'ddddddddd'],
['001',' ', ' ', 21, '2010-01-22', 5400,'ddddddddd'],
['001',' ', ' ', 32, '2010-01-22', 5200,'ddddddddd'],
['001',' ', ' ', 26, '2010-01-22', 5000,'ddddddddd'],
['001',' ', ' ', 26, '2010-01-22', 6000,'ddddddddd'],
['001',' ', ' ', 23, '2010-01-22', 3000,'ddddddddd'],
['001',' ', ' ', 34, '2010-01-22', 5000,'ddddddddd'],
['001',' ', ' ', 45, '2010-01-22', 6000,'ddddddddd'],
['001',' ', ' ', 52, '2010-01-22', 4300,'ddddddddd'],
['001',' ', ' ', 21, '2010-01-22', 5400,'ddddddddd'],
['001',' ', ' ', 32, '2010-01-22', 5200,'ddddddddd']
];
var empStore = Ext.create('Ext.data.ArrayStore', {
model: 'Employee',
data: empData
});
var grid4 = Ext.create('Ext.grid.Panel', {
id:'button-grid',
store: empStore,
columns: [
// Ext.create('Ext.grid.RowNumberer'), //
{text: " ", sortable: true, dataIndex: 'id'},
{text: " ", width: 120, sortable: true, dataIndex: 'name'}, //renderer: Ext.util.Format.usMoney,
{text: " ", width: 120, sortable: true, dataIndex: 'sex'},
{text: " ", width: 120, sortable: true, dataIndex: 'age'},
{text: " ", width: 120, sortable: true, dataIndex: 'entryDate'},
{text: " ", width: 120, sortable: true, dataIndex: 'salary',renderer:function(value,row){return value+".00"}},
{text: " ", flex:1, sortable: true, dataIndex: 'desc'}
],
columnLines: true,
// height:'100%',
// width:'100%',
selModel: Ext.create('Ext.selection.CheckboxModel', {
// listeners: {
// selectionchange: function(sm, selections) {
// grid4.down('#delete').setDisabled(selections.length == 0);
// }
// }
}),
//
// // inline buttons
dockedItems: [
// {
// xtype: 'toolbar',
// dock: 'bottom',
// ui: 'footer',
// layout: {
// pack: 'center'
// },
// items: [{
// minWidth: 80,
// text: 'Save'
// },{
// minWidth: 80,
// text: 'Cancel'
// }]
// },
{
xtype: 'toolbar',
items: [{
text:' ',
icon:'../icon/add.png',
tooltip:'Add a new row',
iconCls:'add',
handler:function(){
isAdd = true;
addWin.show();
}
}, '-', {
text:' ',
icon:'../icon/cog_edit.png',
tooltip:'Set options',
iconCls:'option',
handler:function(){
var rows = grid4.getSelectionModel().getSelection();
if(rows.length == 0){
Ext.MessageBox.alert(" ", " ");
} else if(rows.length > 1){
Ext.MessageBox.alert(" ", " ");
} else {
isAdd = false;
empForm.loadRecord(rows[0]);
addWin.show();
}
}
},'-',{
itemId: 'delete',
icon:'../icon/delete.gif',
text:' ',
tooltip:'Remove the selected item',
iconCls:'remove',
// disabled: true,
handler:function(){
var rows = grid4.getSelectionModel().getSelection();
if (rows.length == 0) {
Ext.MessageBox.alert(" ", " ");
}
else {
Ext.MessageBox.confirm(" ", " !", function(btn){
if (btn == "yes") {
// var ids = rows[0].id;
// for(var i = 1; i < rows.length; i++) {
// ids = ids + "," + rows[i].id;
// }
// Ext.Ajax.request({
// url:"deleteUser.action",//
// params:{id:ids},
// success:function(result){
// var jsonStr = Ext.util.JSON.decode(result.responseText)
// Ext.MessageBox.alert(" ",jsonStr.msg);
// },
// failure:function(result){
// var jsonStr = Ext.util.JSON.decode(result.responseText)
// Ext.MessageBox.alert(" ",jsonStr.msg);
// }
// });
//
// //
// for(var i = 0; i < rows.length; i++) {
// store.remove(rows[i]);
// }
var sm = grid4.getSelectionModel();
empStore.remove(sm.getSelection());
Ext.MessageBox.alert(" ", " ");
;
// empStore.reload();
}
});
}
}
}]
}],
frame: true,
title: ' ',
iconCls: 'icon-grid'
// renderTo: Ext.getBody()
});
var tabpanel = Ext.create('Ext.tab.Panel', {
// authWidth:true,
// authHeight:true,
activeTab: 0,
items: [
{
title: 'Tab 1',
// bodyPadding: 10,
closable:true,
height:'100%',
layout:'fit',
items:grid4
},
{
title: 'Tab 2',
html : 'changxian'
}
]
// renderTo : Ext.getBody()
});
Ext.create('Ext.container.Viewport', {
layout: 'border',//
items: [{
// title: 'north Panel',
// html:"<br><center><font size = 6>XXXX </font></center>",
html: '<p align="center"><font size="44">XXXX <font><p>',
region: 'north',// north
collapsible: true,
split: true,
height: 100
}, {
title: ' ',
// html: ' ',
region: 'west',// west
width: 220,
collapsible: true,
split: true,
frame:true,
items: tree
}, {
// title: ' ',
region: 'center',// center
width:'100%',
layout:'fit',
items:tabpanel
}]
});
var empForm = new Ext.form.Panel({
fieldDefaults:{
labelSeparator:":",
labelWidth:80,
msgTarget:'side',
width:300
},
bodyPadding:5,
frame:true,
items:[{
xtype:'textfield',
allowBlank:false,
blankText:' ',
name:'id',
fieldLabel:' '
},{
xtype:'textfield',
allowBlank:false,
blankText:' ',
name:'name',
fieldLabel:' '
},{
xtype:'radiogroup',
fieldLabel:' ',
items:[{boxLabel: ' ', name: 'sex', inputValue: ' ', checked: true},
{boxLabel: ' ', name: 'sex', inputValue: ' '}]
},{
xtype:'numberfield',
fieldLabel:' ',
name:'age',
value: 30,
minValue: 18
},{
xtype:'datefield',
name:'entryDate',
fieldLabel:' ',
format:'Y-m-d'
},{
xtype:'numberfield',
fieldLabel:' ',
minValue: 3000,
allowDecimals:true,
decimalPrecision:2,
name:'salary'
},{
xtype:'textarea',
fieldLabel:' ' ,
name:'desc'
}],
buttons:[{
text: " ",
handler:function(){
if (empForm.getForm().isValid()) {
var params = empForm.getForm().getValues();
var r = Ext.ModelManager.create(params, 'Employee');
// alert(isAdd);
addWin.close();
if(isAdd){
empStore.insert(0, r);
} else {
var record = grid4.getSelectionModel().getSelection()[0];
record.set('id',r.get('id'));
record.set('name',r.get('name'));
record.set('sex',r.get('sex'));
record.set('age',r.get('age'));
record.set('entryDate',r.get('entryDate'));
record.set('salary',r.get('salary'));
record.set('desc',r.get('desc'));
// empStore.findRecord(rows[0])=r;
// alert('ddd');
// rows[0] = r;
}
empForm.getForm().reset();
} else {
// return;
Ext.MessageBox.alert(' ',' ');
}
}
},{
text: " ",handler:function(){
empForm.getForm().reset();
}
}]
})
var addWin = new Ext.window.Window({
layout:'fit',
width:380,
closeAction:'hide',
height:300,
resizable:false,
shadow:true,
modal:true,
closable:true,
items:empForm
})
})이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJS 3.2 학습 노트(3) 사용자 정의 이벤트Extjs에서 모든 상속은 Ext.util에서 합니다.Observable 클래스의 컨트롤은 이벤트를 지원할 수 있습니다. 클래스에 대해 이벤트를 사용자 정의하려면 다음 절차를 따르십시오. 1, 먼저 클래스를 정의합니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
