PDA

View Full Version : ??Ext.example.msg



masoud_tamizy
27 Jan 2012, 11:18 PM
how can i use this MessageBox ?
31108

Farish
28 Jan 2012, 1:03 AM
You need to include examples.js and example.css in your HTML which can be found in extjs/examples/shared/. Then it will work. Rest of the code you can see in the javascript on that page. You just need to create a button and attach a listener for the click event (can be seen in the example code).

masoud_tamizy
28 Jan 2012, 2:20 AM
You need to include examples.js and example.css in your HTML which can be found in extjs/examples/shared/. Then it will work. Rest of the code you can see in the javascript on that page. You just need to create a button and attach a listener for the click event (can be seen in the example code).
why when i use "Ext.example.msg()" , my panel take space from top and left ???
in following pic ...
31112

Farish
28 Jan 2012, 2:36 AM
You will have to post some code for others to find the problem.

masoud_tamizy
28 Jan 2012, 4:06 AM
my JavaScript code is :


//Ext.require('*');
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.panel.*',
'Ext.form.*',
'Ext.util.*',
'Ext.state.*',
'Ext.tip.*',
'Ext.Action',
'Ext.ux'
]);


Ext.onReady(function() {
// var types = Ext.data.Types; // allow shorthand type access
Ext.tip.QuickTipManager.init();
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'national_code', type: 'string' },
{ name: 'user_id', type: 'int' },
{ name: 'first_name', type: 'string' },
{ name: 'last_name', type: 'string' },
{ name: 'father_name', type: 'string' },
{ name: 'sh_sh', type: 'string' },
{ name: 'sh_s_sh', type: 'string' },
{ name: 'gender', type: 'string' },
{ name: 'birth_date', type: 'date' },
{ name: 'birth_location', type: 'string' },
{ name: 'email', type: 'email' },
{ name: 'home_address', type: 'string' },
{ name: 'home_phone', type: 'string' },
{ name: 'postal_code', type: 'string' },
{ name: 'job_title', type: 'string' },
{ name: 'job_address', type: 'string' },
{ name: 'job_phone', type: 'string' },
{ name: 'mobile', type: 'string' },
{ name: 'fax', type: 'string' },
{ name: 'comment', type: 'string' }
],
validations: [
{type: 'presence', field: 'national_code'},
{type: 'presence', field: 'first_name'},
{type: 'presence', field: 'last_name'},
{type: 'presence', field: 'father_name'},
{type: 'presence', field: 'gender'},
{type: 'presence', field: 'home_address'},
{type: 'presence', field: 'home_phone'},
{type: 'presence', field: 'postal_code'},
{type: 'length', field: 'first_name', min: 1, max:45},
{type: 'length', field: 'last_name', min: 1, max:45},
{type: 'length', field: 'father_name', min: 1 , max:45},
{type: 'inclusion', field: 'gender', list: ['Male', 'Female']},
{type: 'exclusion', field: 'username', list: ['Admin', 'Operator']}
]
});


var userstore = Ext.create('Ext.data.Store', {
id:'userstore',
model: 'User',
autoLoad: true,
autoSync: true, // True to automatically sync the Store with its Proxy after every edit to one of its Records. Defaults to false.
proxy: {
type: 'ajax',
actionMethods: {create: "GET", read: "GET", update: "GET", destroy: "GET"},
//url : 'prepare.php',
noCache:true,
api:{
create:'insert.php',
read: 'prepare.php',
update: 'update.php',
destroy: 'delete.php'
},
reader : {type:'json',root:'users',successProperty: 'success',messageProperty: 'message'},
writer : {type:'json',root:'users',writeAllFields: true/*,successProperty: 'success'*/},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
listeners: {
write: function(proxy, operation){
if (operation.action == 'destroy') {
//main.child('#form').setActiveRecord(null); // insert action to perform fired destroy
alert('destroy operation selected');
}
Ext.example.msg(operation.action, operation.resultSmessageet);
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
//autoCancel: false // default value is true
errorSummary:true
});
// Create the Grid
var grid = Ext.create('Ext.grid.Panel', {
listeners: {
/*click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ console.log('click el'); }
},
dblclick: {
element: 'body', //bind to the underlying body property on the panel
fn: function(){ console.log('dblclick body'); }
}*/
},
store: userstore,
selType: 'rowmodel',// 'cellmodel'
loadMask: true,
plugins: [rowEditing],
columns: [
{ dataIndex: 'national_code',
width: 75,
hideable: false,
header:'??????',
sortable:false,
align:'right',
field: {type:'textfield',vtype:'alphanum',allowBlank: false} // i need only numeric . how can i do it ?
},{ dataIndex:'first_name',
text:'???',
width: 75,
align:'right',
field: {xtype:'textfield',allowBlank: false} // or can be editor i.e : editor: {xtype:'textfield',allowBlank: false}
},{ dataIndex:'last_name',
text:'?????',
width: 75,
align:'right',
field: {xtype:'textfield',allowBlank: false}
},{ dataIndex:'father_name',
text:'??? ???',
width: 75,
align:'right',
field: {xtype:'textfield',allowBlank: false}
},{ dataIndex:'sh_sh',
text:'????? ????????',
width: 90,
align:'right',
sortable:false,
field: {type:'textfield',vtype:'alphanum',allowBlank: false}
},{ dataIndex:'sh_s_sh',
width: 125,
text:'????? ????? ????????',
sortable:false,
align:'right',
field: {xtype:'textfield',allowBlank: false}
},{ dataIndex:'gender',
text:'?????',
width: 50,
align:'right',
editor: {xtype:'combo',allowBlank: false}
},{ dataIndex:'birth_date',
text:'????? ????',
width: 75,
hidden:true,
renderer : Ext.util.Format.dateRenderer('d/m/Y'),
editor: {xtype:'datefield',allowBlank: false}
},{ dataIndex:'birth_location',
text:'??? ????',
width: 100,
hidden:true,
align:'right',
field: {type:'textfield',allowBlank: false}
},{ dataIndex:'email',
text:'??? ?????????',
width: 150,
hidden:true,
align:'left',
field: {type:'textfield',vtype:'email',allowBlank:true}
},{ dataIndex:'home_address',
text:'???? ????',
width: 175,
align:'right',
field: {type:'textfield',allowBlank: true}
},{ dataIndex:'home_phone',
text:'???? ????',
width: 80,
align:'right',
field: {type:'textfield',allowBlank: false}
},{ dataIndex:'postal_code',
text:'?? ????',
width: 75,
align:'right',
field: {type:'textfield',allowBlank: false}
},{ dataIndex:'job_title',
text:'???',
align:'right',
hidden:true,
field: {type:'textfield',allowBlank: true}
},{ dataIndex:'job_address',
text:'???? ??? ???',
align:'right',
hidden:true,
field: {type:'textfield',allowBlank: true}
},{ dataIndex:'job_phone',
text:'???? ??? ???',
align:'right',
width: 80,
hidden:true,
field: {type:'textfield',allowBlank: true}
},{ dataIndex:'mobile',
text:'???? ?????',
width: 80,
align:'right',
field: {type:'textfield',allowBlank: true},
hidden:true
},{ dataIndex:'fax',
text:'????',
width: 80,
align:'right',
hidden:true,
field: {type:'textfield',allowBlank: true}
},{ dataIndex:'comment',
text:'???????',
align:'right',
hidden:true
}/*,{ xtype:'actioncolumn',
width:50,
text:'??????',
items: [{
icon: '../ext/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
},{
icon: '../ext/examples/restful/images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}*/],
title: '???? ???????',
tbar : [ {
itemId : 'remove',
text : '???',
iconCls : 'remove',
handler : function() {
var select = grid.getSelectionModel();
rowEditing.cancelEdit();
userstore.remove(select.getSelection());
//userstore.remove(grid.getSelectionModel().getSelection());

},
//disabled : true
}, {
text : '?????',
iconCls : 'save',
handler : function() {
//editing.cancelEdit();
//rowEditing.cancelEdit();
//userstore.save();
// create a blank record from PersonalInfo
//var record = Ext.create('User');
//insert at top
//userstore.insert(0, record);
//edit at row 0
//rowEditing.startEdit(0, 0);
Ext.example.msg('Done','in the name of god');
}
} ],
height:575,
width:1366,
viewConfig: {
forceFit: true
},
listeners: {
select: function(rowModel, record) {
var code = record.get('national_code');
console.log('select event',code);
},
/* selectionchange: function(rowModel, records) {
var rec = records[0];
if (rec) {
alert("alert for : " + rec.get('last_name'));
} else {
alert('Please select a row from the grid');
}
},*/
selectionchange: function(selModel, selected) {
var rec = grid.getSelectionModel().getSelection()[0];
if (rec) {
console.log("Sell " + rec.get('last_name'));
} else {
console.log('Please select a company from the grid');
}
}
},
renderTo: Ext.getBody(),
tools: [{ type: 'refresh' }]
});/*
userstore.on('edit', function(editor, e) {
// commit the changes right after editing finished
e.record.save();
//grid.getStore().sync();
console.log('in the name of god');});*/
});


and HTML is :


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>???? ???????</title>
<!--Ext JS-->
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../ext/examples/shared/example.css">
<script type="text/javascript" src="../ext/examples/shared/examples.js"></script>
<!--Application JS-->
<script type="text/javascript" src="grid.js"></script>
<script language="javascript">


</script>
</head>
<body>
<div id="part1"></div>
<div id="part2"></div>
</body>
</html>

Farish
28 Jan 2012, 4:14 AM
try setting the height and width to '100%'. does the height and width change when that popup appears or is it reduced already when you load the page the first time?

masoud_tamizy
28 Jan 2012, 4:28 AM
try setting the height and width to '100%'. does the height and width change when that popup appears or is it reduced already when you load the page the first time?

when i load my page then , top and left space from edge !!!

Farish
28 Jan 2012, 4:44 AM
comment these first few lines out from example.css


body {
padding:20px;
padding-top:32px;
}

this should fix it.