PDA

View Full Version : Combobox issue with displayValue & valueField



Tpona
3 Aug 2010, 9:43 PM
I have issue with transfer correct values in backend from Combobox fields.
I find this patch http://www.sencha.com/learn/Ext_FAQ_ComboBox#Form_submits_displayField_instead_of_valueField
but he not help to me. In the backend, recive text value 'name' instead needed field 'id'.

Here my code:

var comboCountry = new Ext.form.ComboBox({
id:'wOffice_ComboCountry',
width:'98%',
fieldLabel: '??????',
displayField:'name',
valueField:'id',
loadingText:'????????...',
emptyText:'???????? ??????...',
name: 'countryId',
triggerAction: 'all',
autocomplete: true,
store: new Ext.data.JsonStore({
root : 'results',
idProperty : 'id',
totalProperty : 'total',
fields : [
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getlistcountries/'
})
})
});


Another issue appears when i try to load data in my formstore. Comboboxes fills numeric values instead load itself store when he get id-values.
21779

Condor
4 Aug 2010, 12:35 AM
Replace 'name' with 'hiddenName'.

Tpona
4 Aug 2010, 2:21 AM
Yes, it's solves first issue.
But how correct solve problem with loading form data.

All my comboboxes depend one from another. When i do load form data, only first combobox (not depend from another) load data correctly. Another comboboxes show 'id' value.

This fragment of 2 depended comboboxes:


var comboCountry = new Ext.form.ComboBox({
id:'wOffice_ComboCountry',
width:'98%',
fieldLabel: '??????',
displayField:'name',
hiddenName:'countryId',
name: 'countryId',
valueField:'id',
loadingText:'????????...',
emptyText:'???????? ??????...',
triggerAction: 'all',
autocomplete: true,
store: new Ext.data.JsonStore({
root : 'results',
idProperty : 'id',
totalProperty : 'total',
fields : [
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getlistcountries/'
})
})
});


var comboRegion = new Ext.form.ComboBox({
id:'wOffice_ComboRegion',
width:'98%',
fieldLabel: '??????',
name: 'regionId',
hiddenName:'regionId',
displayField:'name',
valueField:'id',
autocomplete: true,
loadingText:'????????...',
triggerAction: 'all',
emptyText:'???????? ??????...',
store: new Ext.data.JsonStore({
idProperty: 'id',
root : 'results',
totalProperty : 'total',
baseParams : {
countryId : 0
},
fields :
[
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getlistregions/'
})
})
});

comboCountry.on('select', function(combo, record){
var bp = comboRegion.store.baseParams;
if (!bp || bp.countryId != record.id) {
comboRegion.store.setBaseParam('countryId', record.id);
//comboRegion.store.clear();
delete comboRegion.lastQuery;
}
});

Condor, as you can see, i use your code for depending ))

Tpona
4 Aug 2010, 2:23 AM
Yes, i took this patch code : http://www.sencha.com/forum/showthread.php?75751-OPEN-42-ComboBox-s-setValue-call-with-a-remotely-loaded-Store&p=400274#post400274

Tpona
4 Aug 2010, 9:31 PM
So, something like i solve my issue.

But i do not like my decision ((First I have a combo box value appears from the field 'id' and only later other combo box now loaded and displayed normal values.

But I can not understand why after loading the data in the form of a combo box is not caused by the event select?




function createOfficeEditWidget(id){

if (id=='') id = 0;


var comboCountry = new Ext.form.ComboBox({
id:'wOffice_ComboCountry',
width:'98%',
fieldLabel: '??????',
displayField:'name',
hiddenName:'countryId',
//name: 'countryId',
emptyText:'?????',
valueField:'id',
loadingText:'????????...',
triggerAction: 'all',
autocomplete: true,
store: new Ext.data.JsonStore({
root : 'results',
idProperty : 'id',
totalProperty : 'total',
fields : [
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getlistcountries/'
})
}),
listeners:{
beforeselect : function( _combo, _record, _index ){
//alert('2');
},
select : function(combo, record){
alert('comboCountry.select');
var bp = comboRegion.store.baseParams;
if (!bp || bp.countryId != record.id) {
comboRegion.store.setBaseParam('countryId', record.id);
//comboRegion.store.clear();
comboRegion.store.load();
delete comboRegion.lastQuery;
}
}
}
});

var comboRegion = new Ext.form.ComboBox({
id:'wOffice_ComboRegion',
width:'98%',
fieldLabel: '??????',
//name: 'regionId',
hiddenName:'regionId',
displayField:'name',
valueField:'id',
autocomplete: true,
loadingText:'????????...',
triggerAction: 'all',
emptyText:'???????? ??????...',
store: new Ext.data.JsonStore({
idProperty: 'id',
root : 'results',
totalProperty : 'total',
baseParams : {
countryId : 0
},
fields :
[
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getlistregions/'
})
})
});

var comboCity = new Ext.form.ComboBox({
xtype:'combo',
width:'98%',
fieldLabel: '?????',
name: 'cityId',
hiddenName:'cityId',
displayField:'name',
valueField:'id',
autocomplete: true,
loadingText:'????????...',
triggerAction: 'all',
emptyText:'???????? ?????...',
store: new Ext.data.JsonStore({
idProperty : 'id',
root : 'results',
totalProperty : 'total',
baseParams : {
regionId : 0
},
fields : [
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getlistcities/'
})
})
});

comboRegion.on('select', function(combo, record){
var bp = comboCity.store.baseParams;
if (!bp || bp.regionId != record.id) {
comboCity.store.setBaseParam('regionId', record.id);
//comboRegion.store.clear();
delete comboCity.lastQuery;
}
});

var comboStreet = new Ext.form.ComboBox({
xtype:'combo',
width:'98%',
fieldLabel: '?????',
name: 'streetId',
hiddenName:'streetId',
displayField:'name',
valueField:'id',
autocomplete: true,
loadingText:'????????...',
triggerAction: 'all',
emptyText:'???????? ?????...',
store: new Ext.data.JsonStore({
idProperty : 'id',
root : 'results',
totalProperty : 'total',
baseParams : {
cityId : 0
},
fields : [
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getliststreets/'
})
})
});

comboCity.on('select', function(combo, record){
var bp = comboStreet.store.baseParams;
if (!bp || bp.cityId != record.id) {
comboStreet.store.setBaseParam('cityId', record.id);
//comboRegion.store.clear();
delete comboStreet.lastQuery;
}
});

var comboBuilding = new Ext.form.ComboBox({
xtype:'combo',
width:'98%',
fieldLabel: '????????',
name: 'buildingId',
hiddenName :'buildingId',
displayField:'name',
valueField:'id',
autocomplete: true,
loadingText:'????????...',
triggerAction: 'all',
emptyText:'???????? ????????...',
store: new Ext.data.JsonStore({
idProperty : 'id',
root : 'results',
totalProperty : 'total',
baseParams : {
streetId : 0
},
fields : [
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getlistbuildings/'
})
})
});

comboStreet.on('select', function(combo, record){
var bp = comboBuilding.store.baseParams;
if (!bp || bp.streetId != record.id) {
comboBuilding.store.setBaseParam('streetId', record.id);
//comboRegion.store.clear();
delete comboBuilding.lastQuery;
}
});

var fieldSetAddress1 = {
xtype : 'fieldset',
//title : '?????',
flex : 1,
border : false,
labelWidth : 60,
defaultType : 'textfield',
defaults : {
anchor : '-5'
},
items : [
{
xtype : 'textfield',
fieldLabel: '??????',
name : 'postIndex',
width:'50%'
},comboCountry,comboRegion]
};

var fieldSetAddress2 = Ext.apply({}, {
flex : 1,
labelWidth : 80,
//title : '????????',
items : [comboCity,comboStreet,comboBuilding]},
fieldSetAddress1);


var fieldsetContainer = {
xtype : 'container',
layout : 'hbox',
height : 320,
layoutConfig : {
align : 'stretch'
},
items : [fieldSetAddress1, fieldSetAddress2]
};


var contactsGrid = new Ext.grid.EditorGridPanel({
store: new Ext.data.JsonStore({
storeId :'contactsStore',
autoDestroy : true, // ????????? ????????? ????? ?????????? ???????
autosave : true,
idProperty : 'id',
//totalProperty: 'total',
root : 'results',
successProperty : 'success',
fields : [
{name: 'id', mapping:'id'},
{name: 'contact', type: 'string', mapping:'contact'},
{name: 'typeId', mapping:'typeId'},
{name: 'companyId', mapping:'companyId'},
{name: 'depId', mapping:'depId'},
],
proxy : new Ext.data.HttpProxy({
method : 'POST',
api:{
read : './firms/getlistcontacts/',
create : './firms/updatecontact/',
update : './firms/updatecontact/',
destroy : './firms/deletecontact/'
}}),
writer : new Ext.data.JsonWriter({
writeAllFields: true
//encode:false
}),
listeners : {
exception: function(proxy, type, action, rs, params){
alert('??????: '+type+' '+action+' '+rs);
}
}
}),
cm: new Ext.grid.ColumnModel({
columns: [{
header : '#id',
readOnly : true,
dataIndex : 'id',
width : 50
},{
id : 'typeId',
header : '???',
dataIndex : 'deptsCount',
width : 150
},{
id : 'contact',
header : '???????',
dataIndex : 'name',
width : 350
}]
}),
id : 'contactsEditorGrid',
autoExpandColumn : 'contact',
width : 500,
height : 300,
enableColLock : false,
selModel : new Ext.grid.RowSelectionModel({singleSelect:false}),
viewConfig : {
forceFit :false,
enableRowBody :true,
//showPreview :true,
getRowClass : function(record, rowIndex, p, store){
return 'x-grid3-row-collapsed';
}
},
tbar:new Ext.Toolbar({
items:[{
text : '????????',
iconCls : 'add',
handler : function(){
//var grid = Ext.getCmp('countriesGrid');
var Contact = contactsGrid.getStore().recordType;
var c = new Contact({
id: '',
contact: '',
typeId: 0
});
contactsGrid.stopEditing();
contactsGrid.getStore().insert(0, c);
contactsGrid.startEditing(0, 1);
}
},{
text : '????????',
iconCls : 'refresh-icon',
handler : function(){
Ext.MessageBox.alert("??????????", "??????????");
}
},{
text : '???????',
iconCls : 'delete-icon',
handler : function(){

}
}]
}),
//enableRowBody:true,
listeners:{
rowdblclick:{fn:function(_gridObj, _rowIndex, _e) {
//createOfficeEditWidget(_gridObj.store.getAt(_rowIndex).get('id'));
}
}
}
});



var deptsGrid = new Ext.grid.EditorGridPanel({
store: new Ext.data.JsonStore({
storeId :'deptsStore',
autoDestroy : true, // ????????? ????????? ????? ?????????? ???????
autosave : true,
idProperty : 'id',
//totalProperty: 'total',
root : 'results',
successProperty : 'success',
fields : [
{name: 'id', mapping:'id'},
{name: 'name', type: 'string', mapping:'name'}
],
proxy : new Ext.data.HttpProxy({
method : 'POST',
api:{
read : './firms/getlistcountries/',
create : './firms/updatecountry/',
update : './firms/updatecountry/',
destroy : './firms/deletecountry/'
}}),
writer : new Ext.data.JsonWriter({
writeAllFields: true
//encode:false
}),
listeners : {
exception: function(proxy, type, action, rs, params){
alert('??????: '+type+' '+action+' '+rs);
}
}
}),
cm: new Ext.grid.ColumnModel({
columns: [{
header : '#id',
readOnly : true,
dataIndex : 'id',
width : 50
},{
id : 'contact',
header : '???????? ??????',
dataIndex : 'name',
width : 350
},{
id : 'personName',
header : '?????????? ???? (???)',
dataIndex : 'deptsCount',
width : 170
}]
}),
id :'deptsEditorGrid',
autoExpandColumn: 'contact',
width :500,
height :300,
enableColLock: false,
selModel : new Ext.grid.RowSelectionModel({singleSelect:false}),
viewConfig : {
forceFit :false,
enableRowBody :true,
//showPreview :true,
getRowClass : function(record, rowIndex, p, store){
return 'x-grid3-row-collapsed';
}
},
tbar:new Ext.Toolbar({
items:[{
text : '???????? ????',
iconCls : 'add',
handler : function(){
}
},{
text : '????????',
iconCls : 'refresh-icon',
handler : function(){
Ext.MessageBox.alert("??????????1", "??????????");
}
},{
text : '???????',
iconCls : 'delete-icon',
handler : function(){

}
}]
}),
//enableRowBody:true,
listeners:{
rowdblclick:{fn:function(_gridObj, _rowIndex, _e) {
}
}
}
});

// ??????? ??? ?????
var officeReader = new Ext.data.JsonReader({
idProperty: 'id',
root : 'data',
fields:[
{name: 'id'},
{name: 'name'},
{name: 'companyId'},
{name: 'countryId'},
{name: 'regionId'},
{name: 'cityId'},
{name: 'streetId'},
{name: 'buildingId'},
{name: 'room'},
{name: 'comment'}
]
});

var officeEditorForm = new Ext.FormPanel({
labelAlign : 'left',
frame : true,
fileUploads : true,
waitMsgTarget: true,
id :'officeEditForm',
reader: officeReader,
layout : 'form',
layoutConfig: {
bodyStyle : 'padding:5px',
align : 'stretch'
},
items:
[{
xtype :'textfield',
width :'98%',
fieldLabel : '???????? ?????',
name : 'name',
dataIndex : 'name'
},{
xtype : 'tabpanel',
activeTab : 0,
items : [
{
title : '?????',
items : [fieldsetContainer]
},{
title : '????????',
layout : 'fit',
items : [contactsGrid]
},{
title : '??????',
layout : 'fit',
items : [deptsGrid]
}
]
}],
buttons: [{
text : '?????????',
handler : function(){
officeEditorForm.getForm().submit({
url : './firms/saveofficedata/',
waitMsg : '?????????...',
//submitEmptyText : false,
method : 'POST',
params:{id:id},
success : function(form, action){
if (action.result.msg){
Ext.Msg.alert('??????', action.result.msg);
}
officeEditorWidget.close();
//updateCompanyList();
}
});
}
},{
text: '??????',
handler: function(){
officeEditorWidget.close();
}
}]
});

var officeEditorWidget = Ext.WindowMgr.get('officeEditWidget');
if (!officeEditorWidget){
officeEditorWidget = new Ext.Window({
id:'officeEditWidget',
title:'?????????????? ????? ?????',
width:600,
height:400,
layout: 'fit',
minimizable: false,
closeAction: 'hide',
items: [officeEditorForm]
});
Ext.WindowMgr.register(officeEditorWidget);
}

officeEditorWidget.show();


var officeEditForm = officeEditorWidget.get("officeEditForm");
officeEditForm.getForm().reset();

if (id){
officeEditForm.getForm().load({
url:'./firms/loadofficedata/',
waitMsg:'???????? ...',
success:function(form, action){
var oGrid = Ext.getCmp('officesEditorGrid');
var oGridStore = oGrid.getStore();
//oGridStore.setBaseParam('companyId', id);
oGridStore.load();

comboRegion.store.setBaseParam('countryId', comboCountry.getValue());
comboCity.store.setBaseParam('regionId', comboRegion.getValue());
comboStreet.store.setBaseParam('cityId', comboCity.getValue());
comboBuilding.store.setBaseParam('streetId', comboStreet.getValue());

comboRegion.store.load({
callback:function(_r, _opt, _succ){
comboRegion.setValue(comboRegion.getValue());
}
});

comboCity.store.load({
callback:function(_r, _opt, _succ){
comboCity.setValue(comboCity.getValue());
}
});

comboStreet.store.load({
callback:function(_r, _opt, _succ){
comboStreet.setValue(comboStreet.getValue());
}
});

comboBuilding.store.load({
callback:function(_r, _opt, _succ){
comboBuilding.setValue(comboBuilding.getValue());
}
});
},
failure:function(form, action){
alert(action.response.responseText);
},
method:'POST',
params:{id:id}
});

}

return officeEditorWidget;
}

????????? ???-?? ????? ???-?? ????????, ?????????? ?????????? ????? ??? ????????

Thx!

Tpona
4 Aug 2010, 9:35 PM
I've got something working.
I do not like my decision (( First I have a combo box value appears from the field 'id' and only later other combo box now loaded and displayed normal values.

But I can not understand why after loading the data in the form of a combo box is not caused by the event select?

This full code of my widget:


function createOfficeEditWidget(id){

if (id=='') id = 0;


var comboCountry = new Ext.form.ComboBox({
id:'wOffice_ComboCountry',
width:'98%',
fieldLabel: '??????',
displayField:'name',
hiddenName:'countryId',
//name: 'countryId',
emptyText:'?????',
valueField:'id',
loadingText:'????????...',
triggerAction: 'all',
autocomplete: true,
store: new Ext.data.JsonStore({
root : 'results',
idProperty : 'id',
totalProperty : 'total',
fields : [
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getlistcountries/'
})
}),
listeners:{
beforeselect : function( _combo, _record, _index ){
//alert('2');
},
select : function(combo, record){
alert('comboCountry.select');
var bp = comboRegion.store.baseParams;
if (!bp || bp.countryId != record.id) {
comboRegion.store.setBaseParam('countryId', record.id);
//comboRegion.store.clear();
comboRegion.store.load();
delete comboRegion.lastQuery;
}
}
}
});

var comboRegion = new Ext.form.ComboBox({
id:'wOffice_ComboRegion',
width:'98%',
fieldLabel: '??????',
//name: 'regionId',
hiddenName:'regionId',
displayField:'name',
valueField:'id',
autocomplete: true,
loadingText:'????????...',
triggerAction: 'all',
emptyText:'???????? ??????...',
store: new Ext.data.JsonStore({
idProperty: 'id',
root : 'results',
totalProperty : 'total',
baseParams : {
countryId : 0
},
fields :
[
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getlistregions/'
})
})
});

var comboCity = new Ext.form.ComboBox({
xtype:'combo',
width:'98%',
fieldLabel: '?????',
name: 'cityId',
hiddenName:'cityId',
displayField:'name',
valueField:'id',
autocomplete: true,
loadingText:'????????...',
triggerAction: 'all',
emptyText:'???????? ?????...',
store: new Ext.data.JsonStore({
idProperty : 'id',
root : 'results',
totalProperty : 'total',
baseParams : {
regionId : 0
},
fields : [
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getlistcities/'
})
})
});

comboRegion.on('select', function(combo, record){
var bp = comboCity.store.baseParams;
if (!bp || bp.regionId != record.id) {
comboCity.store.setBaseParam('regionId', record.id);
//comboRegion.store.clear();
delete comboCity.lastQuery;
}
});

var comboStreet = new Ext.form.ComboBox({
xtype:'combo',
width:'98%',
fieldLabel: '?????',
name: 'streetId',
hiddenName:'streetId',
displayField:'name',
valueField:'id',
autocomplete: true,
loadingText:'????????...',
triggerAction: 'all',
emptyText:'???????? ?????...',
store: new Ext.data.JsonStore({
idProperty : 'id',
root : 'results',
totalProperty : 'total',
baseParams : {
cityId : 0
},
fields : [
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getliststreets/'
})
})
});

comboCity.on('select', function(combo, record){
var bp = comboStreet.store.baseParams;
if (!bp || bp.cityId != record.id) {
comboStreet.store.setBaseParam('cityId', record.id);
//comboRegion.store.clear();
delete comboStreet.lastQuery;
}
});

var comboBuilding = new Ext.form.ComboBox({
xtype:'combo',
width:'98%',
fieldLabel: '????????',
name: 'buildingId',
hiddenName :'buildingId',
displayField:'name',
valueField:'id',
autocomplete: true,
loadingText:'????????...',
triggerAction: 'all',
emptyText:'???????? ????????...',
store: new Ext.data.JsonStore({
idProperty : 'id',
root : 'results',
totalProperty : 'total',
baseParams : {
streetId : 0
},
fields : [
{
name : 'name',
mapping : 'name'
},{
name : 'id',
mapping : 'id'
}
],
proxy : new Ext.data.HttpProxy({
method: 'POST',
url : './addresses/getlistbuildings/'
})
})
});

comboStreet.on('select', function(combo, record){
var bp = comboBuilding.store.baseParams;
if (!bp || bp.streetId != record.id) {
comboBuilding.store.setBaseParam('streetId', record.id);
//comboRegion.store.clear();
delete comboBuilding.lastQuery;
}
});

var fieldSetAddress1 = {
xtype : 'fieldset',
//title : '?????',
flex : 1,
border : false,
labelWidth : 60,
defaultType : 'textfield',
defaults : {
anchor : '-5'
},
items : [
{
xtype : 'textfield',
fieldLabel: '??????',
name : 'postIndex',
width:'50%'
},comboCountry,comboRegion]
};

var fieldSetAddress2 = Ext.apply({}, {
flex : 1,
labelWidth : 80,
//title : '????????',
items : [comboCity,comboStreet,comboBuilding]},
fieldSetAddress1);


var fieldsetContainer = {
xtype : 'container',
layout : 'hbox',
height : 320,
layoutConfig : {
align : 'stretch'
},
items : [fieldSetAddress1, fieldSetAddress2]
};


var contactsGrid = new Ext.grid.EditorGridPanel({
store: new Ext.data.JsonStore({
storeId :'contactsStore',
autoDestroy : true, // ????????? ????????? ????? ?????????? ???????
autosave : true,
idProperty : 'id',
//totalProperty: 'total',
root : 'results',
successProperty : 'success',
fields : [
{name: 'id', mapping:'id'},
{name: 'contact', type: 'string', mapping:'contact'},
{name: 'typeId', mapping:'typeId'},
{name: 'companyId', mapping:'companyId'},
{name: 'depId', mapping:'depId'},
],
proxy : new Ext.data.HttpProxy({
method : 'POST',
api:{
read : './firms/getlistcontacts/',
create : './firms/updatecontact/',
update : './firms/updatecontact/',
destroy : './firms/deletecontact/'
}}),
writer : new Ext.data.JsonWriter({
writeAllFields: true
//encode:false
}),
listeners : {
exception: function(proxy, type, action, rs, params){
alert('??????: '+type+' '+action+' '+rs);
}
}
}),
cm: new Ext.grid.ColumnModel({
columns: [{
header : '#id',
readOnly : true,
dataIndex : 'id',
width : 50
},{
id : 'typeId',
header : '???',
dataIndex : 'deptsCount',
width : 150
},{
id : 'contact',
header : '???????',
dataIndex : 'name',
width : 350
}]
}),
id : 'contactsEditorGrid',
autoExpandColumn : 'contact',
width : 500,
height : 300,
enableColLock : false,
selModel : new Ext.grid.RowSelectionModel({singleSelect:false}),
viewConfig : {
forceFit :false,
enableRowBody :true,
//showPreview :true,
getRowClass : function(record, rowIndex, p, store){
return 'x-grid3-row-collapsed';
}
},
tbar:new Ext.Toolbar({
items:[{
text : '????????',
iconCls : 'add',
handler : function(){
//var grid = Ext.getCmp('countriesGrid');
var Contact = contactsGrid.getStore().recordType;
var c = new Contact({
id: '',
contact: '',
typeId: 0
});
contactsGrid.stopEditing();
contactsGrid.getStore().insert(0, c);
contactsGrid.startEditing(0, 1);
}
},{
text : '????????',
iconCls : 'refresh-icon',
handler : function(){
Ext.MessageBox.alert("??????????", "??????????");
}
},{
text : '???????',
iconCls : 'delete-icon',
handler : function(){

}
}]
}),
//enableRowBody:true,
listeners:{
rowdblclick:{fn:function(_gridObj, _rowIndex, _e) {
//createOfficeEditWidget(_gridObj.store.getAt(_rowIndex).get('id'));
}
}
}
});



var deptsGrid = new Ext.grid.EditorGridPanel({
store: new Ext.data.JsonStore({
storeId :'deptsStore',
autoDestroy : true, // ????????? ????????? ????? ?????????? ???????
autosave : true,
idProperty : 'id',
//totalProperty: 'total',
root : 'results',
successProperty : 'success',
fields : [
{name: 'id', mapping:'id'},
{name: 'name', type: 'string', mapping:'name'}
],
proxy : new Ext.data.HttpProxy({
method : 'POST',
api:{
read : './firms/getlistcountries/',
create : './firms/updatecountry/',
update : './firms/updatecountry/',
destroy : './firms/deletecountry/'
}}),
writer : new Ext.data.JsonWriter({
writeAllFields: true
//encode:false
}),
listeners : {
exception: function(proxy, type, action, rs, params){
alert('??????: '+type+' '+action+' '+rs);
}
}
}),
cm: new Ext.grid.ColumnModel({
columns: [{
header : '#id',
readOnly : true,
dataIndex : 'id',
width : 50
},{
id : 'contact',
header : '???????? ??????',
dataIndex : 'name',
width : 350
},{
id : 'personName',
header : '?????????? ???? (???)',
dataIndex : 'deptsCount',
width : 170
}]
}),
id :'deptsEditorGrid',
autoExpandColumn: 'contact',
width :500,
height :300,
enableColLock: false,
selModel : new Ext.grid.RowSelectionModel({singleSelect:false}),
viewConfig : {
forceFit :false,
enableRowBody :true,
//showPreview :true,
getRowClass : function(record, rowIndex, p, store){
return 'x-grid3-row-collapsed';
}
},
tbar:new Ext.Toolbar({
items:[{
text : '???????? ????',
iconCls : 'add',
handler : function(){
}
},{
text : '????????',
iconCls : 'refresh-icon',
handler : function(){
Ext.MessageBox.alert("??????????1", "??????????");
}
},{
text : '???????',
iconCls : 'delete-icon',
handler : function(){

}
}]
}),
//enableRowBody:true,
listeners:{
rowdblclick:{fn:function(_gridObj, _rowIndex, _e) {
}
}
}
});

// ??????? ??? ?????
var officeReader = new Ext.data.JsonReader({
idProperty: 'id',
root : 'data',
fields:[
{name: 'id'},
{name: 'name'},
{name: 'companyId'},
{name: 'countryId'},
{name: 'regionId'},
{name: 'cityId'},
{name: 'streetId'},
{name: 'buildingId'},
{name: 'room'},
{name: 'comment'}
]
});

var officeEditorForm = new Ext.FormPanel({
labelAlign : 'left',
frame : true,
fileUploads : true,
waitMsgTarget: true,
id :'officeEditForm',
reader: officeReader,
layout : 'form',
layoutConfig: {
bodyStyle : 'padding:5px',
align : 'stretch'
},
items:
[{
xtype :'textfield',
width :'98%',
fieldLabel : '???????? ?????',
name : 'name',
dataIndex : 'name'
},{
xtype : 'tabpanel',
activeTab : 0,
items : [
{
title : '?????',
items : [fieldsetContainer]
},{
title : '????????',
layout : 'fit',
items : [contactsGrid]
},{
title : '??????',
layout : 'fit',
items : [deptsGrid]
}
]
}],
buttons: [{
text : '?????????',
handler : function(){
officeEditorForm.getForm().submit({
url : './firms/saveofficedata/',
waitMsg : '?????????...',
//submitEmptyText : false,
method : 'POST',
params:{id:id},
success : function(form, action){
if (action.result.msg){
Ext.Msg.alert('??????', action.result.msg);
}
officeEditorWidget.close();
//updateCompanyList();
}
});
}
},{
text: '??????',
handler: function(){
officeEditorWidget.close();
}
}]
});

var officeEditorWidget = Ext.WindowMgr.get('officeEditWidget');
if (!officeEditorWidget){
officeEditorWidget = new Ext.Window({
id:'officeEditWidget',
title:'?????????????? ????? ?????',
width:600,
height:400,
layout: 'fit',
minimizable: false,
closeAction: 'hide',
items: [officeEditorForm]
});
Ext.WindowMgr.register(officeEditorWidget);
}

officeEditorWidget.show();


var officeEditForm = officeEditorWidget.get("officeEditForm");
officeEditForm.getForm().reset();

if (id){
officeEditForm.getForm().load({
url:'./firms/loadofficedata/',
waitMsg:'???????? ???...',
success:function(form, action){
var oGrid = Ext.getCmp('officesEditorGrid');
var oGridStore = oGrid.getStore();
//oGridStore.setBaseParam('companyId', id);
oGridStore.load();

comboRegion.store.setBaseParam('countryId', comboCountry.getValue());
comboCity.store.setBaseParam('regionId', comboRegion.getValue());
comboStreet.store.setBaseParam('cityId', comboCity.getValue());
comboBuilding.store.setBaseParam('streetId', comboStreet.getValue());

comboRegion.store.load({
callback:function(_r, _opt, _succ){
comboRegion.setValue(comboRegion.getValue());
}
});

comboCity.store.load({
callback:function(_r, _opt, _succ){
comboCity.setValue(comboCity.getValue());
}
});

comboStreet.store.load({
callback:function(_r, _opt, _succ){
comboStreet.setValue(comboStreet.getValue());
}
});

comboBuilding.store.load({
callback:function(_r, _opt, _succ){
comboBuilding.setValue(comboBuilding.getValue());
}
});
},
failure:function(form, action){
alert(action.response.responseText);
},
method:'POST',
params:{id:id}
});

}

return officeEditorWidget;
}

Surely someone has done something similar, please share your code or advice?

Thx

Condor
4 Aug 2010, 11:40 PM
I don't understand the question. What exactly is the problem?