1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    395
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Question Using a Combo in a Listview Column definition, possible?

    Using a Combo in a Listview Column definition, possible?


    Hi There,

    I have a ListView object defined as below, using some templating to get the rows displayed how I would like. I also would like to get a combo box displayed in one of the columns which will just list a set of actions a user can select to perform.

    Can this be achieved?

    Code:
     
    listview = new Ext.list.ListView({
      store: store,
      emptyText: 'No Vacancies To Display',
      columnSort: true,
      singleSelect: true,
      columns: [{
       header: 'Job Title',
       width: .3,
       tpl: '<p><span style="font-size:14px;"><b>{jobtitle}</b></span></p><br/><a href="#">{company}</a>'
      },{
       header: 'Location',
       width: .2,
       dataIndex: 'location'
      },{
       header: 'Salary',
       tpl: '{salary:number("£0,000.00")}'
      },{
       header: 'Candidates',
       width: .2,
       tpl: '<p>New: {newcandidates} <br/> Current: {currentcandidates}</p>'
      }]
     });

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    87
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Do you want to use a <select> element or a Ext.form.ComboBox?

    You can simply specify a <select> element in your tpl, but when you want to render components inside I recommend the ComponentListView user extension.

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    395
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default


    I think I would prefer to use an Ext.form.Combox, how would I go about doing this.

    Also, where can I find details on the ComponentListView extension please?

    Thanks

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    87
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    See here.

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    395
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default


    Hmm Ok,

    I see how the extension works but am unsure this will really help me.

    I see that in the ComponentListView example, the column definitions use component objects bound to data in the store.

    In my case, the combo box I will want displayed will not be using any of the data in the store which the list view is bound too. It will be bound to some other store with a list of static items.

    Perhaps I'm over complicating things here?

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    87
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You could simply put a div with a specific class in your tpl and attach a click event handler to the listview that checks if the event target has this class and show an Ext.menu.Menu at the event XY when it does.

  7. #7
    Sencha User
    Join Date
    Jun 2009
    Posts
    395
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default


    Yeah I know a context menu would probably be the easiest way, its just we have a requirement to display a drop down list of options in the final column.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    87
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Yes, this would be like a context menu, but activated by the left mouse button instead of the right one.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,498
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Hmm.... I could see the ActionColumn class being uprated to offer this.

    Its items could be use to create MenuItems, and it could create a single Menu, and then show it on click of the cell.

    The question then becomes what to render in the cell to indicate clickability.

Similar Threads

  1. Listview column and linebreak
    By seppy in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 22 Apr 2010, 12:10 PM
  2. Solution: word-wrap grid cell via column definition
    By richardtallent in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 14 Feb 2010, 7:47 AM
  3. ListView and column template
    By ajmott in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 5 Jan 2010, 5:19 PM
  4. combo with multiple columns in listview
    By VanillaBean in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 7 Sep 2009, 4:16 AM
  5. Show the ListView template icon in the TextField of a Combo
    By G_Taylor in forum Community Discussion
    Replies: 0
    Last Post: 12 May 2009, 5:06 PM

Thread Participants: 2