PDA

View Full Version : Grid Load



thilakmsc
29 Jul 2012, 4:18 AM
Below Code is loaded in ExtJs3.7 version but it's unable to load in ExtJs4.1. May i know what is the major changes in ExtJs4.1. Will you please try to solve the issue.



Ext.onReady(function () {

var myStore = new Ext.data.JsonStore({

autoLoad: true,

proxy: new Ext.data.HttpProxy({

url: '../ExtJs.asmx/GetStudentList',

headers: { 'Content-type': 'application/json' }
}),

root: 'd',

id: 'StId',


reader: { type: 'json', root: 'd' },
fields: ['StId', 'StName', 'StService']
});

var grid = new Ext.grid.GridPanel({

store: myStore,
columns: [
{ dataIndex: 'StId', header: 'St Id' },
{ dataIndex: 'StName', header: 'St Name' },
{ dataIndex: 'StService', header: 'St Service' }
],

renderTo: 'grid-example',
width: 422,
height: 300
});

});

scottmartin
29 Jul 2012, 9:22 PM
Please provide your return JSON.

Scott.

thilakmsc
29 Jul 2012, 9:27 PM
I was refered Following link

http://stackoverflow.com/questions/1...s-to-fill-grid (http://stackoverflow.com/questions/11304545/net-webservice-extjs-to-fill-grid)

And get the same json string that they mention.



{"d":[{"__type":"Student","StId":1,"StName":"John","StService":"Doe"},{"__type":"S‌ ​ tudent","StId":2,"StName":"Michael","StService":"Crowd"},{"__type":"Student","StId‌ ​ ":3,"StName":"Gunnar","StService":"Rasmundsson"},{"__type":"Student","StId":4,"StN‌ ​ame":"Alicia","StService":"Mankind"}]}

scottmartin
29 Jul 2012, 9:33 PM
This example loads your data json fine:



Ext.define('Model', {
extend: 'Ext.data.Model',
fields: ['StId', 'StName', 'StService']
});

Ext.onReady(function() {

Ext.create('Ext.data.Store', {
storeId: 'gridStore',

model: 'Model',

autoLoad: true,
proxy: {
idProperty: 'StId',
totalProperty: 'total',
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'd'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Grid',

store: Ext.data.StoreManager.lookup('gridStore'),

columns: [
{ dataIndex: 'StId', header: 'St Id' },
{ dataIndex: 'StName', header: 'St Name' },
{ dataIndex: 'StService', header: 'St Service' }
],
height: 200,
width: 1000,
renderTo: Ext.getBody()
});

});


Scott.

thilakmsc
29 Jul 2012, 9:45 PM
Dear scott.,

Yes you are right. It's loaded fine.Thank you.

May i know why it's not loaded while data come from web service.

But we need to implement here with web service.

scottmartin
29 Jul 2012, 10:00 PM
Is this cross domain, or same? You would need to JSONP of from another domain.

Scott

thilakmsc
29 Jul 2012, 10:12 PM
May i know what is JSONP ., And how i implement in webservice.

How to get file name and file path in file upload control using Ajax call request.
also how to get in server side?



, {
xtype: 'filefield',
emptyText: 'Select an image',
fieldLabel: 'Photo',
name: 'filepath',
allowBlank: false,
buttonText: 'Upload',
buttonConfig: {
iconCls: 'upload-icon'
}
}
],

buttonAlign: 'center',


buttons: [{
text: 'Login',
handler: function (btn, eventObj) {

var form = this.up('form').getForm();
if (form.isValid()) {



Ext.Ajax.request
({


url: 'ScriptPageProxy.aspx/LoginValidation'

, params: { email: form.getValues().email, filepath: form.getValues().filepath, username: form.getValues().username, password: form.getValues().password }

, callback: function () { }
, failure: function () {
Ext.MessageBox.hide();
Ext.Msg.show(
{
title: 'Error',
msg: '500 Internal Server Error..!',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR,
width: 275
}
)
}
, success: function (response,fp, o) {
// Read JSON
var respon = response.responseText;
if (respon == "1") {
Ext.MessageBox.hide();
Ext.MessageBox.alert('Status', 'Logged In Successfully!');
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
//window.location = 'Home.aspx';
}
else if (respon == "2") {
Ext.MessageBox.hide();
Ext.MessageBox.alert('Alert', 'Password is wrong, Please Check the password!');
}
else if (respon == "3") {
Ext.MessageBox.hide();
Ext.MessageBox.alert('Status', 'Email ID is not valid, Please check your Email ID!');
}
else {
Ext.MessageBox.hide();
Ext.MessageBox.alert('Status', 'Internal Server Error.. Try again later!');
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
}
});

}
}

Thank you

ankit1987gupta
30 Jul 2012, 6:44 AM
Hi,

I'm new and first time using the extjs grid.i have created the grid by using the example provided in extjs-4.1.1.i want to set event when i click on the header of a column i want the name of the column.
i have used following code

columns: Ext.create('Ext.grid.header.Container',{
items :
[
{text: "Company",width: 200, dataIndex: 'company',

},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price' ,hidden: true,hideable: false},
{text: "Change", dataIndex: 'change'}
], // The usual array of column definition objects.
listeners : {
headerclick : function(ct,column, e, t) {
alert('headerclick'+column.text)
}
}

when i used above code the cloumn hideable option is not comming.

when i'm using below code i'm unable to add listener on each and every cloumn.

columns:[
{text: "Company",width: 200, dataIndex: 'company',

},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price' ,hidden: true,hideable: false},
{text: "Change", dataIndex: 'change'}
],
"

please help me.

scottmartin
30 Jul 2012, 6:58 AM
@ankit1987gupta: Please create your own thread for new items.

You can use the following:


grid.headerCt.on('headerclick', function(header, col, ev, el, opt){
alert('header:headerclick');
});


Scott.

ankit1987gupta
31 Jul 2012, 12:10 AM
thanx for reply

thilakmsc
31 Jul 2012, 2:55 AM
Will you please try to help me to load ExtJs4.1 grid with asp.net webservice

thilakmsc
1 Aug 2012, 2:55 AM
Dear Scott.,

1.May i know How to move grid row position . For the Example
S.no Name Location
1. Thilakraj India
2. Scott USA

I need move the S.no 2 to first one and also S.No will be 1 for scott's row. Is it possible in button click.Please note the particular grid don't have option button It's only have row selection option.


2.How to do grid will not allow the selecting of multiple rows .

scottmartin
1 Aug 2012, 7:17 AM
You can use DnD to re-order the rows:



Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },
{ 'name': 'Bart', "email":"bart@simpsons.com", "change":-20 },
{ 'name': 'Homer', "email":"home@simpsons.com", "change":23 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
],
height: 200,
width: 400,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop', dragText:'Drag to new row'
}
},
renderTo: Ext.getBody()
});


To perform this in code, simply remove/insert record.

Scott.

thilakmsc
7 Aug 2012, 2:48 AM
Dear all.,

1.I was create a grid with Edit., While Click the row twice.

But i also have Edit button as in toolbar. I need to trigger the Edit Plugin while click the Edit Button.

2.How to send all row values(In Grid) to Database.

thilakmsc
7 Aug 2012, 2:59 AM
Dear Scott .,

Drag and Drop is work's fine ., May i Know how to reset the Row number value.

http://www.sencha.com/forum/image/png;base64,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




http://localhost:1609/ImportExportTool/Images/Premierlogo.gif http://localhost:1609/ImportExportTool/Images/Premierlogo.gif

scottmartin
7 Aug 2012, 8:52 AM
Use record.set() to change the field value.

Scott.

thilakmsc
7 Aug 2012, 7:59 PM
Dear Scott.,

1.I was create a grid with Edit., While Click the row twice.

But i also have Edit button as in toolbar. I need to trigger the Edit Plugin while click the Edit Button.

2.How to send all row values(In Grid) to Database.

thilakmsc
13 Aug 2012, 11:12 PM
Dear Scott.,

Finally we move to Sencha Architect 2.0 tool.,

Will be please try to share your code or Tutorial with us.
It's really help us to achieve our client requirement.

I have some doubt in SA2.0 ,

1.Is it possible show the grid row with combo box,Textbox and Checkbox.

ExtJs Example - http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/row-editing.html

thilakmsc
20 Aug 2012, 10:33 PM
Dear Scott.,
May i know how to Implement Edit a Particular Row While Click Edit button from Docked items from Grid.

For the Example.,

S.no Name Location
1. Thilakraj India
2. Scott USA

Edit Button


1. If i double click the second row i got the Editable option.

2.But i need to achieve Show the Editable Grid option While Clicking the EditButton.