function open() {
var req_spec_store = new Ext.data.SimpleStore({
url: 'mngr_req_ajx.php',
fields: ['value', 'text'],
data: [
['Android', 'Android'],
['iPhone', 'iPhone'],
['iPhone2', 'iPhone2'],
['iPhone3', 'iPhone3']
]
});
req_spec_store.load({
params: {
todo: 'Get_Req_Spec'
}
});
var menuWin = new Window('menuWindow', {
title: "Create Data",
width: 980,
height: 340,
draggable: true,
destroyOnClose: true,
hideEffect: Element.hide,
showEffect: Element.show,
minimizable: false,
maximizable: false,
closable: true,
resizable: false,
items: [new Ext.FormPanel({
renderTo: 'r_sp',
id: 'mngReqForm',
layout: 'form',
height: innerHeight - 250,
width: innerWidth - 50,
frame: true,
destroyOnClose: true,
defaults: {
msgTarget: 'side',
labelSeparator: ''
},
labelAlign: 'right',
items: [{
xtype: 'combo',
fieldLabel: 'Data Entry ',
store: req_spec_store,
displayField: 'text',
valueField: 'value',
mode: 'local',
emptyText: 'Select Entry...',
triggerAction: 'all',
name: 'specId2',
id: 'specId2',
hiddenName: 'specIdHid',
width: 150,
forceSelection: false,
editable: false,
selectOnFocus: true
}]
})]
});
}
window is opened in on click of button. Inside window, there is form panel. Which is having one combo type element. I am calling PHP using ajax, getting data successfully when directly doing the stuff on Ext.onReady() but not in case of window opened.
The data of your store should be in JSON (also {} instead off []=
data : [ {value:'Android', text:'Android' }, ... ]
Related
I have a layout that I need to put side by side. The layout comprise of :
1- Combobox
2- multiselect combo
3-Textfield
Now I'm using the layout property of the container and setting it to vbox for the main cont and hbox for the inside container. Now for some reason my multisselect combo box is breaking when I try to select multiple options here.
attached is the gif for it.
below is the code:
var $cls = NS.AAA = function(cfg) {
$cls.superclass.constructor.call(this, Ext.apply({
height: 45,
layout: {
type: 'vbox',
align: 'stretch',
pack: 'center'
}
//end of xtype container
}, cfg));
};
addFilter: function(token, filter, op) {
var filterItem = Ext.create({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
}),
new ux.form.datepicker.SuperDateField({
anchor: '0',
ref: "../date",
cls: "purge-date",
hideTrigger2: true,
includeFutureOptions: false,
simpleMode: true,
isDateRange: true,
hidden: true
}),
new Qx.form.MultiSelectComboBox({
allowCommaInQuery: true,
anchor: '-5',
displayField: 'value',
valueField: 'value',
hideRefreshLabel: true,
ref: "../multiComboRegions",
refreshable: false,
mode: 'local',
emptyText: $L('Select Regions'),
enableCopyPaste: false,
anyMatch: true,
caseSensitive: false,
value: ["name"],
cacheSizes: false,
hidden: true,
store: this.multiCombo = new Ext.data.ArrayStore({
fields: ['value'],
data: this.tokenValues,
expandData: true,
}),
}),// end of multiSelect
}]
}); // end of filteritem
}
},
Any idea why this could be happening and how to fix this?
I have a two GridPanel namely: 'grid1' and 'grid' under my mainPanel. Now, whenever I clicked or select a data in my 'grid1' panel, I want that data to appear also in my 'grid' panel and that is my problem.
This is what I've tried so far:
var grid1 = new Ext.grid.EditorGridPanel({
id: 'editorgrid',
store: store1,
title: 'Animals',
cm: cm1,
width: 400,
anchor: '100%',
height: 700,
frame: true,
loadMask: true,
waitMsg: 'Loading...',
clicksToEdit: 1,
tbar: [
'Animals Unit : ', '-',
{
xtype: 'combo',
name: 'animal_combo',
id:'cboAnimal',
anchor: '90%',
allowBlank: false,
editable: false,
forceSelection: true,
triggerAction: 'all',
mode: 'remote',
store: new Ext.data.JsonStore({
url: '/index.php/getAnimalCombo',
root: 'data',
totalProperty: 'total',
fields: ['id','desc'],
params: {start: 0},
baseParams: {limit: 25}
}),
pageSize: 25,
displayField: 'desc',
valueField: 'id',
minListWidth: 150,
valueNotFoundText: '',
width: 150,
minChars: 1
},
'-',
],
bbar: pager1
});
Ext.getCmp('cboAnimal').addListener('select', function(combo, record, index){
grid1.getStore().baseParams['animal_id'] = record.get('id');
grid1.getStore().load();
});
var store = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: '/index.php/getContent'
}),
root: 'data',
pruneModifiedRecords: true,
totalProperty: 'total',
baseParams: {limit: 25},
autoLoad: {params: {start: 0}},
fields: ['id','animals'],
sortInfo: {field:'id', direction:'ASC'}
});
var grid = new Ext.grid.EditorGridPanel({
id: 'maingrid',
store: store,
cm: cm,
width: 785.5,
anchor: '100%',
height: 700,
frame: true,
loadMask: true,
waitMsg: 'Loading...',
clicksToEdit: 1,
bbar: pager
});
Try this and let me know the result...
// instead of baseParam try to use extraParams
grid1.getStore().proxy.extraParams = {'animal_id': record.get('id')}
Also, please write the error message or what you getting!
I have made a webapp with extjs 3.4.
I have a grid that I want to group with field street but I can't.
My code is here:
var store_intervencoes = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({
root:'rows',
autoLoad: false,
type : 'ajax',
//remoteGroup: false,
groupField: 'street',
fields:[{ name:'street', type:'integer'},
{ name:'intervenction', type:'string'},
{ name:'priority', type:'integer'},
{ name:'value', type:'string'}]
})
});
var gridPanel = new Ext.grid.GridPanel({
header: false,
store: store_intervencoes,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
layout: 'fit',
height: 300,
width: 1000,
columnLines: true,
cls: 'grid_intervencoes',
autoScroll: true,
stripeRows: true,
autoFill : true,
viewConfig: { emptyText: 'nothing', deferEmptyText: false },
groupField: 'street',
view: new Ext.grid.GroupingView({
forceFit:true,
autoHeight: true,
autoFill : true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "fk_n_rua"]})'
}),
columns: [{
//header: "Nome",
//sortable: true,
dataIndex: "intervenction",
//width: 450
},{
//header: "Prioridade",
//sortable: true,
dataIndex: "priority",
//width: 50
},{
//header: "Custo" + ' \u20AC',
//sortable: true,
dataIndex: "value",
//width: 50
},{
//header: 'Trecho',
//sortable: true,
dataIndex: "street",
//width: 50,
//groupable: true
}],
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
fbar : [{
xtype: 'numberfield',
id: 'total',
name: 'total',
fieldLabel: 'Total',
value: '0',
readOnly: true,
fieldCls: 'valores'
}]
});
I think I have all the code like this example:
http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/grouping.html
I don't know why the grid doesn't group. I get all the data from a database with ajax and php that generate json. All fields shows up. The unique problem is the non grouping. I also get no errors.
Anyone could help me with that?
Before starting I am sorry with my english.. I don't speak it well ..
So I have a problem with the Combobox in ExtJS4 .. I tried to add a empty line in my combobox list but It's not ok .. i have the list with a empty line but when I trie to select it I can't.. so if someone can help me or have an example please
Ext.require([
'Ext.form.*',
'Ext.data.*',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function () {
Ext.QuickTips.init();
var form = Ext.create('Ext.form.Panel', {
renderTo: 'docbody',
title: ' ',
autoHeight: true,
width: 600,
bodyPadding: 10,
defaults: {
anchor: '100%',
labelWidth: 100
},
items: [{
xtype: 'fieldcontainer',
combineErrors: true,
msgTarget: 'side',
fieldLabel: ' Name',
items: [{
width: 50,
xtype: 'combo',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
editable: false,
selectOnFocus: true,
name: 'title',
displayField: 'name',
valueField: 'value',
tpl: '<tpl for="."><div class="x-combo-list-item">{name:defaultValue("--")}</div></tpl>',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'value'],
data: [{
name: 'Mvr',
value: 'mr'
}, {
name: 'Mrs',
value: 'mrs'
}, {
name: 'Miss',
value: 'miss'
}],
listeners: {
'load': function (store, records, options) {
this.insert(0, '--');
}
}
})
}]
}]
});
});
Unless adding a record to your store will break something else in your program logic, I would suggest doing that and getting rid of the template.
Ext.require([
'Ext.form.',
'Ext.data.',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var form = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title : ' ',
autoHeight: true,
width : 600,
bodyPadding: 10,
defaults: {
anchor: '100%',
labelWidth: 100
},
items : [
{
xtype : 'fieldcontainer',
combineErrors: true,
msgTarget: 'side',
fieldLabel: ' Name',
items : [
{
width: 50,
xtype: 'combo',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
editable: false,
selectOnFocus : true,
name: 'title',
displayField: 'name',
valueField: 'value',
//tpl: '<tpl for="."><div class="x-combo-list-item">{name:defaultValue("--")}</div></tpl>',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields : ['name', 'value'],
data : [
{name : 'Mr', value: 'mr'},
{name : 'Mrs', value: 'mrs'},
{name : 'Miss', value: 'miss'}
],
listeners :
{
'load' : function (store, records, options) {
store.add({name: '--', value: null});
}}
})
}
]
}
]
});
});
I have a panel defined like this:
var msgDetailsPanel = new Ext.ux.ManagedIFrame.Panel({
title: 'M',
header: true,
width:700,
height:200,
autoScroll: true
});
And I have a Grid defined like this:
var detailGrid = new Ext.grid.GridPanel({
id:'detailGrid',
store: dataStore,
collapsible: false,
columnLines: false,
enableHdMenu: false,
header: false,
cm: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
{id:'msgId',hidden: true, dataIndex: 'msgId'},
{sortable: true, dataIndex: 'deliveryAddr'},
{sortable: true, dataIndex: 'deliveryDate'},
{sortable: true, dataIndex: 'status', renderer:function(value, p, record){
return String.format( '<font color="009966">{0}</font>', value );}},
{header: 'info',xtype: 'templatecolumn',tpl: 'View Message Details'}
}),
viewConfig: {
forceFit:true
},
columnLines: false,
frame:false,
collapsible: false,
animCollapse: false,
title: alertName,
disableSelection: true,
deferRowRender:false
});
Now I want to add these two components to a window.
win = new Ext.Window({
layout:'fit',
title: '<spring:message code="title.alertDetails" />',
autoDestroy: true,
autoScroll: true,
width:600,
height:400,
closable:false,
plain: true,
items: [{detailGrid}, {msgDetailsPanel}],//This is where error comes
buttons: [{
text: '<spring:message code="label.button.close" />',
handler: function(){
win.hide(this);
}
}]
});
I get error:
Expected ':'
When I am adding only the msgDetailsPanel under items, things work fine.
What am I doing wrong?
Try replacing this line:
items: [{detailGrid}, {msgDetailsPanel}],
with:
items: [detailGrid, msgDetailsPanel],