Ext JS Combobox inside a grid [closed] - javascript

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
In reference with Combobox inside a grid example. I was able to do this in my page. problem is, when i change the value in one of the combobox, the rest of the combobox in the same row also change, they all have the same value.
I'm using only a javascript and basic html and ext js with this. I'm using ext sandbox (ext4).
any help?
if(columnData != undefined){
for (var i = 0; i < columnData.length; i++)
{
var storedata = [];
for(var gr = 0;gr < gridData.itemData[0][0].length;gr++){
storedata.push([(gr + 1),gridData.itemData[0][0][gr]]);
}
var comboRenderer = function(combo) {
return function(value) {
alert(value);
alert(combo.valueField);
var idx = combo.store.find(combo.valueField, value);
if ( idx < 0 ) {
idx = 0;
}
var rec = combo.store.getAt(idx);
return rec.get(combo.displayField);
};
};
fields.push({name:columnData[i].name});
columns.push({text:columnData[i].name, width: 140, menuDisabled: true, sortable: false, align: 'center', forcefit: true,
columns: [{
text: 0,
draggable: false,
hideable: false,
flex: 1,
width: 140,
dataIndex: columnData[i].name,
menuDisabled: true,
sortable: false,
align: 'center',
editable: true,
renderer: comboRenderer(new Ext4.form.ComboBox({
id: i.toString(),
typeAhead: true,
triggerAction: 'query',
mode: 'queryMode',
autoSelect : false,
autoShow : true,
emptyText : 'Select item',
store: new Ext4.data.ArrayStore({
fields: ['id' + i, 'description' + i],
data : storedata
}),
displayField:'description' + i,
valueField: 'id' + i,
forceSelection: false
})),
editor: new Ext4.form.ComboBox({
id: i.toString(),
typeAhead: true,
triggerAction: 'query',
mode: 'queryMode',
autoSelect : false,
autoShow : true,
emptyText : 'Select item',
store: new Ext4.data.ArrayStore({
fields: ['id' + i, 'description' + i],
data : storedata
}),
displayField:'description' + i,
valueField: 'id' + i,
forceSelection: false
})
}]
});
}
}

They all share the same store. You need to create a copy of the store for every combobox.

somehow, i just need to clear my cache for my updates to work. tnx #A1rPhun

Related

Delete is not working in jqx-grid in angularjs

function deleteRender(row, column, value) {
if (!value) {
return;
}
var status = getUserStatus(value);
var actionText = deleteBlockHtml;
if (!isUserContext()) {
actionText = '<span>Delete</span>';
}
if (status) {
actionText = '<span>Activate<span>';
}
return '<span class="grid-link-render"><a class="delete-grid-row" href="#" id="deleteUser_' + value.trim() + '">' + actionText + '</a></span>';
}
columnList = [
{text: 'Status', datafield: 'status', width: "8%", groupable: true, editable: false},
{text: 'Action', datafield: '_id', cellsrenderer: deleteRender, width: "10%", groupable: true, editable: false, filterable: false, sortable: false, menu: false},
];
I am calling the deleteRender() function on click of my delete button which is present in action.Unfortunately,when i scroll down to bottom it is not getting called in grid.
Can anyone plese help me.Thanks.
Please share some more code. The method in cellsrenderer method takes care of tailoring the html to be rendered into that cell of that column using the bounded data for that column which is called for each row when the grid is being painted.
i don't think deleteRender should contain the column list in there. Also, can you please show where you are defining the delete event that is attached for that 'Delete' link in the action column ?
Or please let me know if i'm missing something.

Adding text area dynamically to container extjs

I am facing problem in adding text area to container dynamically.
Initial creation of container:
xtype: 'container',
layout: 'form',
width: 400,
ref: 'form',
layoutConfig: {
labelSeparator: ' ',
trackLabels: true
},
items: [{
xtype: 'textarea',
value: 'test',
fieldLabel: 'label',
anchor: '100%',
submitValue: false,
readOnly: true,
ref: '../field_1',
id: 'field_1'
}]
}
Dynamic code:
for (i = 4; i < obj.length; i++) {
var id = i + 12;
id = 'field_' + id;
var field = newTextArea(id);
field.setValue(obj[i].value);
field.setVisible(true);
this.form.add(field);
}
Function to create text area:
function newTextArea(id) {
var text_Area = new Ext.form.TextArea({
fieldLabel: 'Test',
height: 30,
width: 250,
submitValue: false,
readOnly: true,
autoScroll: true,
id: id
});
return text_Area;
}
Problem:
When i debug and see form, textarea is added in form items but its not displayed in the browser. Can someone suggest what to do?
Regards,
Raj
Check this simple fiddle.
Not sure what is wrong with your code, you dont mention what is obj and I think that this.form is wrong reference to the container. I think you can to use Ext.ComponentQuery.query or something similar (like up and down methods for queryable components).
In extjs 3.x, you have to call doLayout after adding items to a container.
for (i = 4; i < obj.length; i++) {
var id = i + 12;
id = 'field_' + id;
var field = newTextArea(id);
field.setValue(obj[i].value);
field.setVisible(true);
this.form.add(field);
}
this.form.doLayout();

Can any body help me out with the code for making a panel with check boxes inside a combo box in extjs 4.2

i want check boxes inside a combo box in extjs 4.2 i have tried the below code but it is not working may be i am not able to make it work but it is using images to show check and uncheck functionality. can some help me out ?
function stackoverflow() {
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select multiple names ',
id: 'BCCAddress',
name: 'BCCAddress',
maxHeight: 150,
width: 500,
multiSelect: true,
emptyText : "Select Bcc email addresses",
renderTo: 'fi-form',
//store: myArrayStore,
store: new Ext.data.SimpleStore({
fields: ['name'],
data : myArrayStore
}),
displayField: 'name',
valueField: 'name',
forceSelection: false,
editable: false,
mode: 'MULTI',
triggerAction: 'all',
listConfig : {
getInnerTpl : function() {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>';
}
}
});
}
I think that it's a bad idea, sencha don't like when changing standard behaviour. But it's simply "kludge". Your code does not have correct css style. Look at this:
var data = [
[1, 'Ext.Js'],
[2, 'Angular.js'],
[3, 'Ember.js'],
[4, 'Олю']
];
// in real solution add it to your css file
var customStyle = ".x-boundlist-item img.chkCombo { width: 13px; height: 13px; background: transparent url('https://extjs.cachefly.net/ext-4.0.7-gpl/resources/themes/images/default/form/checkbox.gif'); }" + ".x-boundlist-selected img.chkCombo { background-position: 0 -13px; width: 13px; height: 13px; background: transparent url(https://extjs.cachefly.net/ext-4.0.7-gpl/resources/themes/images/default/form/checkbox.gif'); }";
Ext.util.CSS.createStyleSheet(customStyle);
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'I like',
id: 'BCCAddress',
name: 'BCCAddress',
maxHeight: 150,
width: 500,
multiSelect: true,
emptyText: "",
renderTo: Ext.getBody(),
store: new Ext.data.SimpleStore({
id: 0,
fields: ['Id', 'Name'],
data: data
}),
displayField: 'Name',
valueField: 'Id',
forceSelection: false,
editable: false,
mode: 'local',
triggerAction: 'all',
listConfig: {
getInnerTpl: function() {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {Name} </div>';
}
}
});
Fiddle
Checkboxes in a combobox is impossible.
Period.
Think about it differently, and you will find a solution.
You say you need checkboxes above. So that's the way to go. Put your checkboxes in a row. Then you add a button that when clicked opens a window with a grid in it that contains the other checkboxes.
This will look and behave like what you describe.
Conclusion:
You have to change your approach. A framework offers bricks that you put together to get what you want. Like LEGO. If you take the right brickes you can achieve great things in a few time.
Currently, you immagine bricks that don't exist, and try to force something to work that impossible way that you immagined. Why would you use a framework then ? Your free to invent the impossible, even flying calves or a snake with seven heads.

Custom Renderer in Ext-js - Bryntum/ExtJs UTC Date Issue

I'm trying to add a custom renderer to Bryntum Ext Gantt chart.
I have dates which are being shown in the local timezone, but I wish to show them in the UTC date because this is what the datasource is using to present the user with date (it's agnostic of browser time-zone) in the source application.
The post here led me in the right direction (seems to be what I need based on my tests): Why does ExtJS subtract a day when formatting a date?
How do I implement linked solution into a custom renderer?
I tried this and the column was blank:
{
xtype:'startdatecolumn',
sortable: false,
text: 'Start',
dataIndex: 'StartDate',
renderer: function (v, m, r) {
return Ext.util.Format.date(Ext.Date.parse(v, "Y-m-d"), "m-d-Y");
}
}
Also tried this and the column was blank:
{
xtype:'startdatecolumn',
sortable: false,
text: 'Start',
dataIndex: 'StartDate',
renderer: function (v) {
var dt = Ext.Date.parse(v, "Y-m-d");
Ext.util.Format.date(dt, "m-d-Y");
return dt;
}
}
With this format, it shows the date in local timezone (incorrect unless set to UTC).
{
xtype:'enddatecolumn',
dataIndex: 'EndDate',
sortable: false,
text: 'End'
}
Bryntum Column Example
columns : [
{
xtype : 'treecolumn',
header: 'Tasks',
sortable: true,
dataIndex: 'Name',
width: 200,
field: {
allowBlank: false
},
renderer : function(v, meta, r) {
if (!r.data.leaf) meta.tdCls = 'sch-gantt-parent-cell';
return v;
}
},
{
xtype : 'startdatecolumn'
},
{
//hidden : true,
xtype : 'enddatecolumn'
},
Fixed using this function:
function niceDate (v, m, r) {
var dt = padStr(1 + v.getMonth()) +
'-' +
padStr(v.getDate()) +
'-' +
padStr(v.getFullYear());
return dt;
}
function padStr(i) {
    return (i < 10) ? "0" + i : "" + i;
}
and in the column renderer :
{
xtype:'startdatecolumn',
sortable: false,
text: 'Start',
dataIndex: 'StartDate',
renderer: niceDate
}
When parsing the xml, I use a switch function with the following for timestamps:
case 'timestamp':
if(!empty(v))
v = new Date(parseInt(v));
break;
This seems to reliably feed a "date" object to ext.js and the column is rendered to match our sources date formatting using the renderer.

Delete row from EditorGridPanel in Ext JS 2.0.2

I am new to Ext JS and I need to update an old app. The EditorGridPanel has an 'ADD' button and it works fine. However, I need to add a 'DELETE' button that deletes the row from the grid. Here is the code to the grid. Thanks for your help.
/*==== INVOICE DATA START =======================================================*/
var iLineItemCM = new Ext.grid.ColumnModel([
{id:'i_line_item_name', header: "Line Item Name", dataIndex: 'i_line_item_name', width: 280,
editor: new Ext.form.TextField({allowBlank: false})}
,{header: "Amount", dataIndex: 'i_line_item_amt', width: 80, align: 'right', renderer: 'usMoney',
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})}
]);
var iLineItemRec =
new Ext.data.Record.create([
{name: 'i_line_item_name' ,mapping: 'i_line_item_name' ,type: 'string'}
,{name: 'i_line_item_amt' ,mapping: 'i_line_item_amt' ,type: 'string'}
]);
var iLineItemStore = new Ext.data.Store({
url: '',
reader: new Ext.data.JsonReader({
root: 'rows'
},
iLineItemRec
)
});
var iLineItemGrid = new Ext.grid.EditorGridPanel({
store: iLineItemStore,
cm: iLineItemCM,
width: 'auto',
height: 'auto',
//title:'Edit Plants?',
frame:false,
//plugins:checkColumn,
clicksToEdit:1,
viewConfig: {
//forceFit: true,
autoFit:true
},
id: 'iLineItemStore',
tbar: [{
text: 'Add Line Item',
handler : function(){
var r = new iLineItemRec({
i_line_item_name: '',
i_line_item_amt: ''
});
iLineItemGrid.stopEditing();
iLineItemStore.insert(0, r);
iLineItemGrid.startEditing(0, 0);
}
}]
});
///////////////////
From the docs for Cell Selection Model: http://docs.sencha.com/ext-js/2-3/#!/api/Ext.grid.CellSelectionModel
The cell model is specified as default.
getSelectedCell( ) : Array
Returns the currently selected cell's row and column indexes as an array (e.g., [0, 0]).
So... something like
{ text: 'Remove',
tooltip:'Remove the selected item',
handler: function(){
iLineItemGrid.stopEditing();
var r = iLineItemGrid.getSelectionModel().getSelectedCell();
iLineItemStore.removeAt(r[1]); } }

Categories