<%@
Page
Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE
html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title></title>
<!--JS dosyaları-->
<script
type="text/javascript"
src="extLib/adapter/ext/ext-base.js"></script>
<script
type="text/javascript"
src="extLib/ext-all.js"></script>
<script
type="text/javascript"
src="extLib/ux/RowEditor.js"></script>
<!--CSS dosyaları-->
<link
rel="stylesheet"
type="text/css"
href="extLib/resources/css/ext-all.css"
/>
<link
rel="stylesheet"
type="text/css"
href="extLib/grid-examples.css"
/>
<link
rel="stylesheet"
type="text/css"
href="extLib/shared/examples.css"
/>
<link
rel="stylesheet"
type="text/css"
href="extLib/ux/css/RowEditor.css"
/>
<style
type="text/css">
.icon-user-add {
background-image:
url(extLib/shared/icons/fam/user_add.gif)
!important;
}
.icon-user-delete {
background-image:
url(extLib/shared/icons/fam/user_delete.gif)
!important;
}
</style>
<script
type="text/javascript">
// gelişi güzel isim oluşturma
(function()
{
//Birkaç meyve adı tanımlaması yaptık
var meyveler = ['Elma',
'Armut',
'Muz',
'Kavun',
'Karpuz',
'Portakal',
'Nar',
'Mandalina',
'Yeni Dunya',
'Ananas'];
var firstLen = meyveler.length;
//adından da anlaşılacağı üzere gelişi güzel
sayı değerleri oluşturmamıza
//yarayan bir fonksiyon
Ext.ux.getRandomInt = function(min,
max) {
return Math.floor(Math.random() * (max
- min + 1)) + min;
}
//yine gelişi güzel bir şekilde meyve
isimleri oluşturacağız.
Ext.ux.generateName = function() {
var name =
meyveler[Ext.ux.getRandomInt(0, firstLen - 1)] +
" Meyvesi " +
Ext.ux.getRandomInt(0, 10);
//dataların 'ad' degerlerini identity olarak
da kullandığımız için bir kez
//oluşturduğumuz ismi tekrar
oluşturmamalıyız
if
(Ext.ux.generateName.usedNames[name]) {
return Ext.ux.generateName();
}
Ext.ux.generateName.usedNames[name] = true;
return name;
}
Ext.ux.generateName.usedNames = {};
})();
Ext.onReady(function()
{
var para = 0;
//Urun adlı kayıt şablonunun alan adlarını
tanıtalım.
var Urun = Ext.data.Record.create([{
name: 'ad',
type: 'string'
}, {
name: 'tip',
type: 'string'
}, {
name: 'uretim',
type: 'date',
dateFormat: 'n/j/Y'
}, {
name: 'adet',
type: 'integer'
}, {
name: 'fiyat',
type: 'integer'}]);
//
//Kullanıcağımız dataları oluşturalım.
var genData =
function() {
var data = [];
var s = new
Date(2007, 0, 1);
var now =
new Date(), i = -1;
while (s.getTime() < now.getTime()) {
var ecount = Ext.ux.getRandomInt(0,
1);
for (var
i = 0; i < ecount; i++) {
var name = Ext.ux.generateName();
data.push({
uretim: s.clearTime(true).add(Date.DAY,
Ext.ux.getRandomInt(0, 27)),
ad: name,
tip: 'Meyve',
adet: Ext.ux.getRandomInt(10, 100),
fiyat: Ext.ux.getRandomInt(10, 100)
});
}
s = s.add(Date.MONTH, 1);
}
return data;
}
//
//Json tipindeki datalarımızı tutacağımız
store objemiz
var store =
new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({
fields: Urun }),
//datayı nereden alıcagını belirttik.
data: genData(),
sortInfo: { field: 'uretim',
direction: 'ASC' }
});
//Editor butonlarımızın etiketlerin
dilediğimiz gibi değiştirebiliriz
var editor =
new Ext.ux.grid.RowEditor({
saveText: 'Kaydet',
cancelText: 'Iptal'
});
//
//gridimizi yaratalım
var grid =
new Ext.grid.GridPanel({
//grid oluştururken 'store' degerini vermeyi
unutmayınız.
store: store,
width: 600,
region: 'center',
margins: '0 5 5 5',
autoExpandColumn: 'ad',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
// 'topbar' daki butonlarımızı
oluşturuyoruz.
tbar: [{
iconCls: 'icon-user-add',
text: 'Urun Ekle',
handler: function() {
var e = new
Urun({
ad: 'Meyve Adi',
tip: 'Meyve',
uretim: (new Date()).clearTime(),
adet: 1,
fiyat: 10
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
}, {
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Urun Sil',
disabled: true,
handler: function() {
editor.stopEditing();
var s =
grid.getSelectionModel().getSelections();
for (var
i = 0, r; r = s[i]; i++) {
store.remove(r);
}
}
}, {
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Urun Sat',
disabled: true,
handler: function() {
editor.stopEditing();
var s =
grid.getSelectionModel().getSelections();
for (var
i = 0, r; r = s[i]; i++) {
if (r.data['adet']
== 1) {
para = para + r.data['fiyat'];
store.remove(r);
Ext.MessageBox.alert('Satis',
'Satis Islemi tamamlandi. Urun
kalmadi!Suan ' + para + ' kadar
paraniz var.');
}
else {
para = para + r.data['fiyat'];
r.set("adet",
r.data['adet'] - 1);
r.commit();
Ext.MessageBox.alert('Satis',
'Satis Islemi tamamlandi. Suan ' +
para + ' kadar paraniz var.');
}
}
}
}],
//Kolonlarımızı özellestirelim.
columns: [
new Ext.grid.RowNumberer(),
{
id: 'ad',
header: 'Meyve Adi',
dataIndex: 'ad',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Tip',
dataIndex: 'tip',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
blankText: "Bos Birakma!",
allowBlank: false
}
}, {
xtype: 'datecolumn',
header: 'Uretim Tarihi',
dataIndex: 'uretim',
format: 'm/d/Y',
width: 100,
sortable: true,
groupRenderer: Ext.util.Format.dateRenderer('M
y'),
editor: {
xtype: 'datefield',
allowBlank: false,
blankText: "Bos Birakma!",
maxValue: (new Date()).format('m/d/Y')
}
},
{
header: 'Adet',
dataIndex: 'adet',
minValue: 1,
width: 50,
sortable: true,
editor: {
xtype: 'numberfield',
blankText: "Bos Birakma!",
allowBlank: false
}
},
{
header: 'Fiyat',
dataIndex: 'fiyat',
minValue: 1,
width: 50,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false
}
}]
});
//
//
var layout =
new Ext.Panel({
title: 'Meyveler',
layout: 'border',
layoutConfig: {
columns: 1
},
width: 600,
height: 600,
items: [grid]
});
layout.render(Ext.getBody());
grid.getSelectionModel().on('selectionchange',
function(sm) {
grid.removeBtn.setDisabled(sm.getCount() < 1);
});
});
</script>
<link
rel="stylesheet"
type="text/css"
href="extLib/resources/css/ext-all.css"
/>
<link
rel="stylesheet"
type="text/css"
href="extLib/grid-examples.css"
/>
<link
rel="stylesheet"
type="text/css"
href="extLib/shared/examples.css"
/>
<link
rel="stylesheet"
type="text/css"
href="extLib/ux/css/RowEditor.css"
/>
</head>
<body>
<form
id="form1"
runat="server">
<div>
</div>
</form>
</body>
</html>